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 ...
随机推荐
- 团队作业4：第二篇Scrum冲刺博客（歪瑞古德小队）
目录 一.Daily Scrum Meeting 1.1 会议照片 1.2 项目进展 二.项目燃尽图 三.签入记录 3.1 代码/文档签入记录 3.2 Code Review 记录 3.3 issue ...
- python3 raw 数据转换为jpg
python3 raw 数据转换为jpg 我们大家都知道,sensor 直接出来的裸数据为raw 数据,没有经过编解码,压缩. 我们需要将raw数据转换为其他格式比如jpg,png,bmp 人眼才能看 ...
- Hadoop 2.6.1 集群安装配置教程
集群环境: 192.168.56.10 master 192.168.56.11 slave1 192.168.56.12 slave2 下载安装包/拷贝安装包 # 存放路径: cd /usr/loc ...
- SpringBoot中关于Excel的导入和导出
前言 由于在最近的项目中使用Excel导入和导出较为频繁,以此篇博客作为记录,方便日后查阅.本文前台页面将使用layui,来演示对Excel文件导入和导出的效果.本文代码已上传至我的gitHub, ...
- Node.js 学习笔记之四：使用数据库
这部分示例将示范SQLite3.MongoDB这两种不同类型的数据库在 Node.js 中的使用方法.首先,我们要在code目录下执行mkdir 06_database命令来创建用于存放这一组示例的目 ...
- 用 Java 拿下 HTML 分分钟写个小爬虫
本文适合有 Java 基础知识的人群 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列,今天给大家带来一款开源 Java 版一款网页元素解析框架- ...
- MPL心得
1.右值引用变量是个左值,把一个右值引用参数继续传递给其他函数调用时,需要使用std::forward否则会按照左值匹配 2.const T和T const在匹配模板参数的时候是相同的,而const ...
- react-native 常用命令
创建项目 react-native init AwesomeProject //AwesomeProject是项目名 启动 Node.js web server react-native start ...
- Poi Excel 设置列宽计算公式
int width = 40;sheet.setColumnWidth(0,252*width+323); 作者:彼岸舞 时间:2020\07\27 内容关于:工作中用到的小技术 本文来源于网络,只做 ...
- .NET多线程(Thread,ThreadPool,Task,Async与Await)
.NET多线程是什么? 进程与线程 进程是一种正在执行的程序. 线程是程序中的一个执行流. 多线程是指一个程序中可以同时运行多个不同的线程来执行不同的任务. .NET中的线程 Thread是创建和控制 ...