指令
v-text指令
存放文本，类似div标签选择器的声明
可用连接符连上字符
<h2 v-text="info + '!'"></h2>
1
2
3
4
5
6
7
8
9
10
| <h2 v-text="message+'!'"></h2>
<script>
new Vue({
el: "#app",
data: {
message: "qwq",
}
})
</script>
|
v-html
类似js中的innerHtml，可带入html元素等
v-bind
(单向绑定)
v-bind:value
数据从data 中流入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="leo">
<h1>{{name}}</h1>
<a v-bind:href="url"></a>
<a href=""></a>
</div>
<script>
const vm1 = {
data() {
return {
name: 'jack',
url: 'www.github.com'
}
}
};
Vue.createApp(vm1).mount('#leo');
</script>
|
image-20220914204210120
有了v-bind，会把" "里面包着的东西当作js表达式。
<a v-bind:href="url"></a>可简写为<a :href="url"></a>
v-model
（双向绑定）
v-model=value
数据可从data 中流入，也可逆流
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div id="app">
<input type="text" v-model="info">
<input type="text" v-model="info">
</div>
<script>
const vm1 = {
data() {
return {
info: 'admin'
}
}
}
Vue.createApp(vm1).mount('#app');
</script>
|
v-if
1
2
| <h2 v-if="false">ppp</h2>
<h2 v-if="true">vvv</h2>
|
image-20220924195002934
v-on
监听器，监听事件
1
2
| <MyButton v-on:click="onClick" />
<MyButton @click="onClick" />
|
computed
计算属性
同methods中的函数一样，只不过是具有缓存机制，当内部依赖值发生改变时才会重新计算。适用于重复性调用的函数。使用时不需加()
组件注册
全局注册
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<my-conponent></my-conponent>
</div>
<script>
const vm = Vue.createApp({});
const my_conponent = {
data() {
return {
msg: 'qwq'
}
},
template:
'<div><h2>{{ msg }}</h2></div>'
}
vm.component('my-conponent', my_conponent);
vm.mount('#app');
</script>
</body>
</html>
|
局部注册
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
库房还剩<button-counter></button-counter>台
</div>
<script>
const my_conponent = {
data() {
return {
num: 100
}
},
template:
'<button @click="num--">{{ num }}</button>'
}
const vm = Vue.createApp({
components: {
ButtonCounter: my_conponent
}
});
vm.mount('#app');
</script>
</body>
</html>
|
props
父组件通过props向子组件传递要展示的数据
子组件的属性定义在prop内才能被父组件调用
声明三种形式
props:[a,b,c] //a,b,c均为属性
```vue props:{ a:String, b:boolean, c:number, }
1
2
3
4
5
6
7
8
|
3. ```vue
props: {
color: {
type: String,
default: "black"
}
}
|
```vue props: { color: { type: String, }, size:[String,Boolean]
//不确定为什么类型时 } 1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
### 必填项
属性`require`,填写过后，当前对象被食用后必须被赋值，否则会报错
```vue
props: {
title: {
type: String,
require:true
},
}
|
Scoped-组件样式冲突解决方案
为<style></style>添加scoped属性
1
2
3
4
5
| <style scoped>
p {
color: rebeccapurple;
}
</style>
|
添加后，当前组件的样式对其子组件是不生效的
deep-深度选择器
1
2
3
4
5
| <style scoped>
:deep(p) {
color: #a62929;
}
</style>
|