VUE(2)
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div id="app"><h2 v-once>{{message}}</h2>
<h2>{{message}}</h2>
<h2>{{firstname+ ' ' +lastname}}</h2>
<h2>{{counter*2}}</h2>
</div>
<script>
const app=new Vue({el:"#app",data:{message:"你好啊", firstname:"kobe", lastname:"bryant",counter:100} } )
</script>
</body>
</html>1.v-once指令
未使用v-once指令之前，对数据进行修改，界面同步更新
对容器使用v-once指令进行修饰之后，对数据进行修改，界面不更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div id="app">
<h2> {{ message }}</h2>
<h2 v-once>{{ message }}</h2>
</div>
<script>
const app = new Vue({ el: '#app',
data: {
message: '你好啊'
} })
</script>
</body>
</html>
2.v-html指令
把文本放到DOM上进行展示。以html的语法形式展示变量值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div id="app">
<h2> {{ message }}</h2>
<h2 v-html="url"></h2>
</div>
<script>
const app = new Vue({ el: '#app',
data: { message: '你好啊',
url:'百度一下' } })
</script>
</body>
</html>
3. v-text指令
把文本放到DOM上进行展示。
<body>
<div id='app'>
<h2>{{message}},李银河！</h2>
<h2 v-text="message"></h2>
<!--一般不用，不够灵活 作用与Mustache比较相似：都是用于数据显示在界面这中v-text通常情况下，接近一个string类型-->
</div>
<script>
const app = new Vue({ el:'#app',
data:{
message:'你好' } })
</script>
</body>
4.v-pre指令
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div id='app'>
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script>
const app = new Vue({ el:'#app',
data:{ message:'你好' }
})
</script>
</body>
</html>
5.v-cloak指令
当给一个元素加上v-cloak时，Vue解析这个语句前v-cloak存在，但是解析了这个语句之后，v-cloak就会自动消失。所以就可以指定v-cloak未消失时的显示样式style和解析之后v-cloak消失后的显示样式
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div id='app' v-cloak>
<h2>{{message}}</h2>
</div>
<!--在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签 cloak：斗篷 --> <script>
// 在vue解析之前，div中必有一个属性v-cloak
// 在vue解析之后，div中没有一个属性v-cloak setTimeout(function () {
const app = new Vue({
el: '#app',
data:{
message:'你好'
} }) }, 1000) </script>
</body>
</html>二、动态绑定属性
v-bind作用：动态地绑定一些属性值
```bash
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TITLE</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div id="app">
<img :src="imgURL" alt="">
<a :href="aHref">百度一下</a>
</div> <script> // let(变量)/const（常量）
const app = new Vue({ el: '#app', data: { message: '你好啊', imgURL:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg', aHref:'http://www.baidu.com'
} });
</script>
</body>
</html>
1.动态绑定class属性（对象语法）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>TITLE</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<style> .active {
color:purple; }</style></head>
<body>
<div id="app">
<h2 :class="{active:isActive}">{{message}}</h2>
<BUTTON v-on:click="btnClick">按钮</BUTTON> </div>
<script> // let(变量)/const（常量）
const app = new Vue({ el:'#app',
data: { message:"你好啊",
isActive:true,
// isLine:true },
methods:{
btnClick:function(){
this.isActive=!this.isActive }, // getClasses:function(){
// return {activr:this.isActive} } } ); </script>
</body>
</html>
2.动态绑定class属性（数组语法）
<body>
<div id='app'>
<h2 v-bind:class="[active, line]">
{{message}}</h2>
<h2 v-bind:class="getClasses()">
{{message}}</h2>
</div> <script>
const app = new Vue({ el:'#app',
data:{ message:'你好',
active: AAAA,
line:BBBB, },
methods:{
getClasses: function(){
return [this.active, this.line] }, } })
</script>
</body>