01-Mustache语法
1.1代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-Mustache语法</title>
</head>
<body>
<div id="app">
<!-- mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
<h2>{{message}}</h2>
<h2>{{message}}</br>Long time no see!</h2>
<h2>{{firstName+lastName}}</h2>
<h2>{{firstName+"_"+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js,就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
message: 'hello world!',
firstName: 'lin',
lastName: 'willen',
counter: 100
}
})
</script>
</body>
</html>
1.2运行结果
02-v-once指令的使用
2.1v-once
- 该指令后面不需要跟任何表达式
- 该指令表示元素和组件只渲染一次,不会随着数据的改变而改变
2.2代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-v-once指令的使用</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js,就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
message: 'hello world!'
}
})
</script>
</body>
</html>
2.3运行结果
2.4Console修改message值
03-v-html指令的使用
3.1v-html
1、 某些情况下,我们从服务器请求到的数据本身就是一个HTML代码
- 如果我们直接通过{{}}来输出,会将HTML代码也一起输出
- 但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容
2、 如果我们希望解析出HTML展示,可以使用v-html指令
- 该指令后面往往会跟上一个string类型
- 会将string的html解析出来并且进行
3.2代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-v-html指令的使用</title>
</head>
<body>
<div id="app">
<!-- 可查看运行效果,区别两种效果,很显然第二种是我们真正需要的-->
<h2>{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js,就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
//服务器返回url时,可能不止返回url,可能会把整个a标签返回,如下
url:'<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>
3.3运行结果
04-v-text指令的使用
4.1v-text
- v-text作用和Mustache比较相似:都是用于数据显示在界面中
- v-text通常情况下,接受一个string类型,原先在标签内的值会被覆盖
- v-text不够灵活,一般开发中,就是用Mustache语法插值
4.2代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-v-text指令的使用</title>
</head>
<body>
<div id="app">
<h2>{{message}} world!</h2>
<h2 v-text="message"> world!</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js,就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
message: 'hello'
}
})
</script>
</body>
</html>
4.3运行结果
05-v-pre指令的使用
5.1v-pre
- v-pre用于跳过这个元素和它子元素的编译过程,用于显示原来的Mustache语法
5.2代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-v-pre指令的使用</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js,就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
message: 'hello world!'
}
})
</script>
</body>
</html>
5.3运行结果
06-v-cloak指令的使用
6.1v-cloak
- cloak:斗篷
- 某些情况下,浏览器可能会直接显示出未编译的Mustache标签
6.2代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-v-cloak指令的使用</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js,就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
setTimeout(function () {
const vm = new Vue({
el: '#app',
data: {
message: 'hello world!'
}
})
},1000)
</script>
</body>
</html>
6.3运行结果
如果没有加v-cloak以及style内容,那么此时显示{{message}},用户体验极差
加了v-cloak以及style内容后会先显示空白,等待1秒后Vue实例创建出来后把文本显示出来