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 ...
随机推荐
- lombook插件的说明
lombok是一个可以帮助我们简化java代码编写的工具类,尤其是简化javabean的编写,即通过采用注解的方式,消除代码中的构造方法,getter/setter等代码,使我们写的类更加简洁,当然, ...
- HTTP系列之跨域资源共享机制（CORS）介绍
前言 本文将继续解析详解HTTP系列1中的请求/ 响应报文的首部字段,今天带来的跨域资源共享(CORS)机制,具体内容包括CORS的原理.流程.实战,希望能给大家带来收获! CORS简介 跨域资源共享 ...
- VS Code安装yo(Yeoman) 插件下载.net core 模版代码开发
在安装插件以前,请看插件地址的相关依赖 Pre-requirements [Node.js] (https://nodejs.org) [npm] (https://www.npmjs.com) [Y ...
- JavaScript函数的高级用法
1.函数的定义和调用 1.1函数的定义方式 方式1 函数声明方式 function 关键字 (命名函数) function fn(){} 方式2 函数表达式(匿名函数) var fn = functi ...
- 特性预览：Apache 顶级项目 Apache Pulsar 2.6.1 版本
在正式分享 2.6.1 版本更新细节之前,冉小龙首先为我们分享了两个相关 PIP 的内容. 一个是 PIP-47 中关于「基于时间来进行版本更新」的计划.该 PIP 提出后,从 2.5.0 版本到目前 ...
- 算法专题 | 10行代码实现的最短路算法——Bellman-ford与SPFA
今天是算法数据结构专题的第33篇文章,我们一起来聊聊最短路问题. 最短路问题也属于图论算法之一,解决的是在一张有向图当中点与点之间的最短距离问题.最短路算法有很多,比较常用的有bellman-ford ...
- vue 0点定时网络请求
export default { data() { return { timer: null, currentTime: '', zeroTime: '00:00:05', // zeroTime: ...
- 给IE9及其以下等不支持classList属性的浏览器,添加classList属性
// 解决IE9及其以下 不支持classList属性的问题 if (!("classList" in document.documentElement)) { Object.de ...
- IDEA 2020 集成 Activity插件
我按照教程打开settings-plugins,搜索actiBPM搜索不到, 于是我就去下载插件,然后再安装,具体步骤如下: 下载插件: 到http://plugins.jetbrains.com/, ...
- C006：多项式求值 horner法则
代码: #include "stdafx.h" int _tmain(int argc, _TCHAR* argv[]) { float x; do{ printf("E ...