Vue
🌸 您好，欢迎您的阅读，等君久矣，愿与君畅谈.
🔭 § 始于颜值 § 陷于才华 § 忠于人品 §
📫 希望我们可以进一步交流，共同学习，共同探索未知的技术世界 稀土掘金 OR GitHub.
# 插值操作
Mustache语法 {{}}双大括号（胡子 / 胡须）- Mustache 语法中可以是变量和简单的表达式
- 插值操作–相关指令
-
v-once表示元素和组件只渲染一次，不会随着数据的改变而改变（无响应） -
v-html该指令后面跟上一个 string 类型，会将 string 的 html 解析出来并且进行渲染 -
v-text使用较少，因为存在覆盖原有元素 -
v-pre用于跳过这个元素和它的子元素的编译过程，用于显示原本的 Mustache 语法 -
v-cloak在某些情况下，我们浏览器可能会显示出未编译的 Mustache 标签1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36<style>
[cloak]{
display: none;
}
</style>
<body>
<div id="app">
<!-- v-once 无法修改-->
<div>{{message}}</div>
<div v-once>{{message}}</div>
<!-- v-html 解析并加载HTML标签-->
<h3>{{url}}</h3>
<h3 v-html="url"></h3>
<!-- v-text 作用与双括号相同，但会覆盖标签里原文本值-->
<h3>{{test}}真好玩哈</h3>
<!-- 把标签里面原有的文本进行覆盖只显示'学习编程' -->
<h3 v-text="test">真好玩哈</h3>
<!-- v-pre 保持原格式不进行解析-->
<h3>{{test}}</h3>
<h3 v-pre>{{test}}</h3>
<!-- v-cloak -->
<!-- 在Vue解析前h3存在cloak属性,Vue解析后该属性就自动没有 -->
<h3 v-cloak>简单测试</h3>
<h3>简单测试</h3>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
message:"测试v-once命令",
url:'<a href="http://www.baidu.com">百度一下</a>',
test:"学习编程"
}
});
</script>
-
# v-bind 或 :
-
v-bind基本使用- 作用：动态绑定属性
- 缩写：
: - 预期：任意参数或对象
- 用法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<body>
<div id="app">
<img :src="imgSrc" alt="">
<a v-bind:href="aHref">百度一下</a>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"https://imgcps.jd.com/ling4/12842874/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/4e121a9f/cr/s/q.jpg",
aHref:"http://www.baidu.com"
}
});
</script> -
属性绑定 (数组语法和对象语法的区别？作用？)
- 对象语法
- 数组语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35<body>
<div id="app">
<!-- 对象语法 -->
<!-- <h3 :class="{active:IsActive,line:IsLine}">{{message}}</h3> -->
<h3 :class="getClasses()">{{message}}</h3>
<!-- 数组语法 -->
<!-- <h3 class="test" :class="[active,line]">{{message}}</h3> -->
<button @click="red">修改颜色为red</button>
<button @click="bule">修改颜色为bule</button>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
message:"Hello Vue.js",
IsActive:false,
IsLine:false
},
methods:{
red:function(){
this.IsLine = false;
this.IsActive = true;
console.log("red");
},
bule:function(){
this.IsActive = false;
this.IsLine = true;
console.log("bule");
},
getClasses:function(){
return {active:this.IsActive,line:this.IsLine};
}
}
});
</script> -
style 绑定
- 对象语法
- 数组语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<body>
<div id="app">
<!-- 对象语法 -->
<!-- <h2 :style="{fontSize:finalSize+'px',backgroundColor:finalColor}">{{message}}</h2> -->
<h2 :style=getStyle()>{{message}}</h2>
<!-- 数组语法 -->
<!-- <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2> -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"您好",
finalSize:100,
finalColor:'red',
// baseStyle:{fontSize:100+'px'},
// baseStyle1:{backgroundColor:'red'}
}
,
methods:{
getStyle: function () {
return {fontSize:this.finalSize+'px',backgroundColor:this.finalColor}
}
}
});
</script>
</body>