Vue 模板语法

最新推荐文章于 2023-03-30 16:59:52 发布

津门老九

最新推荐文章于 2023-03-30 16:59:52 发布

阅读量189

点赞数

本文链接：https://blog.csdn.net/u010723080/article/details/105319190

版权

Vue 基本使用

<body>
    <div id="app">
        {{msg}}
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hello wold"
            }
        });
    </script>
</body>

el 属性用于指定将 Vue 关联到页面的哪个标签，属性值是 CSS 选择器。data 属性用于提供数据模型。插值表达式（语法：{{}}）用于将 data 中的数据填充到页面上，浏览器无法识别 Vue 代码，Vue 会将页面代码编译成原生 JavaScript 代码。

在插值表达式中也支持基本的 JavaScript 表达式计算。

<div id="app">
    {{msg + '123'}}
</div>

v-cloak 指令

浏览器在加载 Html 页面时，是从上往下加载，当加载到插值表达式时 Vue 还未被加载。因此页面中会先显示插值表达式的原始面貌，当浏览器加载完 Vue 时插值表达式才会起到填充数据的作用。这样页面会出现闪烁的问题。v-cloak 指令能够解决这一问题。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hello wold"
            }
        });
    </script>
</body>

首先将包含插值表达式的标签添加 v-cloak 属性，然后通过 CSS 属性选择器将带有 v-cloak 属性的标签全部隐藏。当 Vue 被浏览器加载后，Vue 会将带有 v-cloak 属性的标签显示。

数据绑定指令

<body>
    <div id="app">
        <div v-text="text"></div>
        <div v-html="html"></div>
        <div v-pre>{{msg}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                text: "hello wold",
                html: "<div>hello wold</div>",
                msg: "hello wold"
            }
        });
    </script>
</body>

v-text 指令用于将普通文本内容填充到标签中，v-html 指令用于将 Html 代码片段填充到标签中。v-pre 标签能够使其所作用的标签跳过 Vue 的编译，使标签中的原始内容显示在页面上。

v-once 指令

插值表达式、v-text、v-html 指令都是用于数据绑定，当 data 中的数据模型发生改变，相应的标签中的内容也会发生改变，v-once 指令能够使插值表达式只进行一次数据绑定。

<body>
    <div id="app">
        <div v-once>{{msg}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'hello wold'
            }
        });
    </script>
</body>

v-model 指令

插值表达式、v-text、v-html 指令只能进行单项数据绑定，即 data 中的数据模型发生改变，标签中的内容也会随之改变，但当标签中的内容发生改变，data 中的数据模型不会改变。v-model 指令能够进行双向数据绑定，即当 data 中的数据模型发生改变标签中的内容会随之变化，相反标签中的内容发生改变，data 中的数据模型也会随之变化。v-model 指令只能在、、标签和 components（组件）中使用。

<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
        <div>
            <input type="text" v-model="msg"/>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'hello wold'
            }
        });
    </script>
</body>

v-on 指令事件绑定

通过 v-on 指令给 button 标签添加点击事件，将 data 中的 num 值加一。

<body>
    <div id="app">
        <div v-cloak>{{num}}</div>
        <div>
            <button v-on:click="num++">按键</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                num: 0
            }
        });
    </script>
</body>

v-on 指令的简写形式

<button @click="num++">按键</button>

Vue 中的 methods 属性可以定义函数，v-on 指令可以通过函数名将事件与函数进行绑定。在 methods 属性定义的方法中 this 指向 Vue。

<body>
    <div id="app">
        <div v-cloak>{{num}}</div>
        <div>
            <button @click="fun">按键</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
                fun: function () {
                    this.num++;
                }
            }
        });
    </script>
</body>

也可以通过函数调用的形式将事件与函数绑定。

<button @click="fun()">按键</button>
...

通过 v-on 指令将事件与函数进行绑定可以给函数传递参数，如果有多个参数用逗号隔开。不仅可以传递普通参数还可以传递事件对象，但是事件对象的名称必须是 $event。如果事件通过函数名称绑定函数，默认函数的第一个参数就是事件对象，如果传递多个参数，事件对象必须放在最后。

传递一个参数

<body>
    <div id="app">
        <div>
            <button @click="fun('123')">按键</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                fun: function (p) {
                    console.log(p);
                }
            }
        });
    </script>
</body>

传递多个参数

<button @click="fun('123','456')">按键</button>
...
fun: function (p1,p2) {
    console.log(p1);
    console.log(p2);
}

传递事件对象

<button @click="fun('123','456',$event)">按键</button>
...
fun: function (p1,p2,event) {
    console.log(p1);
    console.log(p2);
    console.log(event.target.innerHTML);
}

事件通过函数名绑定函数

<button @click="fun">按键</button>
...
fun: function (event) {
	console.log(event.target.innerHTML);
}

事件修饰符

stop 修饰符组织事件冒泡

<body>
    <div id="app">
        <div @click="fun1()">
            <button @click.stop="fun2()">按键</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                fun1: function () {
                    console.log("fun1 执行了");
                },
                fun2: function () {
                    console.log("fun2 执行了");
                }
            }
        });
    </script>
</body>

prevent 修饰符阻止事件默认行为

<body>
    <div id="app">
        <a href="http://www.baidu.com" @click.prevent="fun()">百度</a>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                fun: function () {
                    console.log("fun1 执行了");
                }
            }
        });
    </script>
</body>

按键修饰符

添加了按键修饰符的标签能够响应按下指定按键事件，并执行对应函数。Vue 内置了多种按键修饰符，如 enter 、delete 等按键修饰符。

enter 按键修饰符的使用

<body>
    <div id="app">
        <input v-on:keyup.enter="fun()"/>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            methods: {
                fun: function () {
                    console.log("fun 执行了");
                }
            }
        });
    </script>
</body>

delete 按键修饰符的使用

<input v-on:keyup.delete="fun()"/>
...

自定义按键修饰符

Vue 内置的按键修饰符数量是有限的，并没有给所有的按键都定义按键修饰符。但是 Vue 提供了自定义按键修饰符的机制。每一个按键都有唯一的 KeyCode 值，通过 KeyCode 值能够给每一个按键定义按键修饰符。语法如下：

Vue.config.keyCodes.按键修饰符名称 = 按键 KeyCode;

键盘 A 按键的 KeyCode 值是 65，给 A 按键定义一个按键修饰符，按键修饰符的名称是 a。

<body>
    <div id="app">
        <input v-on:keyup.a="fun()"/>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        Vue.config.keyCodes.a = 65;
        var vm = new Vue({
            el: "#app",
            methods: {
                fun: function () {
                    console.log("fun 指定了");
                }
            }
        });
    </script>
</body>

v-bind 指令

v-bind 指令将标签的属性值与 data 中的数据模型进行绑定。当 data 中的数据模型发生改变标签的属性值也会随之改变。

<body>
    <div id="app">
        <a v-bind:href="url">百度</a>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                url: 'http://www.baidu.com'
            }
        });
    </script>
</body>

v-bind 指令简写形式

<a :href="url">百度</a>
...

v-bind 指令将标签的 class 属性与一个对象绑定，该对象的属性名是 CSS 的 class 选择器，属性值是 data 中的布尔类型数据模型。通过布尔值来控制 class 选择器是否作用于标签。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .style1 {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .style2 {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="{style1: showStyle1,style2: showStyle2}"></div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                showStyle1:true,
                showStyle2:true
            }
        });
    </script>
</body>

v-bind 指令将标签的 class 属性与一个数组绑定，该数组中的元素是 data 中的数据模型，数据模型的值是 CSS 的 class 选择器。通过数组中的元素来控制哪些 class 选择器作用于标签。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .stype1 {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .stype2 {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="[style1Name,style2Name]"></div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                style1Name: "stype1",
                style2Name: "stype2"
            }
        });
    </script>
</body>

v-bind 指令将标签的 class 属性与一个数组绑定，数组中包含对象元素。数组中的非对象元素是 data 中的数据模型，值是 CSS 的 class 选择器。对象元素的属性名是 CSS 的 class 选择器，属性值是 data 中的布尔类型数据模型。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .style1 {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .style2 {
            background-color: orange;
        }
        .style3 {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="[style1Name, style2Name, {style3: showStyle3}]">Hello World</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                style1Name: "style1",
                style2Name: "style2",
                showStyle3: false
            }
        });
    </script>
</body>

v-bind 指令将标签的 class 属性与 data 中的数据模型进行绑定，数据模型是一个数组，数组中的元素是 CSS 的 class 选择器。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .style1 {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .style2 {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="arrClass"></div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                arrClass: ["style1", "style2"]
            }
        });
    </script>
</body>

v-bind 指令将标签的 class 属性与 data 中的数据模型进行绑定，数据模型是一个对象，对象的属性名是 CSS 的 class 选择器，属性是布尔值。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .style1 {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .style2 {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="objClass"></div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                objClass: {
                    style1: true,
                    style2: true
                }
            }
        });
    </script>
</body>

分支指令

<body>
    <div id="app">
        <div v-if="score>=90">优秀</div>
        <div v-else-if="score<90&&score>=80">良好</div>
        <div v-else-if="score<80&&score>60">及格</div>
        <div v-else>差</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                score: 100
            }
        });
    </script>
</body>

score 小于等于 60 显示差，score 大于 60 小于 80 显示及格，score 大于等于 80 小于 90 显示良好，score 大于等于 90 显示优秀。

v-show 指令

<body>
    <div id="app">
        <div v-show="flag">Hello World!</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag: false
            }
        });
    </script>
</body>

v-show 指令将标签与 data 中布尔类型数据模型绑定，当数据模型为 true 显示标签，当数据模型为 false 时不显示标签。

v-for 指令

<body>
    <div id="app">
        <ul>
            <li v-for="item in fruits">{{item}}</li>
        </ul>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                fruits: ["apple", "orange", "banana"]
            }
        });
    </script>
</body>

<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in fruits">{{item + '-----' + index}}</li>
        </ul>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                fruits: ["apple", "orange", "banana"]
            }
        });
    </script>
</body>

v-for 指令遍历 data 中数组数据模型，fruits 是 data 中的数组数据模型，item 是数组中的元素。index 是元素的在数组中的索引。

<body>
    <div id="app">
        <ul>
            <li v-for="item in fruits">{{item.ename + '-----' + item.cname}}</li>
        </ul>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                fruits: [{
                    ename: "apple",
                    cname: "苹果"
                    }, {
                    ename: "orange",
                    cname: "橘子"
                    }, {
                    ename: "banana",
                    cname: "香蕉"
                }]
            }
        });
    </script>
</body>

v-for 指令遍历 data 中的数组数据模型，数组中的元素是对象，也可以通过 item 获取对象中的属性值。

<body>
    <div id="app">
        <div v-for="(item,key,index) in obj">{{item + "---" + key + "---" + index}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                obj: {
                    username: "xiaoming",
                    age: 18,
                    sex: "boy"
                }
            }
        });
    </script>
</body>

v-for 指令遍历 data 中的对象数据模型，item 是对象的属性值，key 是对象的属性名，index 是属性在对象中的索引。

<body>
    <div id="app">
        <div v-if = "item == 18" v-for="(item,key,index) in obj">{{item + "---" + key + "---" + index}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                obj: {
                    username: "xiaoming",
                    age: 18,
                    sex: "boy"
                }
            }
        });
    </script>
</body>

v-if 和 v-for 指令结合使用，遍历对象时，只有满足 v-if 指令的条件，才会显示标签。

<body>
    <div id="app">
        <ul>
            <li :key="item.id" v-for="item in fruits">{{item.ename + '-----' + item.cname}}</li>
        </ul>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                fruits: [{
                    id: 1,
                    ename: "apple",
                    cname: "苹果"
                    }, {
                    id: 2,
                    ename: "orange",
                    cname: "橘子"
                    }, {
                    id: 3,
                    ename: "banana",
                    cname: "香蕉"
                }]
            }
        });
    </script>

v-for 指令遍历 data 中的数据模型时，使用 :key 指令给标签提供唯一标识，从而提高 Vue 加载标签的性能。

津门老九

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 模板语法

Vue 基本使用<body> <div id="app"> {{msg}} </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ ...
复制链接

扫一扫