vue的指令

官网：

https://cn.vuejs.org/

vue的模板渲染指令

1. {{}}插值表达式

<h1>{{msg}}</h1>

2. v-html

<!-- ""中是js表达式 -->
<h1 v-html="msg + 1"></h1>
<h1 v-html="'msg'"></h1>

3. v-text

不能解析html标签

<h1 v-text="<em>111</em>"></h1>

4. v-bind

绑定动态属性
v-bind:src 等价 :src

<img v-bind:src="'./img/' + imgUrl" alt="" v-on:click="changeUrl">
<img :src="'./img/' + imgUrl" alt="" v-on:click="changeUrl">

5. v-on

绑定事件
v-on:click 等价于 @click

<img :src="'./img/' + imgUrl" alt="" v-on:click="changeUrl">
<img :src="'./img/' + imgUrl" alt="" @click="changeUrl">
....
<script>
new Vue({
  methods: {
    changeUrl(){}
  }
})
</script>

事件传参

<p><button class="btn1" @click="fun1" >不传参数</button></p>
<p><button class="btn2" @click="fun2('red',23)">传参数</button></p>
<p><button class="btn3" @click="fun3">不传其它参数,只获取事件对象</button></p>
<p><button class="btn4" @click="fun4('blue',$event)">传其它参数,并且获取事件对象</button></p>

注意： 如果事件处理程序既要传一般参数，也要获取事件对象，事件对象要放在最后，用$event做为参数传入
方法

fun1(){
    console.log('fun1');
},
fun2(color,num){
    console.log(color,num);
},
fun3(e){
    // console.log(e);
    console.log(e.clientX,e.clientY);
    console.log(e.target);
},

fun4(color,e){
    console.log(e);
},

事件修饰符

<!-- 
    事件修饰符： @click.修饰符
    1. @click.stop  阻止冒泡
    2. @click.prevent  阻止浏览器默认行为
    3. @click.once 只执行一次
    4. @keyup.键名  (13，enter都是指回车键， 38： 上箭头)
    -->
    <p @click="handlerP"><button @click.stop="handlerBtn">阻止冒泡</button></p>
    <form>
        <p>用户名：<input type="text" name="user" @keyup.enter.38="fun"></p>
        <p><button @click.prevent="addPro">提交</button></p>
    </form>
    <p><button @click.once="addPro">只执行一次</button></p>

vue的条件渲染指令

6. v-if

条件为真，则渲染，条件为假，不渲染(没有生成dom对象)

v-else

v-if和v-else要相邻

v-else-if

<p><button @click="toggle()">切换显示和隐藏</button></p>
<div class="box1 box" v-if="isShow">登录框</div>
<div class="box2 box" v-show="isShow">登录框</div>

var vm = new Vue({
    el: '#app',
    data: {
        isShow: true
    },
    methods: {
        toggle(){
            this.isShow = !this.isShow
        }
    }
});

7. v-show

条件为真，则显示，条件为假，则隐藏(生成了dom对象，css样式为隐藏)

<p><button @click="toggle()">切换显示和隐藏</button></p>
<p v-if="isShow"><button>红色</button></p>
<p v-else v-cloak><button>蓝色</button></p>

vue的列表渲染指令

8. v-for

数据

data: {
    list: [1, 3, 6],
    person: {
        name: "Rose",
        age: 20,
        address: 'BJ'
    },
    studentsList: [
        {
            name: "Rose1",
            age: 20,
            address: 'BJ'
        },
        {
            name: "Rose2",
            age: 20,
            address: 'BJ'
        },
        {
            name: "Rose3",
            age: 20,
            address: 'BJ'
        }
    ]
},

渲染数组

<ul>
    <li v-for="item in list">{{item}}</li> -->
</ul>
<ul>
    <li v-for="(item,index) in list">{{index}}------{{item}}</li>
</ul>

渲染对象

<ul>
    <li v-for="value in person">{{value}}------ Rose</li>
</ul>
<ul>
    <li v-for="(value,key) in person">{{key}}------ {{value}}</li>
</ul>

渲染数据

<ul>
    <li v-for="(item,index) in studentsList">
        <h3>第{{index+1}}个人的数据</h3>
        <ul>
            <li v-for="(val,key) in item">{{key}}----{{val}}</li>
        </ul>
    </li>
</ul>

数组和对象的更新检测

当数组或对象的数据更新，视图却没有触发重新渲染时，可用以下两种方法
Vue.set()
vm.set

methods: {
    changeData() {
        // ====================================数组更新检测

        this.list.push(5)  //可以触发视图更新
        this.list[3] = 5 //不可以触发视图更新

        // 三个参数： 数组，索引，新值
        Vue.set(this.list,3,5)  //可以触发视图更新
        this.$set(this.list,3,5)  //可以触发视图更新


        // =====================================对象的更新检测

        this.person.name = "小李"; //可以触发视图更新
        this.person.sex = "男"; // 不可以触发视图更新

        // 三个参数：对象，属性，新值
        Vue.set(this.person,"sex","男")  //可以触发视图更新
        this.$set(this.list,3,5)  //可以触发视图更新

    }
}

9. v-model

双向数据绑定，只用于表单元素，数据改变，元素的值也自动发生改变，元素的值改变，数据也随之变化

<p>用户名: <input type="text" @keyup="addUser" v-model="user"></p>
<p>用户名: <input type="text" @keyup.enter.38="addUser" v-model="user"></p>
<p>{{user}}</p>

var vm = new Vue({
        data: {
            user: 'hello'
        },
        methods: {
            addUser(){
                console.log(this.user);
            }
        }
    });

v-model中的user,必须是在data中注册过的数据