2.1、模版语法
2.1.1、插值语法
1、代码示例
<body><!-- 准备容器 --><div id="app"><!-- 在data中声明的 --><!--1、 data中声明的变量 --><h1>{{msg}}</h1><h1>{{sayHello()}}</h1><!-- 不在data中的变量不可以 --><!-- <h1>{{i}}</h1> --><!-- <h1>{{sum()}}</h1> --><!-- 2、常量 --><h1>{{100}}</h1><h1>{{'hello vue!'}}</h1><h1>{{3.14}}</h1><!--3、 javascript表达式 --><h1>{{1 + 1}}</h1><h1>{{msg + 1}}</h1><h1>{{'msg' + 1}}</h1><h1>{{gender ? '男' : '女'}}</h1><h1>{{number + 1}}</h1><h1>{{msg.split('').reverse().join('')}}</h1><!-- 错误的：不是表达式，这是语句。 --><!-- <h1>{{var i = 100}}</h1> --><!-- 4、在白名单里面的 --><h1>{{Date}}</h1><h1>{{Date.now()}}</h1><h1>{{Math}}</h1><h1>{{Math.ceil(3.14)}}</h1></div><!-- vue程序 --><script>// 用户自定义的一个全局变量var i = 100;// 用户自定义的一个全局函数function sum() {console.log("sum.....");}new Vue({el: "#app",data: {number: 1,gender: true,msg: "abcdef", // msg是在data中声明的变量sayHello: function () {console.log("hello vue!");},},});</script></body>2、代码总结
{{可以写什么}}
- data中声明的变量，函数，数组，等都可以
- 常量
- 只要是合法的javascript表达式都可以，注意js语句不行，赋值语句，if，for等
- 模版表达式都被放在沙盒中，只能访问全局变量的一个白名单，如：Math和Date
'Infinity,undefined,NaN,isFinite,isNaN,'
'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,'
'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,'
'require'
2.1.2、指令语法
1. 什么是指令？有什么作用？
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
2. Vue框架中的所有指令的名字都以“v-”开始。
3. 插值是写在标签体当中的，那么指令写在哪里呢？
Vue框架中所有的指令都是以HTML标签的属性形式存在的，
例如：<span 指令是写在这里的>{{这里是插值语法的位置}}</span>
注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的。是需要先让Vue框架进行编译的，编译之后的内容浏览器是可以看懂的。
4. 指令的语法规则：
完整的语法格式：
<HTML标签 v-指令名:参数="javascript表达式"></HTML标签>
javascript表达式：
之前在插值语法中{{这里可以写什么}}，那么指令中的表达式就可以写什么，当然{{}}不需要写
不是所有的指令都有参数和表达式：
有的指令，不需要参数，也不需要表达式，例如：v-once
有的指令，不需要参数，但是需要表达式，例如：v-if="表达式"
有的指令，既需要参数，又需要表达式，例如：v-bind:参数="表达式"
5. v-once 指令
作用：只渲染元素一次。随后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
6. v-if="表达式" 指令
作用：表达式的执行结果需要是一个布尔类型的数据：true或者false
true：这个指令所在的标签，会被渲染到浏览器当中。
false：这个指令所在的标签，不会被渲染到浏览器当中。
<body><!-- 准备一个容器 --><div id="app"><h1>{{msg}}</h1><!-- 只会渲染一次，msg更改数据，也不会再次渲染 --><h1 v-once>{{msg}}</h1><h1 v-if="a > b">v-if测试：你看我出不出现</h1></div><!-- vue程序 --><script>new Vue({el: "#app",data: {msg: "Hello Vue!",a: 10,b: 11,},});</script></body>2.1.3、v-bind指令详解
1. 这个指令是干啥的？
它可以让HTML标签的某个属性的值产生动态的效果。
2. v-bind指令的语法格式：
<HTML标签 v-bind:参数="表达式"></HTML标签>
3. v-bind指令的编译原理？
编译前：
<HTML标签 v-bind:参数="表达式"></HTML标签>
编译后：
<HTML标签 参数="表达式的执行结果"></HTML标签>
注意两项：
第一：在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名”
第二：表达式会关联data，当data发生改变之后，表达式的执行结果就会发生变化。所以，连带的就会产生动态效果。
4. v-bind因为很常用，所以Vue框架对该指令提供了一种简写方式：
只是针对v-bind提供了以下简写方式：
<img :src="imgPath">
5. 什么时候使用插值语法？什么时候使用指令？
凡是标签体当中的内容要想动态，需要使用插值语法。
只要向让HTML标签的属性动态，需要使用指令语法。
<body><!-- 准备一个容器 --><div id="app"><!-- 注意：以下代码中 msg 是变量名。 --><!-- 注意：原则上v-bind指令后面的这个参数名可以随便写。 --><!-- 虽然可以随便写，但大部分情况下，这个参数名还是需要写成该HTML标签支持的属性名。这样才会有意义。 --><span v-bind:xyz="msg"></span><!-- 这个表达式带有单引号，这个'msg'就不是变量了，是常量。 --><span v-bind:xyz="'msg'"></span><!-- v-bind实战 --><img src="../img/1.jpg" /> <br /><img v-bind:src="imgPath" /> <br /><!-- v-bind简写形式 --><img :src="imgPath" /> <br /><!-- 这是一个普通的文本框 --><input type="text" name="username" value="zhangsan" /> <br /><!-- 以下文本框可以让value这个数据变成动态的：这个就是典型的动态数据绑定。 --><input type="text" name="username" :value="username" /> <br /><!-- 使用v-bind也可以让超链接的地址动态 --><a href="https://www.baidu.com">百度1</a> <br /><a :href="url">百度2</a> <br /><!-- 不能采用以下写法，会报错--><!-- <a href="{{url}}">百度3</a> --></div><!-- vue程序 --><script>new Vue({el: "#app",data: {msg: "Hello Vue!",imgPath: "../img/1.jpg",username: "章三",url: "https://www.baidu.com",},});</script></body>2.1.4、 v-model详解
1. v-bind和v-model这两个指令都可以完成数据绑定。
2. v-bind是单向数据绑定。
data ===> 视图
3. v-model是双向数据绑定。
data <===> 视图
4. v-bind可以使用在任何HTML标签当中。
v-model只能使用在表单类元素上，例如：input标签、select标签、textarea标签。
为什么v-model的使用会有这个限制呢？
因为表单类的元素才能给用户提供交互输入的界面。v-model指令通常也是用在value属性上面的。
5. v-bind和v-model都有简写方式：
v-bind简写方式：
v-bind:参数="表达式" 简写为 :参数="表达式"
v-model简写方式：
v-model:value="表达式" 简写为 v-model="表达式"
<body><!-- 准备一个容器 --><div id="app"><!-- 完整写法 -->v-bind指令：<input type="text" v-bind:value="name1" /><br />v-model指令：<input type="text" v-model:value="name2" /><br /><!-- 报错了，v-model不能使用在这种元素上。 --><!-- <a v-model:href="url">百度</a> --><!-- 简写 -->v-bind指令：<input type="text" :value="name1" /><br />v-model指令：<input type="text" v-model="name2" /><br /><!-- 联动改变 -->v-bind消息1：<input type="text" :value="msg" /><br />v-model消息2：<input type="text" v-model="msg" /><br /></div><!-- vue程序 --><script>new Vue({el: "#app",data: {name1: "zhangsan",name2: "wangwu",url: "https://www.baidu.com",msg: "Hello Vue!",},});</script></body>2.15、用户片段
安装插件：JavaScript (ES6) code snippets
为JavaScript、TypeScript、HTML、React和Vue提供了ES6的语法支持。
第一步：
第二步：
第三步：配置片段
html.json中设置html环境下的代码片段
// 配置信息
"Print to console": {// 给片段设置的简写"prefix": "log",// 配置片段"body": [// ,分割开每行代码 $1 鼠标聚焦的地方 "console.log('$1');","$2"],// 片段描述信息（可删除）"description": "Log output to console"
}具体配置如下：
{"h5 template": {"prefix": "vv", // 对应的是使用这个模板的快捷键"body": ["<!DOCTYPE html>","<html lang=\"en\">","<head>","\t<meta charset=\"UTF-8\">","\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">","\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">","\t<title>Document</title>","\t<script src='https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js'></script>","</head>\n","<body>","\t<div id =\"root\"> </div>\n","\t<script>","\tVue.config.productionTip = false//阻止vue 在启动时生成生产提示","\t var vm = new Vue({","\t\tel: '#root',","\t\tdata() {return{}},","\t\tmethods: {}","\t });","\t</script>","</body>\n","</html>"],"description": "vue学习模版" // 模板的描述}
}在javascript.json 中配置js的片段
// 配置信息"create vue instance": {// 给片段设置的简写"prefix": "v1",// 配置片段"body": ["\t var vm = new Vue({","\t\tel: '#root',","\t\tdata: {'$1'},","\t });",],// 片段描述信息（可删除）"description": "vm"},