vue中常见的指令

Posted 2021-03-22 jwenming

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})
        }
    }
})