Vue mustache语法
mustache语法
Vue中的插值语法mustache本意为胡子，可能是{{}}长得像胡子吧。
下面是对mustache插值语法一个最简单的使用。
被管理元素会通过data属性拿到其中的数据对象。
<body>
<main id="id-1">{{msg1}}</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
msg1: "HELLO,WORLD",
}
})
</script>
数据继承
被管理元素的子集元素都可以获取到被管理的父元素的数据对象。
但是子元素的数据对象父元素不能获取到。
<body>
<main id="id-1">
{{msg2}}
<section id="chilren-1">{{msg1}}</section>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
msg1: "爸爸的数据",
}
})
const v2 = new Vue({
el:"#chilren-1",
data:{
msg2:"儿子的数据",
}
})
</script>
四则渲染
标签中的内容可以根据数据层中的数据进行四则渲染。
<body>
<main id="id-1">
<p>{{msg1 + msg2}}</p>
<p>{{msg3 * 3}}</p>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
msg1: "HELLO",
msg2: "WORLD",
msg3: 10,
}
})
</script>
v-once
当标签中添加该属性指令时，标签渲染的内容将是固定的不会再随着数据层数据的动态改变而进行改变。
<body>
<main id="id-1">
<!-- HELLOWORLD 不会变 -->
<p v-once>{{msg1}}</p>
<!-- 会变 -->
<p>{{msg1}}</p>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
msg1: "HELLO WORLD",
}
})
</script>
v-html
当标签中添加该属性指令时，该标签渲染的内容将会以HTML代码呈现。
这会预防XSS攻击。
注意，该属性指令应该通过等号绑定一个数据
<body>
<main id="id-1">
<p v-html="msg1"></p>
<p>{{msg1}}</p>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
msg1: "<a href='www.google.com'>谷歌搜索</a>",
}
})
</script>
v-text
这个属性指令和直接使用{{}}渲染内容无太大差异，不同的是这个是通过属性指令来进行渲染。
注意，该属性指令应该通过等号绑定一个数据
<body>
<main id="id-1">
<p v-text="msg1"></p>
<p>{{msg1}}</p>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
msg1: "HELLO,WORLD",
}
})
</script>
v-show
该属性指令为false时将该标签将添加display:none的样式。
<body>
<main id="id-1">
<p v-show="conditionOne">display:block</p>
<p v-show="conditionTwo">display:none</p>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
conditionOne: true,
conditionTwo: false,
}
})
</script>
v-pre
该属性指令会将标签中的内容按照原本格式进行呈现，类似于<pre>标签。
<body>
<main id="id-1">
<p v-pre>{{msg1}}</p>
<p>{{msg1}}</p>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
msg1: "HELLO,WORLD",
}
})
</script>
v-cloak
在网络情况较差的环境下，可能会出现模板渲染不及时的问题。
使用v-cloak属性指令可挡住{{}}模板语法，使用户获得更好的体验。
注意：需要手动添加样式
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<main id="id-1" v-cloak>
<p>{{msg1}}</p>
<p>{{msg1}}</p>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
setTimeout(function(){
const v1 = new Vue({
el: "#id-1",
data: {
msg1: "HELLO,WORLD",
}
})
},1000)
</script>
计算属性
计算属性computed可以让标签内容渲染出极为复杂的数据。
既然是属性，调用时就可以不加括号。
computed
以下是计算属性的基本使用，我们需要计算出后端返回过来的数据，书的总价。
computed内部其实是通过getttr实现的，所以不用加括号
<body>
<main id="id-1">
<div>书籍总价格:{{totalPrice}}</div>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
books: {
"Vue实战": 128,
"JavaScrip入门": 99,
"HTML5初识": 87,
"CSS3": 68,
}
},
computed: {
totalPrice() {
return Object.values(this.books).reduce((prev, cur) => {
return prev + cur
}, 0)
}
}
})
</script>
methods
对于上述需求，我们也可以用方法来完成，不同的是需要添加括号进行运行。
这是methods与computed一个最显著的区别。
<body>
<main id="id-1">
<div>书籍总价格:{{totalPrice}}</div>
<div>书籍总价格:{{getTotaPrice()}}</div>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
books: {
"Vue实战": 128,
"JavaScrip入门": 99,
"HTML5初识": 87,
"CSS3": 68,
}
},
computed: {
totalPrice() {
return Object.values(this.books).reduce((prev, cur) => {
return prev + cur
}, 0)
}
},
methods:{
getTotaPrice(){
return Object.values(this.books).reduce((prev, cur) => {
return prev + cur
}, 0)
}
}
})
</script>
缓存特性
computed是具有缓存的，而methods则是没有缓存。
如下示例，使用computed对多个标签进行渲染，发现只会运行一次。
而使用methods的话则会运行多次。
<body>
<main id="id-1">
<div>书籍总价格:{{totalPrice}}</div>
<div>书籍总价格:{{totalPrice}}</div>
<div>书籍总价格:{{totalPrice}}</div>
<div>书籍总价格:{{getTotaPrice()}}</div>
<div>书籍总价格:{{getTotaPrice()}}</div>
<div>书籍总价格:{{getTotaPrice()}}</div>
</main>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
"use strict";
const v1 = new Vue({
el: "#id-1",
data: {
books: {
"Vue实战": 128,
"JavaScrip入门": 99,
"HTML5初识": 87,
"CSS3": 68,
}
},
computed: {
totalPrice() {
console.log("运行computed中的方法");
return Object.values(this.books).reduce((prev, cur) => {
return prev + cur
}, 0)
}
},
methods:{
getTotaPrice(){
console.log("运行methods总的方法");
return Object.values(this.books).reduce((prev, cur) => {
return prev + cur
}, 0)
}
}
})
</script>
Vue mustache语法的更多相关文章
- 初识Vue——模板语法
一.插值 1.文本 数据绑定最常见的形式是使用双大括号({{ }}--"Mustache"语法)的文本插值 <div class="mustache"& ...
- vue模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- Vue模板语法V-bind
一.插值 1.文本 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- Vue 数据绑定语法
数据绑定语法 Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板, ...
- Vue模板语法总结
文本 数据绑定最常见的方式就是使用"Mustache"语法(两个大括号{{ }})的文本插值 <span>Message: {{ msg }}</span> ...
- 2. Vue基础语法
模板语法: Mustache语法: {{}} Html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok?'Yes': ...
- Vue模板语法与常用指令
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...
- 11 - Vue模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...
- 一、vue基础语法（轻松入门vue）
轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...
随机推荐
- 手把手教Linux驱动2-之模块参数和符号导出
通过<手把手教Linux驱动1-模块化编程,玩转module>的学习,我们已经掌握了如何向内核加载一个模块,现在我们学习模块之间如何传递参数. 一.给模块传递参数 当我们加载一个模块到Li ...
- Hadoop 3.x 与Hadoop 2.x 的区别和优化点
Hadoop 3.x 与Hadoop 2.x 的区别和优化点 通用性 1.精简Hadoop内核,包括剔除过期的API和实现,将默认组件实现替换成最高效的实现(比如将FileOutputCommitte ...
- 一文带你深扒ClassLoader内核，揭开它的神秘面纱！
「MoreThanJava」 宣扬的是 「学习,不止 CODE」. 如果觉得 「不错」 的朋友,欢迎 「关注 + 留言 + 分享」,文末有完整的获取链接,您的支持是我前进的最大的动力! 前言 Clas ...
- 分享一个操作pdf文件的js文件-pdfObject.js(文件预览、下载、打印等操作都具备）
获取相关资料或者源码的朋友可以关注下公众号,回复关键字pdf20200518即可
- jdk8的下载、安装、配置
jdk官方网址:https://www.oracle.com/java/technologies/javase-downloads.html 小编微信和公众号(很高兴能与各位交流学习) 以下是具体步骤 ...
- Linux文件描述符与重定向
文件描述符可以理解为linux跟踪打开文件,而分配的一个数字,这个数字有点类似c语言操作文件时候的句柄,通过句柄就可以实现文件的读写操作. 当Linux启动的时候会默认打开三个文件描述符,分别是: 标 ...
- 为什么golang中不存在三元运算符
三元运算符广泛存在于其他语言中,比如: python: val = trueValue if expr else falseValue javascript: const val = expr ? t ...
- 发生错误 1069 sqlserver
---------------------------SQL Server 服务管理器---------------------------发生错误 1069 - (由于登录失败而无法启动服务.),此 ...
- 【阿里云训练营】python查漏补缺 1
文章来自:微信公众号[机器学习炼丹术]. 有问题疑惑,或者想交流交朋友的可以加个人微信:cyx645016617 参考目录: 目录 1 注释 2 is 与 == 3 运算优先级 4 查找所有属性和方法 ...
- 测试JsonAnalyzer2的12个测试用例:
测试用例如下: 01. Compact json text={"status":"","message":"success&quo ...