Vue学习02-Vue插值操作

前面一篇文章中简单的记录了一下Vue基础的内容,接下来主要记录Vue的插值与表达式,以及它的一些基本指令。
初识Vue.js
1、Mustache语法:
{{}},最基本的文本插值方法,自动将双向绑定的文本数据实时显示出来
Vue学习02-Vue插值操作_第1张图片
2.v-html
在某些情况下,服务器返回的数据本身就是html文本,需要在界面上以html的形式显示出来,这是如果使用文本插值方法,就整个将这段html数据显示在界面上了
Vue学习02-Vue插值操作_第2张图片
输出结果
3. v-once
该指令后面无需跟任何表达式,作用是页面上显示的数据不希望随数据的改变而重新渲染界面数据
v-once示例
Vue学习02-Vue插值操作_第3张图片
4.v-text
文本插值指令,在实际开发中并不常用
5.v-pre
我们指导,使用{{}}语法,vue会将数据解析绑定在界面上,但有时候我们需要将{{}}显示在界面上,此时就需要v-pre指令,后不需要跟任何表达式
Vue学习02-Vue插值操作_第4张图片
输出结果

你可能感兴趣的:(前端)