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

原文地址:https://www.cnblogs.com/JSWBK/p/7886205.html