vue模板语法是什么？

在项目中，可以看到很多.vue结尾的文件，它们是什么呢？

1）vue文件是单文件组件

后缀名是.vue
webpack会使用额外的loader来处理它

一个.vue文件就是一个组件（页面）
整个项目（页面）就是由多个组件构成的

2）基本组成

由三个部分组成：template + script + style

template : 决定模块。类似于.html
script：代码逻辑。类似于.js
style: 样式

<template><div class="box">我是html模板</div>
</template><script>// 我是js逻辑export default {data() {return {// 定义变量，数据}}}
</script><style>/* 我是css样式 */.box {color:red}
</style>

提示：vscode中使用开发使用插件

小结：

.vue 是单文件组件
一个页面由多个组件构成的
有三个内容

template (必要的) 结构
- script：交互
- style：样式

vue基础-1：插值表达式

vue有一个最基本的功能：数据渲染。将数据（变量，或者利用ajax从后端获取到的数据）展示到页面上。这里它不会直接操作dom，而是有自己的语法。

在vue中{{ }}语法，叫做：插值表达式，大白话就是输出{{ }}中的表达式的值的语法。

把{{ }} 理解为一个占位符（一个坑）， {{ msg }} 就是把msg显示在这个占位符中（把msg插到坑里面边去）。

注意：

{{ }} 可以：

写data数据字段名称
对data数据字段进行表达式运算
- 拼接
- 算术运算
- 三元运算
- 一句话：能console.log()的都能写在里面

{{}}不能：

js语句：声明变量，分支，循环
访问在vue实例中的data之外定义的自定义的变量

3）vue中的指令

{ }}可以用来把数据显示在视图上，但它的功能还是相当有限的。例如，如果是一个列表数据（数组）希望使用循环来显示，它就做不到了。所以我们需要继续学习vue的指令系统。

指令

vue提供了指令（directive）功能，这些指令都是以v-开头(例如：v-for )，它们从形式上来看是标签的自定义属性（只不过是由vue提供的）

vue基础-2：v-bind

作用

v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）。

格式

bind：绑定。以前学习过，用它来改变this的指向

一般在是在属性名的=里面写一个data中的数据项， :属性名="数据项" 称之为：把x绑定在y属性上。

v-bind指令有简写用法 : 冒号，例如：

vue基础-3：v-for

目标

学习v-for的用法

功能

列表渲染, 所在标签结构, 按照数据数量, 循环生成

语法

<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>

索引可以省略
目标结构可以是：数组 / 对象 / 数字

特点：

v-for的功能是对标签进行循环生成
快速把数据赋予到相同的dom结构上循环生成

vue基础-4：v-text/v-html

语法:

v-text="vue数据变量"
v-html="vue数据变量"

特点：

v-text把值当成普通字符串显示, v-text ===> innerText

v-html把值当做html解析,v-html ===> innerHTML

vue基础-5：v-if/v-show

作用

控制标签的可见与不可见

语法

<标签 v-show="vue变量" />
<标签 v-if="vue变量" />

如果vue变量的值为true，就可见，否则就不可见。

原理

v-show 用的display:none隐藏 (频繁切换使用)
v-if 直接从DOM树上添加或移除

特点：

v-show 性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show。

注意无论变量是否为true还是false,它一定会创建元素的。
v-if 会动态创建和删除元素。
在频繁的切换可见与不可见时，它的效率会低一点
如果变量的值为false,它将不会创建元素

特殊的适用v-if的场景：如果是登陆用户就显示头像 <img src="xxx" v-if="isLogin">

vue基础-6：v-if,v-else-if,else

功能

模板中的选择结构

格式

与js中的if选择结构是一致的。

<标签 v-if="条件">        </标签>
<标签 v-else-if="条件">   </标签>
<标签 v-else-if="条件">   </标签>
<标签 v-else>             </标签>

vue基础-7：v-on

作用

给标签绑定事件

语法

<标签 v-on:事件名="要执行的少量代码" >
<标签 v-on:事件名="methods中的函数" >
<标签 v-on:事件名="methods中的函数(实参)">

注意

v-on可以简写成 @。即 @事件名="methods中的函数"
事件名可以是任意合法的dom事件
无传参, 通过形参直接接收
传参, 通过$event指代事件对象传给事件处理函数

<template><div><!-- 1. <标签 v-on:事件名="要执行的少量代码" >2. <标签 v-on:事件名="methods中的函数" >3. <标签 v-on:事件名="methods中的函数(实参)">--><h2>v-on</h2><p>num:{{num}}</p><button v-on:click='num=2'>执行少量的代码</button><br><button @mouseenter='fn'>执行methods中的函数</button><br><button v-on:click='fn2(100)'>执行methods中的函数,传入实参</button><br><button v-on:click='fn3()'>this指向</button><!-- 1. v-on可以简写成 @。 即  @事件名="methods中的函数"2. 事件名可以是任意合法的dom事件--></div></template><script>
export default {data(){return{num:1,age:18}},//vue配置项//定义函数//this指向当前的组件methods:{fn:function(){console.log('fn')},fn2(n){this.num=this.num+nconsole.log(this)},fn3(){console.log(this,this.age)this.fn()}}
}
</script><style></style>

vue基础-8：v-methods（this）

作用

它是一个对象，在这个对象中定义函数

使用场景

与v-on配合使用
在methods内部访问数据。this.xxx
在methods内部调用其他的methods

vue指令-9：v-on修饰符

一.事件修饰符

语法:

<标签 @事件名.修饰符="methods里函数" />

.stop - 阻止事件冒泡
.prevent - 阻止默认行为
.once - 程序运行期间, 只触发一次事件处理函数

vue指令-10：v-on按键修饰符

目标: 给键盘事件, 添加修饰符, 增强能力

语法:

@keyup.enter - 监测回车按键
@keyup.esc - 监测返回按键

vue指令-11：v-model双向绑定（表单绑定）

目标: 把value属性和vue数据变量, 双向绑定到一起

语法: v-model="data数据变量"
双向数据绑定

数据变化 -> 视图自动同步
视图变化 -> 数据自动同步

意点：v-model不能和value同时使用

输入和选择的绑定

总结: v-model适用于表单开发，自动获取用户输入或选择数据。

vue指令-12：v-model修饰符

目标: 让v-model拥有更强大的功能

语法:

v-model.修饰符="vue数据变量"
.number 以parseFloat转成数字类型
.lazy 在失去焦点时触发更改而非inupt时
.trim 去除首尾空白字符

<template><div><div><span>年龄:</span><input type="text" v-model.number="age"></div><div><span>人生格言:</span><input type="text" v-model.trim="motto"></div><div><span>自我介绍:</span><textarea v-model.lazy="intro"></textarea></div></div>
</template><script>
export default {data() {return {age: "",motto: "",intro: ""}}
}
</script>

总结: v-model修饰符, 可以对值进行预处理, 非常高效好用。