vue快速复习手册 - Web

TOP

vue快速复习手册(二)

2019-09-17 19:00:09 【大中小】浏览:68次

ass="box">           </div> </body> </html> View Code

小结：

1.v-show用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的。

2.注意在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突

4.列表渲染

关键字：普通列表，列表下标，有且只有一个对象，对象列表

<script>
    window.onload = function () {
    var vm = new Vue({
        el:'.box',
        data:{
            // 01: 普通列表
            itemList:[1, 2, 3, 4, 5],
            // 02: 列表下标
            indexList:['a','b','c','d'],
            // 03: 有且只有一个对象
            objData:{
                name:'小明',
                age:19
            },
            // 04: 对象列表
            objList:[
                {
                    name:'小明',
                    age:20
                },
                {
                    name:'小红',
                    age:21
                }
            ]
        }
    });
}
</script>

View Code

普通列表

<li v-for='item in itemList'>{{item}}</li>

列表下标

<li v-for='(item,index) in indexList'>角标{{index}}==数值{{item}}</li>

有且只有一个对象

<li v-for='item in objData'>{{item}}</li>
<li v-for='(obj,key) in objData'>属性值{{obj}}-----属性名{{key}}</li>

对象列表

<li v-for='obj in objList'>属性值1:{{obj.name}}==属性值2:{{obj.age}}</li>

小结：该指令适用于任何html标签

5.表单输入绑定（双向数据绑定）

关键字：单行文本框、多行文本框、单选框、多选框、下拉框

<!-- 01.单行文本框 -->
        <input type="text" v-model='content'>
        <p>{{content}}</p>

<!-- 02.多行文本框 -->
        <textarea v-model='content'></textarea>
        <p>{{content}}</p>

<!-- 03.单选框 -->
        <input type="radio" name="sex" value="男" v-model='content'>男
        <input type="radio" name="sex" value="女"  v-model='content'>女
        <p>{{content}}</p>

<!-- 04.多选框 -->
        <input type="checkbox" name="lk" value="吃饭" v-model='like'>吃饭
        <input type="checkbox" name="lk" value="睡觉" v-model='like'>睡觉
        <input type="checkbox" name="lk" value="打豆豆" v-model='like'>打豆豆
        <p>{{like}}</p>     

<!-- 05.下拉框 -->
        <select name="addr" v-model='address'>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </select>
        <p>{{address}}</p>

View Code

小结：可以用 v-model 指令在表单<input><textarea><select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

6.ES6语法

关键字：语法介绍、变量声明、对象的简写、箭头函数

6.1.变量声明

let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字，这两个关键字和var的区别是，它们声明的变量没有预解析，let和const的区别是，let声明的是一般变量，const申明的常量，不可修改。

var

console.log(iNum1);
// 在ES5中 声明变量使用var
var iNum1 = 10;
// 结果为:undefined, 因为使用 var 声明的变量, 有预解析

let

console.log(iNum1);
// 在ES6中 声明变量可以使用let
let iNum1 = 10;
// 查看后会发现报错:iNum1 is not d

首页上一页 1 2 3 下一页尾页 2/3/3
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：面试题-JavaScript交换两个变量的..	下一篇：jquery.dataTables的探索之路-服..