P2-vue插值操作

1.插值操作概述

插值操作的特点将vue的data数据插入到html展示层进行显示。

1.1.Mustache

双大括号引用变量的语法称为Mustache语法，Mustache将需要展示的数据用变量形式展示，当Data对象中的数据发生改变时，展示层的数据将自动改变。同时Mustache还支持表达式来扩展显示的方式。
使用Demo如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--"双大括号的语法称为:mustache语法",mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式--><h2>{{message}}</h2><!-- mustache语法连接字符串 --><h2>{{message}},HelloWorld!!</h2><!-- mustache表达式 --><h2>{{firstName + lastName}}</h2><h2>{{firstName +' '+lastName}}</h2><h2>{{firstName}} + {{lastName}}</h2><h2>{{counter *2}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好vue',firstName: 'hua',lastName: 'zhang',counter: 100},})
</script></body>
</html>

1.1.1.展示效果

1.2.v-once插值指令

在某些情况下，我们可能不希望界面随意的跟随Data数据改变而改变。这个时候可以用v-once指令

v-once:
该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h2>{{message}}</h2><!-- v-once指令保证数据不会随Data数据改变而改变  --><h2 v-once>{{message}}</h2></div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'}})
</script>
</body>
</html>

1.2.1.展示效果

在Console中输入命令改变数据，在上面展示结果中可以看到v-once修饰的第二行数据没有改变

1.3.v-html插值指令

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码
- 如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
- 但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。

如果我们希望解析出HTML展示
可以使用v-html指令
该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h2>{{url}}</h2><h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'v-html你好',url: '<a href="http://www.baidu.com">百度一下</a>'}})
</script>
</body>
</html>

1.3.1.展示效果

1.4.v-pre插值指令

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
比如下面的代码：
第一个h2元素中的内容会被编译解析出来对应的内容
第二个h2元素中会直接显示{{message}}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h2>{{message}}</h2><!-- v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法 --><h2 v-pre>{{message}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好'}})
</script>
</body>
</html>

1.4.1.展示效果

1.5.v-cloak

在vue解析之前，我们浏览器可能会直接显然出未编译的Mustache标签,在vue解析之后展示Mustache内的数据。这样的展示效果是不能接受的，这个时候我们可以用v-cloak来解决。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>[v-cloak] {display: none;}</style>
</head>
<body>
<!-- 在vue解析之前, div中有一个属性v-cloak
在vue解析之后, div中没有一个属性v-cloak 用这个属性来控制我们message的数据在vue解析之前不展示，解析之后展示-->
<div id="app" v-cloak><h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>setTimeout(function(){const app = new Vue({el: '#app',data: {message: '你好v-cloack'}})},1000)</script>
</body>
</html>

1.5.1.展示效果

vue解析之前不展示数据
vue解析之后展示数据

P2-vue插值操作相关推荐

Vue 模板语法插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例
1 插值操作 1.1 Mustache语法也就是双大括号 {{ }} <div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写 ...
一、Vue基础语法学习笔记系列——插值操作(Mustache语法、v-once、v-html、v-text、v-pre、v-cloak)、绑定属性v-bind(绑定class、style)、计算属性
一.插值操作 1. Mustache 如何将data中的文本数据,插入到HTML中呢? 我们已经学习过了,可以通过Mustache语法(也就是双大括号). Mustache: 胡子/胡须. 我们可以像 ...
Vue的基础知识之插值操作
在学习之前如果你没有ES6的相关知识补充,请先去看看博主的这篇文章关于VUE中ES6的基础知识 1.Vue的基础知识 Vue是一个渐进式框架渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带 ...
vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', .... dataList:[] }, ...
从“小胡子”到 vue 插值语法
从"小胡子"到 vue 插值语法什么是模板引擎模板引擎是将数据要变为视图最优雅的解决方案,简单来说就是将模板文件和数据通过模板引擎生成一个HTML代码.还不懂?没关系,打个比方 ...
eclipsevue代码怎么运行_[Java教程]使用eclipse初步学习vue.js操作
[Java教程]使用eclipse初步学习vue.js操作 0 2017-11-26 19:00:06 一.vue.js的初步认识 https://unpkg.com/vue ">vu ...
VUE如何操作DOM
最近有些自闭,life is a shit,但是学习不能停,也开始继续健身了,试图让自己好一点. 这是学习VUE的第一篇博客,先来说一下准备工作.我们需要在谷歌商店安装vue-devtools插件,打 ...
vue v-html 插值,vue 插值 v-once,v-text, v-html详解
引入vue.js ,通过script形式,vue官网语法记录创建vue应用,数据和 dom 已经被建立了关联,所有东西都是响应式的 1:插值缺点:让你的网速慢,或者数据加载失败时,会在浏览器中直接 ...
在vue中操作DOM--this.$nextTick()
虽然 Vue.js 通常鼓励开发人员沿着"数据驱动"的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 V ...

P2-vue插值操作

P2-vue插值操作

1.插值操作概述

1.1.Mustache

1.1.1.展示效果

1.2.v-once插值指令

1.2.1.展示效果

1.3.v-html插值指令

1.3.1.展示效果

1.4.v-pre插值指令

1.4.1.展示效果

1.5.v-cloak

1.5.1.展示效果

P2-vue插值操作相关推荐

最新文章

热门文章