【Vue】二：Vue核心处理---模板语法-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue】二：Vue核心处理---模板语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.模板语法—插值

{{可以写什么}}
（1）在data中声明的变量，函数
（2）常量
（3）合法的javascript表达式
（4）模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math, Date

【Vue】二：Vue核心处理---模板语法
Vue中所有指令都是以HTML标签当中的属性存在的。

（1）指令的位置

<HTML标签 指令的位置>{{插值语法的位置}}</HTML标签>

<HTML标签 v-标签名:参数="表达式">{{xxx}}</HTML标签>

（2）指令的语法规则
v-标签名:参数=“表达式”
其中表达式，之前在插值语法中{{这里可以写什么}}，那么指令当中的表达式就可以写什么。

（3）注意
有的指令，不需要参数，也不需要表达式：v-once
有的指令，不需要参数，但是需要表达式：v-if=“表达式”
有的指令，即需要参数，又需要表达式：v-bind:参数=“表达式”

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

作用：可以让HTML标签的某个属性的值产生动态的效果。

语法格式：<HTML标签 v-bind:参数=“表达式”></HTML标签>

编译原理：
编译前<HTML标签 v-bind:参数=“表达式”></HTML标签>
编译后<HTML标签参数=“表达式执行的结果”></HTML标签>

注意：
编译的时候，参数名会被编译为HTML的属性名。
表达式会关联data。

简写：<HTML标签 :参数=“表达式”></HTML标签>

区别插值：
凡是标签体当中的内容想要改变，则使用插值语法，凡是标签中的属性想要改变，则使用指令语法

【Vue】二：Vue核心处理---模板语法

与v-bind的区别：
v-bind是单向绑定（数据–>视图）
v-model是双向绑定（数据<–>视图）

简写：<HTML标签 v-model:value="表达式"></HTML标签>
简写为：<HTML标签 v-model="表达式"></HTML标签>

语法格式：
<标签 v-on: 事件名="表达式">
表达式的内容
常量 JS表达式 Vue实例所管理的
事件关联回调函数
当所有事件所关联的回调函数，需要在Vue实例的配置项methods中定义。
methods是一个对象：{}，在这个methods对象中可以定义多个回调函数。
简写

v-on:click                 @click
v-on:keydown               @keydown
v-on:mouserover            @mouserover

【Vue】二：Vue核心处理---模板语法

【Vue】二：Vue核心处理---模板语法

【Vue】二：Vue核心处理---模板语法

上例中回调函数中的this指向的是Vue实例。
但是上例中的函数不能写成箭头函数，如果写成箭头函数，则this指向的是window。文章来源地址https://www.toymoban.com/news/detail-461800.html

到了这里，关于【Vue】二：Vue核心处理---模板语法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！