简介
模板语法大家多少都有所接触&＃xff0c;例如百度模板引擎、ejs 等等
同样 Vue.js 也使用了基于 HTML 的模板语法&＃xff0c;允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据
所有 Vue.js 的模板都是合法的 HTML &＃xff0c;所以能被遵循规范的浏览器和 HTML 解析器解析&＃xff0c;通俗的讲 Vue 模板语法就是在使用 Vue.js 开发时&＃xff0c;你可以写在 HTML 元素上的操作语法&＃xff0c;让你开发更高效&＃xff0c;例如&＃xff1a;绑定样式&＃xff0c;循环出元素列表等
表达式
在前端的发展历程中&＃xff0c;为了提高开发效率&＃xff0c;诞生了很多模板引擎&＃xff0c;方便渲染元素或者绑定数据&＃xff0c;很多引擎模板都采用 {{双大括号表达式}} 的语法进行插值
同样 Vue.js 也借鉴了Angular.js 的双花括号的方式&＃xff0c;进行向页面输出数据和调用对象方法。让我们感受一下双大括号表达式.
DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><title>模板语法title><script src&＃61;"https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js">script>head><body><div id&＃61;"app"><p>name:<input type&＃61;"text" v-model&＃61;"name">p><p>webSite:<input type&＃61;"text" v-model&＃61;"webSite">p><p>name: {{ name }}p>webSite: <a :href&＃61;"webSite">{{ webSite }}a>div><script>new Vue({el: "#app",data: {name: "",webSite: ""}})script>body>
html>
双大括号中的 {{name}}和{{webSite}}&＃xff0c;绑定至底层 Vue 实例的数据&＃xff0c;在浏览器中就被渲染成实例 data 选项中的值。
插值
文本
通过使用 v-once 指令你也能执行一次性地插值&＃xff0c;当数据 改变时&＃xff0c;插值处的内容 不会更新。但是你需要注意一下&＃xff0c;该元素节点下面其他数据的绑定&＃xff0c;数据改变&＃xff0c;内容也不会更新
将
<p>name: {{ name }}p>
修改
<p v-once>name: {{ name }}p>
你可以发现此时数据并没有和加了v-once的标签进行动态绑定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VO7wp6NJ-1638169143370)(https://blog-img.uiuing.com/notes/images/202111291339938.png)]
HTML
此外, vue还支持对Html进行渲染, 添加指令v-html
DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><title>模板语法title><script src&＃61;"https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js">script>head><body><div id&＃61;"app"><p><input type&＃61;"text" v-model&＃61;"htmlData">p><p v-html&＃61;"htmlData">p>div><script>let vm &＃61; new Vue({el: "#app",data: {htmlData: "",}})script>body>
html>
特性
双大括号语法不能作用在 HTML 特性&＃xff08;标签属性&＃xff09;上&＃xff0c;需要对标签属性操作&＃xff0c;应该使用 v-bind 指令, 也可以缩写为:, 这仅限于 v-bind 指令
DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><title>模板语法title><script src&＃61;"https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js">script>head><body><div id&＃61;"app"><input type&＃61;"checkbox" :checked&＃61;"isChecked"/>div><script>let vm &＃61; new Vue({el: "#app",data: {isChecked: false}})script>body>
html>
你也可以试试:class, 它的语法比较特殊, 类似键值对, 布尔值的value决定了String类型的Key是否显示
DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><title>模板语法title><script src&＃61;"https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js">script><style>.MagnifyText {font-size: 32px;font-weight: bold;}style>head><body><div id&＃61;"app"><input type&＃61;"checkbox" :checked&＃61;"isChecked"/><span v-bind:class&＃61;"{&＃39;MagnifyText&＃39;: fontResult}">uiuspan><span :class&＃61;"{&＃39;MagnifyText&＃39;: !fontResult}">uiuspan>div><script>let vm &＃61; new Vue({el: "#app",data: {isChecked: false,nameStyle: "MagnifyWords",fontResult: true}})script>body>
html>
Javascript 表达式
对于所有的数据绑定&＃xff0c;Vue.js 都提供了完全的 Javascript 表达式支持
DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><title>模板语法title><script src&＃61;"https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js">script>head><body><div id&＃61;"app"><p>1 &＃43; 1 &＃61; {{ 1 &＃43; 1 }}p><p>{{ strReverse }} 反转&＃xff1a;{{ strReverse.split("").reverse().join("") }}p>div><script>let vm &＃61; new Vue({el: "#app",data: {strReverse: "abc"}})script>body>
html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lkK2m3xy-1638169143376)(https://blog-img.uiuing.com/notes/images/202111291432728.png)]
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。
参数
一些指令能够接收一个“参数”&＃xff0c;在指令名称之后以冒号表示。
v-bind 指令可以用于响应式地更新 HTML 特性
例如第一次出现的
<a :href&＃61;"webSite">{{ webSite }}a>
v-on 指令&＃xff0c;用于监听 DOM 事件
例如点击事件
DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><title>模板语法title><script src&＃61;"https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js">script>head><body><div id&＃61;"app"><h1>{{ strTest }}h1><button v-on:click&＃61;"strReverse">反转button>div><script>let vm &＃61; new Vue({el: "#app",data: {strTest: "abc"},methods: {strReverse: function () {this.strTest &＃61; this.strTest.split(&＃39;&＃39;).reverse().join(&＃39;&＃39;);}}})script>body>
html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s1wv2xpj-1638169143378)(https://blog-img.uiuing.com/notes/images/202111291443568.png)]
动态参数
上面属性或者事件我们都是写死的&＃xff0c;其实在 Vue 它也可以是动态的。
DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><title>模板语法title><script src&＃61;"https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js">script>head><body><div id&＃61;"app"><h1>{{ strTest }}h1><button v-on:[dp]&＃61;"strReverse">反转button>div><script>let vm &＃61; new Vue({el: "#app",data: {strTest: "abc",dp: "click"},methods: {strReverse: function () {this.strTest &＃61; this.strTest.split(&＃39;&＃39;).reverse().join(&＃39;&＃39;);}}})script>body>
html>
效果是一样的, 点击按钮时会触发事件回调
修饰符
修饰符是以半角句号 . 指明的特殊后缀&＃xff0c;用于指出一个指令应该以特殊方式绑定&＃xff0c;大致分为三类&＃xff1a;
例如&＃xff0c;事件修饰符中的.prevent修饰符和原生 event.preventDefault() 效果一样&＃xff0c;可以阻止事件默认行为&＃xff0c;在表单中点击提交按钮&＃xff0c;就会发生页面跳转&＃xff0c;但是使用了 .prevent 就不会发生跳转
指令缩写
v-bind
前面有提到过 v-bind ,可以直接简写为:
<a :href&＃61;"https://uiuing.com">bloga>
其他属性也可以简写
v-on
与 v-bind 有一些差异&＃xff0c;v-on: 使用 &＃64;简写
<button &＃64;click&＃61;"strReverse">反转button>
![[大整数乘法] java代码实现](https://img1.php1.cn/3cd4a/24c6f/9f3/0133bb25da242824.jpeg)
京公网安备 11010802041100号