1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <div id="app"> 10 <ul> 11 <li v-once>{{message}}</li> 12 </ul> 13 </div>
1 <script src="../js/vue.js"></script> 2 <script> 3 const app = new Vue({ 4 el:"#app", 5 data:{ 6 message:'你好呀', 7 } 8 }) 9 </script>
v-once:作用：当加上v-once之后DOm中的message的值就是data中得message的初始值；也就说DOM中的message不会随着data中message的值变化而发生变化
2.v-HTML的使用：
作用：将服务器传回来的标签展示到界面；而不是标签本身
用法：请看下面例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <ul> <li v-html = "url"></li> </ul> </div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:'你好呀',
url:"<a href = "http://www.baidu,com">百度一下</a>"
}
})
</script>
3.v-text的使用:
v-text作用和Mustache比较相似；都是用于将数据显示在页面当中
v-text通常情况在，接受一个string类型
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <div id="app"> 10 <ul> 11 <li v-text = "message"></li> 12 </ul> 13 </div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:'你好呀',
}
})
</script>
4.v-pre用法：
作用：v-pre用于跳过这个元素和他子元素的编译过程，不做任何改变，标签中间是什么就显示什么
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{message}}</h2> //将data中的数据显示出来 <h2 v-pre>{{message}}</h2> //将标签之间的东西原封不动的显示出来；不做任何改变，标签中间是什么就显示什么 </div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:'你好呀',
}
})
</script>