前言
系列文章目录：
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
1. Vue模板语法的分类
Vue模板语法主要分为两类：
- 插值语法
- 指令语法( v- 开头 )
2. 插值语法
2.1 引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <p>hello jack</p> </div> <script> new Vue( { el: '#app' } ) </script> </body> </html>
2.2 插值语法实现
想要实现对 hello 后面名字的动态控制，就需要使用 vue 提供的插值语法 ---- 插值表达式 – {{}}。
使用{{}}可以将对应的值渲染到元素的内容节点中。
语法:
{{xxx}}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <p>hello {{name}}</p> </div> <script> new Vue( { el: '#app', // 声明页面的数据 data: { name: 'marry' } } ) </script> </body> </html>
2.3 插值语法中书写js表达式
在vue提供的插值语法中，除了支持绑定简单的数据值外，还支持JavaScript表达式运算。
用法示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 字符串的拼接 --> <p>{{ tips + '1' }}</p> <!-- ok未定义undefined 为false --> <p>{{ ok ? '1' : '2' }}</p> <!-- 字符串的反转 --> <p>{{ tips.split('').reverse().join('') }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { tips: "请输入..." } }) </script> </body> </html>
3. Vue指令
3.1 指令的概念
指令是Vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
3.2 指令的分类
指令按照不同的用途可以分为如下6大类：
- 内容渲染指令
- 属性绑定指令
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
4. 内容渲染指令
插值语法是内容渲染指令中的一部分。
5. 指令语法
5.1 属性绑定指令
插值语法只能实现对标签的内容的渲染，如果要渲染标签的属性需要使用vue的指令语法----属性绑定指令。
5.1.1 引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <p>hello {{name}}</p> <a href="www.baidu.com">百度超链接</a> </div> <script> new Vue( { el: '#app', // 声明页面的数据 data: { name: 'marry' } } ) </script> </body> </html>
想要实现对 a 标签属性的动态控制，需要使用属性绑定指令。
5.1.2 属性绑定指令逐步尝试探索实现
那么属性绑定指令要怎么使用？将链接更换为变量名？
<body> <div id="app"> <p>hello {{name}}</p> <a href="link">百度超链接</a> </div> <script> new Vue( { el: '#app', // 声明页面的数据 data: { name: 'marry', link: 'www.baidu.com' } } ) </script> </body>
<body> <div id="app"> <p>hello {{name}}</p> <a href=link>百度超链接</a> </div> <script> new Vue( { el: '#app', // 声明页面的数据 data: { name: 'marry', link: 'www.baidu.com' } } ) </script> </body>
两种改法的结果一致，很明显直接将链接更换成变量名是行不通的。
使用插值语法？
<body> <div id="app"> <p>hello {{name}}</p> <a href={{link}}>百度超链接</a> </div> <script> new Vue( { el: '#app', // 声明页面的数据 data: { name: 'marry', link: 'www.baidu.com' } } ) </script>
正确的使用：
<body> <div id="app"> <p>hello {{name}}</p> <!-- 完整写法: <a v-bind:href="link"> --> <!-- v-bind: 可以简写为 ‘:’ --> <a :href="link">百度超链接</a> </div> <script> new Vue( { el: '#app', // 声明页面的数据 data: { name: 'marry', link: 'www.baidu.com' } } ) </script> </body>
使用
v-bind:属性绑定指令后，等号后面引号内的值会被认为js表达式执行
5.1.3 属性绑定指令中使用js表达式
在属性绑定中一样可以使用JavaScript表达式。
在使用属性绑定期间，绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <p :title=" 'tips' + 123 ">nihao</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { tips: "请输入..." } }) </script> </body> </html>
5.2 数据绑定
数据绑定分为：
- 单向数据绑定
- 双向数据绑定
5.2.1 单向数据绑定
单向数据绑定 ---- 使用 v-bind 指令
<body> <div id="app"> 单向数据绑定：<input type="text" v-bind:value="t" > </div> <script> new Vue( { el: '#app', // 声明页面的数据 data: { t: '' } } ) </script> </body>
在Vue开发者工具中修改t的值
在输入框中修改t的值
v-bind 为单向数据绑定，vue中的数据发生变化，页面中的数据会进行更新；但是页面中的数据发生变化，vue中的数据不会同步进行更新。
5.2.2 双向数据绑定
双向数据绑定使用 v-model
<body> <div id="app"> 单向数据绑定：<input type="text" v-bind:value="t" > <br> 双向数据绑定：<input type="text" v-model:value="t" > </div> <script> new Vue( { el: '#app', // 声明页面的数据 data: { t: '' } } ) </script> </body>
在Vue开发者工具中修改t的值
在“双向数据绑定”对应的输入框中修改t的值
v-model 为双向数据绑定，vue中的数据发生变化，页面中的数据会进行更新；页面中的数据发生变化，vue中的数据也会同步进行更新。单向数据绑定对应的输入框也会进行更新是由于 v-bind 指令。
注意：
v-model指令只能配合表单元素(输入类元素，元素要能够输入)一起使用。
v-model 默认监听的为value的值
v-model:value="t"可以简写为
v-model=“t”
<body> <div id="app"> <!-- v-bind:value="t" 简写为 :value="t" --> 单向数据绑定：<input type="text" v-bind:value="t" > <br> <!-- v-model:value 简写为 v-model --> 双向数据绑定：<input type="text" v-model="t" > </div> <script> new Vue( { el: '#app', // 声明页面的数据 data: { t: '' } } ) </script> </body>
5.2.3 双向数据绑定
之前的笔记：【Vue----双向绑定指令】
