Vue

指令

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内才能被父组件调用

声明三种形式

  1. props:[a,b,c] //a,b,c均为属性

  2. ```vue props:{ a:String, b:boolean, c:number, }

    1
    2
    3
    4
    5
    6
    7
    8

    3. ```vue
    props: {
    color: {
    type: String,
    default: "black"
    }
    }

  3. ```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>

Vue
http://example.com/2022/10/28/Vue学习/
作者
Charry
发布于
2022年10月28日
许可协议