![](https://img-blog.csdnimg.cn/20201110203555814.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzY4MDA3,size_16,color_FFFFFF,t_70)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id ="app">
<h2>{{message}}</h2>
<h2>{{message}},代止兮</h2>
<!-- 在mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式 -->
<h2>{{firstName+lastName}}</h2>
<h2>{{firstName+' '+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter*2}}</h2>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
message:'你好啊',
firstName:'Ian',
lastName:'Dai',
counter:100
},
methods: {}
});
</script>
</body>
</html>
![](https://img-blog.csdnimg.cn/2020111020383342.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id ="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
message:'你好啊'
},
methods: {}
});
</script>
</body>
</html>
![](https://img-blog.csdnimg.cn/20201110205225328.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzY4MDA3,size_16,color_FFFFFF,t_70)
![](https://img-blog.csdnimg.cn/20201110212555611.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzY4MDA3,size_16,color_FFFFFF,t_70)
![](https://img-blog.csdnimg.cn/20201110220255436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzY4MDA3,size_16,color_FFFFFF,t_70)
![](https://img-blog.csdnimg.cn/20201110220306239.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id ="app">
<h2>{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
message:"你好啊",
url:'<a href="http://www.baidu.com">百度一下</a>'
},
methods: {}
});
</script>
</body>
</html>
v-text指令的使用
![](https://img-blog.csdnimg.cn/20201110220829468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzY4MDA3,size_16,color_FFFFFF,t_70)
![](https://img-blog.csdnimg.cn/20201110220912150.png)
![](https://img-blog.csdnimg.cn/20201110221248183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzY4MDA3,size_16,color_FFFFFF,t_70)
![](https://img-blog.csdnimg.cn/20201110221257469.png)