1,差值表达式{{}}
1 <p >{{ msg }}</p>
2、v-cloak解决差值表达式闪烁的问题
<p v-cloak>{{ msg }}</p>
3、v-text是没有闪烁问题的。
1 <h4 v-text="msg"></h4>//注意:v-text会覆盖元素中的原本的内容,差值表达式只会替换自己的这个占位符 3 <h4 v-text="msg">=======</h4>//等于号将会被替换掉
4、 v-html也会覆盖元素原本的内容,但是可以解析出HTMl标签。
5、 v-bind: 是Vue中提供的用于绑定属性的指令。
简写形式为 :只能实现数据的单项绑定,由M 自动绑定到 V中。无法实现数据的双向绑定。
<input type="button" value="按钮" v-bind:title="mytitle">//这里的mytitle是一个在data里面定义的一个变量
6、v-on是事件绑定机制。简写形式为@
<input type="button" value="按钮" v-on:click="show">//show是在new Vue里面的methods属性中的可用的方法,事件处理函数
7、v-model是唯一的实现数据双向绑定。
表单元素可以和用户进行交互。该指令可实现 表单元素和 Model中数据的双向绑定。但是仅限于表单元素input(radio/text/addresss/email) select checkbox textarea
8、v-if和v-show的区别
v-if每次都会重新删除或创建元素。具有较高的切换性能的消耗。
v-show每次不会重新进行Dom的删除和创建操作,只是切换了元素的display:none样式,具有较高的初始渲染消耗
9、v-for可以做一些循环操作。
1循环普通数组:要先写每一项item,再写索引i
<p v-for="(item,i) in list1">索引:{{i}}----每一项:{{item}}</p>
其中普通数组是定义在data上的list1如下
list1: [1,2,3,4,5]
2循环对象数组
<p v-for = "(item,i) in list2">ID: {{item.id}}---名字:{{item.name }}---索引:{{i}}</p>
其中,list2是定义在data上的对象数组
list2: [ { id:1, name: ‘zs1‘}, { id:2, name: ‘za2‘}, { id:3, name: ‘zs3‘} ],
3循环对象
<p v-for = "(val, key, i) in user">值是:{{val}}---键是--{{key}}--索引是:{{i}}</p>
user:{ id:1, name:‘托尼*屎大颗‘, gender: ‘男‘ }
4迭代数字
<p v-for = "count in 10 ">这是第 {{ count }} 次循环</p>
注意:在v-for循环的时候,应该尽量指定key属性,且只能使用number或者string类的,例如下面的事例中,给ID框和Name文本框写入数据之后实现页面的同步。
例子:添加Name和ID
#app部分为如下:
1,页面上的数据是由用户输入的,因此需要v-model双向数据绑定。v-model的作用是,1,将用户输入的数据同步到data中2,同步到data中的数据(使用)通过methods中的业务逻辑同步到页面上。
<div id="app"> <div> <label >ID: <input type="text" v-model = "id"> </label> <label >Name: <input type="text" v-model = "name"> </label> <input type="button" value="添加"@click="add"> </div> <p v-for = "item in list":key="item.id"><input type="checkbox">{{item.id}}---{{item.name}}</p> </div>
vm是一个新的事例。el 是指定的要控制的区域。 data 是个对象,指定了控制的区域里面要用到的数据。methods 虽然带个s后缀,但是是个对象,可以自定义方法。 在vm实例中,如果要访问 data 上的数据,或者要访问methods中的方法,必须带上this。
var vm = new Vue({ el:‘#app‘, data:{ id:‘‘, name:‘‘, list:[ { id:1, name:‘刘亦菲‘}, { id:2, name:‘刘昊然‘}, { id:3, name:‘柳岩‘}, { id:4, name:‘刘德华‘} ] }, methods:{ add(){ this.list.unshift({id:this.id,name:this.name}) } } })
原文地址:https://www.cnblogs.com/jwenming/p/12046033.html
时间: 2024-11-13 04:21:26