vue常用指令

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

v-html是元素的innerhtml,不能包含{{xxx}}

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

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

v-model双向元素绑定,v-bind是单向元素绑定(内存js改变影响页面)

2.class结合v-bind使用

需要根据可变的表达式的结果来给class赋值,就需要用到v-bind:class="xxx"

v-bind:属性名=“表达式”,最终表达式运算结束的结果赋值给该属性名

简化的写法是:`:属性名=“表达式”`

class:结果的分类

一个样式:返回字符串(三元表达式和key和样式的清单对象)

多个样式:返回对象(样式做key,true或false做值)

3.methods和v-on的使用

*绑定事件的方法

`v-on:事件名=“表达式||函数名”`

简写:`@事件名=“表达式||函数名”`

*函数名如果没有参数,可以省略() 只给一个函数名称

*声明组件内函数,在export default这个对象的根属性加上methods属性,其是一个对象

key是函数名 值是函数体

*在exports default这个对象的根属性加上data属性,其是一个函数,返回一个对象

对象的属性是我们初始化的变量的名称

*凡是在template中使用变量或者函数,不需要加this

*在script中使用就需要加上this

3.v-for的使用

可以使用操作数组:(item,index)

可以使用操作对象(value,key,index)

 key是类似trank by 的一个属性,目的是告诉vue,js中的元素,与页面之间的关联。当试图删除元素时,是单个元素的删除,而不是全部替换,

原文地址:https://www.cnblogs.com/Yanss/p/10478398.html