-
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="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-once>{{message}}</h2>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: "阳光灿烂的日子"
}
})
</script>
</body>
</html>
-
v-html指令把得到的数据按照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="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-html="link"></h2>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: '<a href="www.baidu.com"></a>',
link: '<a href="www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>
-
v-text指令和Mustache比较类似,都是将数据显示在界面中
<!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="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: '阳光灿烂的日子'
}
})
</script>
</body>
</html>
-
v-pre的作用是跳过这个元素及其子元素的编译,用于显示原本的Mustache的语法
<!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="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: '阳光灿烂的日子',
}
})
</script>
</body>
</html>
-
在某些情况下,浏览器可能直接显示出为编译的Mustache标签,我们如果不想让它进行显示我们可以添加v-cloak指令,然后在css中用属性选择器,将此标签先屏蔽掉,等它编译结束再显现出来。
<!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="../js/vue.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h2 v-cloak>{{message}}</h2v>
</div>
<script>
setTimeout(function() {
let app = new Vue({
el: '#app',
data: {
message: '阳光灿烂的日子',
}
})
}, 1000)
</script>
</body>
</html>
-
v-bind基础,可以用来动态绑定标签的属性,v-bind:src="url"或者语法糖格式:src=“url”
<!---->
<!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="../js/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">百度一下</a>
<img v-bind:src="location" alt="">
<a :href="url">百度一下</a>
<img :src="location" alt="">
</div>
<script>
let app = new Vue({
el: '#app',
data: {
location: 'https://img.alicdn.com/bao/uploaded/i2/T16hPmXaRsXXbzbPo9_103822.jpg_200x200q90.jpg_.webp',
url: 'http://www.baidu.com'
}
})
</script>
</body>
</html>
-
v-bind动态绑定class, :class="{‘类名’: boolean, ‘类名’: boolean}" 或者使用函数:class=“getClasses()”
<!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="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2 :class="{'active': isActive, 'line': isLine}">.........</h2>
<h3 :class="getClasses()">!!!!!!!</h3>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
isActive: true,
isLine: true
},
methods: {
getClasses: function() {
return {'active': this.isActive, 'line': this.isLine};
}
}
})
</script>
</body>
</html>
-
v-bind动态绑定style注意在写css名称的时候,可以使用驼峰式fontSize或者用引号引起来的原名’font-size’最后注意,值都是用引号引起来的
<!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="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2 :style="{fontSize: '20px', color: 'pink'}">阳光灿烂的日子</h2>
<h2 :style="{'font-size': '20px', color: 'pink'}">阳光灿烂的日子</h2>
<h3 :style="getStyle()">阳光灿烂的日子</h3>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
isActive: true,
isLine: true
},
methods: {
getStyle: function() {
return {fontSize: '40px', color: 'pink'};
}
}
})
</script>
</body>
</html>