1.v-bind

可简写为"："

你看到的 v-bind 等被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。

我们可以使用 v-bind 来绑定元素特性!

在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

注：使用 v-* 属性绑定数据是不需要 {} 包裹的

 <!DOCTYPE html>

 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="vue">

     <span v-bind:title="message">

         鼠标悬停几秒钟查看此处动态绑定的提示信息！

     </span>

 </div>

 <!--导入Vue.js-->

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

 <script type="text/javascript">

     let vm = new Vue({

         el: '#vue',   //绑定元素的 ID

         data: {       //数据对象中有一个名为 message 的属性，并设置了初始值

             message: 'Hello Vue!'

         }

     });

 </script>

 </body>

 </html>

2.v-if，v-else

条件判断语句

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="vue">

     <h1 v-if="ok">YES</h1>

     <h1 v-else>NO</h1>

 </div>

 <!--导入Vue.js-->

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

 <script type="text/javascript">

     let vm = new Vue({

         el: '#vue',   //绑定元素的 ID

         data: {       //数据对象中有一个名为 message 的属性，并设置了初始值

             ok: true

         }

     });

 </script>

 </body>

 </html>

3.v-else-if

v-if
v-else-if
v-else

注： === 三个等号在 JS 中表示绝对等于（就是数据与类型都要相等）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="vue">

     <h1 v-if="type === 'A'">A</h1>

     <h1 v-else-if="type === 'B'">B</h1>

     <h1 v-else-if="type === 'C'">C</h1>

     <h1 v-else>who</h1>

 </div>

 <!--导入Vue.js-->

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

 <script type="text/javascript">

     let vm = new Vue({

         el: '#vue',   //绑定元素的 ID

         data: {       //数据对象中有一个名为 message 的属性，并设置了初始值

             // ok: true

             type: 'A'

         }

     });

 </script>

 </body>

 </html>

4.v-for

循环数据

格式说明：

 <div id="vue">

     <li v-for="(item, index) in items">

         {{item.message}}{{index}}

     </li>

 </div>

　　注： items 是数组， item 是数组元素迭代的别名， index 是数组元素迭代的索引。我们之后学习的Thymeleaf模板引擎的语法和这个十分的相似！

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--view层模块-->

 <div id="vue">

     <li v-for="(item, index) in items">

         {{item.message}}{{index}}

     </li>

 </div>

 <!--导入Vue.js-->

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

 <script type="text/javascript">

     let vm = new Vue({

         el: '#vue',   //绑定元素的 ID

         data: {       //数据对象中有一个名为 message 的属性，并设置了初始值

             // ok: true

             // type: 'A'

             items: [

                 {message:"编号为1，索引为"},

                 {message:"编号为2，索引为"},

                 {message:"编号为3，索引为"}

             ]

         }

     });

 </script>

 </body>

 </html>

　　测试：在控制台输入 vm.items.push({message:"编号为4，索引为"}) ，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条编号为4，索引为3 .

5.v-on

可简写为“@”

事件监听

语法： v-on:需要监听的事件=”函数“

 <!DOCTYPE html>

 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--view层模块-->

 <div id="vue">

     <button v-on:click="sayHi">按钮</button>

 </div>

 <!--导入Vue.js-->

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

 <script type="text/javascript">

     let vm = new Vue({

         el: '#vue',   //绑定元素的 ID

         data: {       //数据对象中有一个名为 message 的属性，并设置了初始值

            message: "第一个Vue项目"

         },

         methods: {    // 方法必须定义在Vue的Methods对象中，v-on:事件

             sayHi: function (event) {

                 alert(this.message);

             }

         }

     });

 </script>

 </body>

 </html>

6.Vue常用的7个属性，8个方法以及7个指令（787原则）

巴特西

3.Vue的基本语法

1.v-bind

2.v-if，v-else

3.v-else-if

4.v-for

5.v-on

6.Vue常用的7个属性，8个方法以及7个指令（787原则）

7.Vue其他属性，方法以及指令

最新文章

热门文章