vue使用(二)----------vue基础指令

常用指令

v-text:  是元素的innerText,只能在双标签中使用

v-html: 是元素的innerHTML，不能包含{{xxx}}

v-if:      元素是否移除或插入

v-show:元素是否显示或隐藏

v-model:双向数据绑定

v-bind:  单向数据绑定（js内存改变页面）

 

双向数据绑定：

1向：js内存属性发生改变，影响页面的变化

1向：页面的改变影响js内存属性的变化

v-bind的使用：
场景：需要根据可变的表达式结果来给class赋值，就需要用到v-bind:class='XXX'
方式：v-bind:属性名="表达式"，最表达式运算结束的结果赋值给该属性名
简化写法： :属性名="表达式"

class：结果分类
一个样式：返回字符串（三元表达式和key和样式的清单对象）
多个样式：返回对象（样式做key，true或false做值）

 

v-on的使用：
场景：绑定事件
方式：v-on:事件名="表达式||函数名",
简化写法： @事件名="表达式||函数名",

函数名如果没有参数，可以省略() 只给一个函数名称
声明组件内函数，在export default这个对象的根属性加上methods属性，其是一个对象
key是函数名 值是函数体
在export default这个对象的根属性加上data属性，其是一个函数，返回一个对象
对象的属性是我们初始化的变量的名称
凡是在template中使用变量或函数，不需要加this，在script中使用就需要加上this

 

v-for的使用
1.用来遍历数组，将数组的每一个值绑定到相应的视图元素中去，此外，v-for还可以遍历对象的属性，并且可以和template模板元素一起使用。还可以接受index作为可选的第二参数，当有两个参数时，参数之间用逗号分隔，并包含在一组括号里面。

2.迭代一个对象的属性。默认是迭代属性的值。不像迭代数组，它可以接受两个可选的参数，迭代属性的key和index。

3.循环整数列 num in 1000