1. vue实例
1.1 vue实例的创建和作用
1
2
3
4
5
6
7
8
9
10
11
12
13
| const app = new Vue({
el: '#root',
template: '<h1>hello world {{text}}</h1>',
data: {
text: 0
}
})
setInterval(() => {
app.$data.text += 1;
})
|
1.2 vue实例的属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| console.log(app.$data);
console.log(app.$props);
console.log(app.$el);
console.log(app.$options);
console.log(app.$root === app);
console.log(app.$children);
console.log(app.$slots);
console.log(app.$scopedSlots);
console.log(app.$refs);
console.log(app.$isServer);
app.$options.render = h => {
return h('div', {}, 'new render function')
}
|
1.3 vue实例的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
const textWatch = app.$watch('text', (newValue, oldValue) => {
console.log(`${newValue} : ${oldValue}`);
});
textWatch();
app.$emit('text', '1', '2');
app.$on('text', (a, b) => {
console.log(`text emit ${a}, ${b}`);
})
app.$once('text', (a, b) => {
console.log(`text emit ${a}, ${b}`);
})
app.$forceUpdate();
|
2. vue的生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
3. vue的属性
watch: 一般情况下, watch在初始化的时候是不会执行一次的, 如果想要在组件初始化的时候就执行, 需要在computed属性对应的监听对象下面写immediate: true, 深度监听要用deep: true, watch监听的对象还可以用对象的点语法来写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| computed: {
firstName: {
handler(newValue, oldValue) {
this.fullName = newValue + this.lastName;
},
immediate: true,
deep: true,
},
lastName: {
handler(newValue, oldValue) {
this.fullName = this.firstName + newValue;
},
immediate: true,
deep: true,
},
'obj.a': {
}
}
|
注意一般情况下不要在computed和watch里面去修改原来的值, 有可能造成无限循环
4. vue的指令
4.1 原生指令:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| v-bind 简写 :
v-on 简写 @
v-text
v-html
v-show
v-hide
v-if
v-else-if
v-else
v-for
v-model
v-pre
v-cloak(基本上用不到)
v-once
|
5. vue插槽
5.1 普通插槽
作用: vue组件不用于一般的html标签, 在组件内部再写html标签不会渲染, 但是一些组件的功能仅仅是给另一些组件包一层样式, 在里面还需要另外的组件:
1
2
3
4
5
| <template>
<div class="feature">
<slot></slot>
</div>
</template>
|
使用: 直接在组件里面包着要放入的内容, 此处带有插槽的组件为Feature
1
2
3
| <Feature>
<h1>header</h1>
</Feature>
|
5.2 具名插槽
作用: 组件内部需要多处不同的放置东西的情况
1
2
3
4
5
6
7
8
9
10
| <template>
<div class="feature">
<div class="header">
<slot name="header"></slot>
</div>
<div class="content">
<slot name="content"></slot>
</div>
</div>
</template>
|
使用:
1
2
3
4
| <Feature>
<h1 slot="header">header</h1>
<h1 slot="content">content</h1>
</Feature>
|
5.3 作用域插槽
作用: 调用插槽的组件处可以使用定义插槽组件内部的一些变量
1
2
3
4
5
6
7
| <template>
<div class="feature">
<div class="header">
<slot :value="test" aaa="111"></slot>
</div>
</div>
</template>
|
使用:
1
2
3
| <Feature>
<h1 slot-scope="props">{{props.value}} {{props.aaa}} {{test}}</h1>
</Feature>
|
6. vue修饰符
在上例使用的 event.pr巳ventDefault()也可以用 Vue 事件的修饰符来实现，在@绑定的事件后加 小圆点”.”，再跟一个后缀来使用修饰符。 Vue支持以下修饰符:
- .stop
- .prevent
- .capture
- .self
- .once
- .lazy
- .trim
- .number
具体用法如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<a @click.stop="handle"></a>
<form @submit.prevent="handle"></form>
<a @click.stop.prevent="handle"></a>
<form @submit.prevent></form>
<div @click.capture="handle">...</div>
<div @click.self="handle">...</div>
<div @click.once="handle">...</div>
|
在表单元素上监昕键盘事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法: 只有在 keyCode 是 13 时调用 vm.submit()
1
| <input @keyup.13="submit">
|
也可以自己配置具体按键: Vue.config.keyCodes.f1 = 112; //全局定义后，就可以使用自 keyup.f1 例如:
1
2
3
4
|
<input @keyup.shift.83="handleSave">
<div @click.ctrl="doSomething">Do something</div>
|
除了具体的某个 keyCode 外， Vue 还提供了 一些快捷名称，以下是全部的别名:
- .enter
- .tab
- .delete (捕获”删除”和”退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right 这些按键修饰符也可以组合使用，或和鼠标一起配合使用:
- .ctrl
- .alt
- .shift
- .meta (Mac 下是 Command 键， Windows 下是窗口键)
7. 自定义组件的v-model
实现一个具有双向绑定的v-model组件要满足下面两个需求
接收一个 value 属性
在有新的 value 时触发 input 事件
1
2
3
4
5
6
7
8
9
| <div id="app">
<price-input :value="price" @input="onInput"></price-input>
<p>{{price}}</p>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| Vue.component('price-input', {
template: '<input :value="value" @input="updateVal($event.target.value)" type="text">',
props: ["value"],
methods: {
updateVal: function(val) {
this.$emit('input', val);
}
}
});
var app = new Vue({
el: '#app',
data: {
price: ''
},
methods: {
onInput: function(val) {
this.price = val;
}
}
});
|
