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 ...
- 给Django的Admin添加自定义Action 并移除需要选择对象的限制
不得不说,Django的Admin真的给开发带来很多便利,这不,我又来折腾了,这次是添加自定义的action 这个自定义的Action可以看看官方文档的介绍,很详细,不再赘述. https://doc ...
- ClickHouse和他的朋友们（9）MySQL实时复制与实现
本文转自我司大神 BohuTANG的博客 . 很多人看到标题还以为自己走错了夜场,其实没有. ClickHouse 可以挂载为 MySQL 的一个从库 ,先全量再增量的实时同步 MySQL 数据,这个 ...
- JavaScript面向对象的学习
1.面向过程与面向对象 1.1面向过程 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了. 1.2面向对象 面向对象是把事务分解成为一个 ...
- UnitTest框架的快速构建与运行
我们先来简单介绍一下unittest框架,先上代码: 1.建立结构的文件夹: 注意,上面的文件夹都是package,也就是说你在new新建文件夹的时候不要选directory,而是要选package: ...
- mysql 安装卸载自动化脚本
#!/bin/sh #mkdir /root/mysql #tar -xvf mysql-5.7.-.el7.x86_64.rpm-bundle.tar -C /root/mysql #cd /roo ...
- 架构设计 | 基于电商交易流程，图解TCC事务分段提交
本文源码:GitHub·点这里 || GitEE·点这里 一.场景案例简介 1.场景描述 分布式事务在业务系统中是十分常见的,最经典的场景就是电商架构中的交易业务,如图: 客户端通过请求订单服务,执行 ...
- asterisk 传真服务器配置
摘要: asterisk 可以作为电子传真服务器,进行收发电子传真.但是配置起来,比较麻烦,需要一番折腾.在这儿分享一下电子传真的配置,希望对朋友们有所帮助. 正题: asterisk 如果需要收发电 ...
- 关于Vue的那些事儿
Vue 渐进式框架 众前端周知,Vue是一套用于构建用户界面的渐进式框架,自底向上逐层应用,关注视图层.那我们就来说道说道: 渐进式:声明式渲染->组件系统->客户端路由(router)- ...
- 电子邮箱有哪些隐藏技能，读懂了效率提升N倍！
很多人将邮箱作为常见的通讯工具,然而,大部分职场人只了解其五分之一的功能.电子邮箱还有很多隐藏技能,身为商务精英的你,必须往下看看哦!今天跟随TOM邮箱小编导,来挖掘下邮箱的潜藏技能吧~ 作为经常外出 ...