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 ...
随机推荐
- 你真的了解 get 和 post 的区别么
get 和 post 是两种最常用的 HTTP 请求方法,要说它们两个的区别,相必接触过 WEB 开发的人都能够说出一二. 如果我问你这个问题,你的内心充满了自信和喜悦.你可能已经写过无数个 GET ...
- Shell脚本最佳实践
Shell脚本最佳实践 0. 编码.缩进.文件命名和权限设置等 使用utf-8编码: 统一使用tab缩进或空格缩进,不要混用: 文件名以.sh结尾,并且统一风格: 添加可执行权限: chmod +x ...
- Java 实例 - 查看当前工作目录
package guyu.day0820; /** * @Author: Fred * @Date: 2020/8/20 14:25 */ public class Demo03 { public s ...
- 设计模式C++模板(Template)模式
设计模式C++描述----02.模板(Template)模式(转载) 一. 问题 在面向对象系统的分析与设计过程中经常会遇到这样一种情况:对于某一个业务逻辑(算法实现)在不同的对象中有不同的细节实现, ...
- QString 字符串操作
Qt QString字符串分割.截取(转载) 在做项目中不可避免的会使用到一串字符串中的一段字符,因此常常需要截取字符串. 有两种方式可以解决这个问题: 方法一:QString分割字符串: QStri ...
- 数据去重Distinct，IEqualityComparer，IEquatable
很多情况下我们查询数据需要去重重复数据,下面就记录三个去重的方法. Distinct 最基本的去重形式,直接查询出数据后使用Distinct方法进行字段去重. var strList = new Li ...
- 利用 Python 写个七夕表白神器
今天是七夕节,相比于现代人自创的 502,不对是 520,七夕才是中国传统意义上的情人节,本文分享几个 Python 表白程序,情侣可以现学现用,单身的话也可以先收藏一下,说不定下次就用上了. 很多人 ...
- HTML5 Drag & Drop
一定要区分不同事件产生的对象 源元素 属性:draggable = "true" 事件: ondragstart:开始拖拽 ondragend:拖拽结束 目标元素 事件: ondr ...
- Vue中父组件使用子组件的emit事件，获取emit事件传出的值并添加父组件额外的参数进行操作
需求是这样的,需要输入这样一个列表的数据,可以手动添加行,每一行中客户编号跟客户姓名是自动关联的,就是说选取了客户姓名之后,客户编号是自动填充的,客户姓名是一个独立的组件,每一个下拉项都是一个大的对象 ...
- 6 vue-element.ui 左侧导航栏
<template> <div> <el-menu :default-active="'/'+activeIndex2" mode="ver ...