Vue模板语法

模板语法

1.vue中的元素使用mustache模板引擎进行解析

2.指令

• v-for：循环渲染元素

        <h1>系统名称：{{title}}</h1>
        <ul>
            <li v-for="(item,i) in products">
                名称：{{item.name}}

                <button @click="changeStock(item,item.stock - 1)">-</button>
                <span v-if="item.stock > 0">{{item.stock}}</span>
                <span v-else>无货</span>
                <button @click="changeStock(item,item.stock + 1)">+</button>
                <button @click="remove(i)">delete</button>
            </li>
        </ul>
    </div>
    <script>
        //vue对象 
        var v1 = new Vue({//配置
            el:"#a1" ,//css选择器
            data: { //和界面相关的数据
                title:"库存管理系统",
                products: [
                    {name:"iphone",stock:10},
                    {name:"xiaomi",stock:10},
                    {name:"HuaWei",stock:10},
                    {name:"oppo",stock:10},
                ],
            },
            methods: {
                remove(i) {
                    this.products.splice(i,1);
                },
                changeStock(product,newStock) {
                    if(newStock < 0) {
                        newStock = 0;
                    }
                    product.stock = newStock;
                }
            },
        });
    </script>

• v-html：设置元素的innerHtml，该指令会导致元素的模板的内容失效

    <div id="a1" v-html="html">
    </div>
    <script>
        //vue对象 
        var v1 = new Vue({//配置
            el:"#a1" ,//css选择器
            data: { //和界面相关的数据
                html:`<p style = "color:red">Lorem<p>`,
            },
        });
    </script>

• v-on：注册事件：该指令由于非常常用，因此提供简写@；事件支持一些指令修饰符，如prevent(阻止)；事件参数会自动传递

    <div id="a1">
        <button @click = "test()">clickMe</button>
    </div>
    <script>
        //vue对象 
        var v1 = new Vue({//配置
            el:"#a1" ,//css选择器
            methods: { 
                test() {
                    console.log("Welcome to Vue !");
                }
            },
        });
    </script>

    <div id="a1">
        <!--prevent属性阻止访问-->
        <a href="http://www.baidu.com" @click.prevent = "test()">clickMe</a>
    </div>
    <script>
        //vue对象 
        var v1 = new Vue({//配置
            el:"#a1" ,//css选择器
            methods: { 
                test() {
                    console.log("Welcome to Vue !");
                }
            },
        });
    </script>

    <div id="a1">
        <a href="http://www.baidu.com" @click.prevent = "test()">clickMe</a>
        <div @click="test2">
            <button @click.stop="test1">clickMe</button>
        </div>
    </div>
    <script>
        //vue对象 
        var v1 = new Vue({//配置
            el:"#a1" ,//css选择器
            methods: { 
                test() {
                    console.log("Welcome to Vue !");
                },
                test1() {
                    console.log("button:click");
                },
                test2() {
                    console.log("div:click");
                },
            },
        });
    </script>

• v-bind：绑定动态属性：简写

    <div id="a1">
        <img v-bind:src="imgUrl" alt="">
        <!--简写-->
        <img :src="imgUrl" alt="">
    </div>
    <script>
        //vue对象 
        var v1 = new Vue({//配置
            el:"#a1" ,//css选择器
            data: {
                imgUrl:
                "图片路径"
            }
        });
    </script>

• v-show：控制元素可见度

    <div id="a1">
        <img v-show="isShow":src="imgUrl" alt="">
        <button @click="isShow = !isShow">切换显示</button>
    </div>
    <script>
        //vue对象 
        var v1 = new Vue({//配置
            el:"#a1" ,//css选择器
            data: {
                isShow:true,
                imgUrl:
                "文件地址"
            }
        });
    </script>

• v-if，v-else-if，v-else：控制元素生成

• v-model：双向数据绑定，常用于表单元素，该指令是v-on和v-bind的复合版

    <div id="a1">
        <h1>{{text}}</h1>
        <input type="text" :value="text" @input="text=$event.target.value">
        <input type="text" v-model="text">
    </div>
    <script>
        //vue对象 
        var v1 = new Vue({//配置
            el:"#a1" ,//css选择器
            data: {
                text:"cyl",
            }
        });
    </script>

• v-slot
• v-text
• v-pre
• v-cloak
• v-once
• 自定义指令

3.特殊属性

• 最重要的特殊属性：key
• 该属性可以干预diff算法，在同一层级，key值相同的节点会进行比对，key值不同的节点则不会。

    <div id="a1">
        <div v-if="loginType === 'mobileNum'">
            <label>phoneNum:</label>
            <input type="text" key="1">
        </div>
        <div v-else>
            <label>mailBox:</label>
            <input type="text" key="2">
        </div>
        <div>
            <button @click="loginType = loginType === 'mobileNum'?'email':'mobileNum'">
                切换登录方式</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#a1",
            data: {
                loginType: "mobileNum",
            },
        });
    </script>

4.模板引擎

将模板字符串进行编译解析为完整的字符串

5.计算属性

    <div id="a1">
        <p>姓:{{firstName}}</p>
        <p>名:{{lastName}}</p>
        <p>全名:{{fullName}}</p>
    </div>
    <script>
        //vue对象 
        var v1 = new Vue({//配置
            el:"#a1" ,//css选择器
            data: {
                firstName: "c",
                lastName: "yl",
            },
            computed: {
                fullName() {
                    return this.firstName + this.lastName;
                }
            },
        });
    </script>

计算属性与方法有何区别？

• 计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算计算属性大大提升了效率
• 计算属性可以赋值，而方法不行
• 凡是根据已有数据计算得到的新数据的无参函数，都应尽量写成计算属性，而不是方法