Vue基础知识(一) - 插值语法
2020-12-27 本文已影响0人
SingingHan
1.mustache语法( 也叫双大括号)
mustache : 英文是胡须 / 胡子的意思,因为 {{ }} 像人的脸上两边的胡子(自行脑补)
用法:在html标签中 插入 {{ 变量名 }} ,来显示自己要展示的数据
注意:mustache语法中可以写简单的表达式
代码如下:
<div id="app">
<!-- mustache语法中可以写简单的表达式 -->
<h1>
{{firstName + ' ' + lastName}}
</h1>
<h2>
{{msg}}
</h2>
<!-- mustache语法中可以写简单的表达式 -->
<h3>
{{ count * 2}}
</h3>
</div>
<script>
//创建Vue实例,得到 ViewModel
const vue = new Vue({
el: "#app",
data: {
firstName: 'Kobe',
lastName: 'Bryant',
msg: '你好啊',
count: 200
},
methods: {}
});
</script>
mustache展示结果
2.v-text
特点: 和原生js的innerText属性类似,作用和mustache语法一样,但是没有mustache语法那么灵活,因为它只能写一个固定的值,并不能像mustache语法一样能写表达式,对一些字符串进行拼接操作等等
注意: 如果标签里有数据的时候,v-text会先替换原来的数据,再展示变量的数据
代码如下:
<div id="app">
<h2 v-text="msg">我是张三</h2>
</div>
<script>
//创建Vue实例,得到 ViewModel
const vue = new Vue({
el: "#app",
data: {
msg: '你好啊'
},
methods: {}
});
</script>
v-text图示
结果并没有展示张三,而是替换了原先的内容
3.v-html
特点:和原生js的innerHTML属性类似,也能在界面中展示数据
注意: 1.如果标签里有数据的时候,v-html会先替换原来的数据,再展示变量的数据 2.与v-text不同的是,v-html可以解析html标签
v-html图示
4.v-once
特点:具有v-once的标签中的数据只在界面上渲染一次
注意:当我们去修改data里面的值的时候,界面的展示数据不会发生(改变)响应式
代码如下:
<div id="app">
<h2>
{{ msg }}
</h2>
<h3 v-once>
{{ msg }}
</h3>
</div>
<script>
//创建Vue实例,得到 ViewModel
const vue = new Vue({
el: "#app",
data: {
msg: '你好啊'
},
methods: {}
});
</script>
v-once图示
注意: 修改了msg的数值时,被v-once修饰的标签的数据没有发生改变
5.v-pre
特点:标签具有v-pre,界面会原封不动地展示标签内的内容,不会解析mustache语法等
代码如下:
<div id="app">
<h2>{{msg}}</h2>
<h2 v-pre>{{msg}}</h2>
</div>
<script>
//创建Vue实例,得到 ViewModel
const vue = new Vue({
el: "#app",
data: {
msg: '你好啊'
},
methods: {}
});
</script>
v-pre图示
6.v-cloak
特点:在界面和数据还没完全渲染的时候,它不会展示,当界面和数据渲染完成,它才显示
注意:要使用这个指令的时候需要和css的代码 [v-cloak]{ display: none } 一起配合使用
<style>
[v-cloak] {
display: none;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-cloak>
{{msg}}
</h2>
</div>
<script>
//创建Vue实例,得到 ViewModel
setTimeout(function(){
const vue = new Vue({
el: "#app",
data: {
msg: '你好啊',
},
methods: {}
});
},1000)
</script>
用一个一秒的定时器来检验一下,一秒后显示
v-cloak
