vue学习笔记之基础篇
本文主要记录学习vue的一些基础内容及常用知识点的记录。
1、搭建脚手架
vue init webpack vue-demo
初始化一个使用webpack打包的vue项目
npm install
安装包的默认依赖
npm run dev
启动可以实现热加载
npm install vuex --save
安装其他包的命令,例如vuex
2、常用参数
基本参数
vue是一个MVVM框架,不再通过操作dom做交互,而是把重点放在数据层,可以分为:
data
:绑定的数据,可以是基本类型和引用类型methods
:视图绑定的方法components
:局部组件的注册使用
监听属性
watch
:数据监听,监听data中的数据,如果对应的数据改变,则执行监听逻辑
计算属性
computed
:计算属性,根据其他的值计算出另一个结果。它的重要的特点是每次改变前使用缓存值,如果依赖的值没有改变则不计算。
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<span>{{fullName}}</span>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
firstName:'',
lastName:''
},
computed:{
fullName(){
return this.firstName + this.lastName
}
}
})
</script>
计算属性的getter 和 setter,可以处理双向更改
computed:{
fullName:{
get(){
return this.firstName + this.lastName
},
set(val){
var valArr = val.split(',');
this.firstName = valArr[0];
this.lastName = valArr[1]
}
}
}
如果计算属性和监听属性都能做的事,优先使用计算属性~
3、vue指令
简单指令
- 数据模板渲染:
v-text
v-html
- 控制显示隐藏:
v-show
(操作的是css属性display:none
) - 属性指令:
:class="{red: isRed}"
:class="[classAName,{classB: isB}]"
其中,classAName
就是类名,但是isB
是布尔值 - 表单指令:
v-model
事件指令
事件绑定:v-on
或者 @
后面是methods中的方法,如@click
-
事件修饰符:由点开头的指令后缀来表示
-
按键修饰符:将常用的按键以别名的形式便于业务场景控制
<!-- .enter -->
<!-- .tab -->
<!-- .delete -->
<!-- .up -->
<!-- .down -->
<!-- .left -->
<!-- .right -->
<input @keyup.enter="submit">
循环指令
循环指令:v-for="(item,index) in items"
- 结合使用
:key="item.id"
可以提升渲染的性能,key必须是唯一性标注 - 不可通过下标的方法改变数据值(数据变化但视图不变),尽量使用数组的原生方法(push/pop/shift/unshift/splice)或者直接改变整个数据的引用或者使用set方法,
set方法:
vm.$set(vm.items,2,{...})
- 渲染的内容必须在一个dom节点里,可以使用
template
的占位符,用于包裹元素,但是不可与key同用
<div id="app">
<div v-for="(item,index) of list" :key="item.id">
<p>{{index+1}}:{{item.title}}</p>
<span>{{item.content}}</span>
</div>
</div>
条件指令
v-if
根据条件显示或隐藏(操作的是dom),一般结合v-else
使用,必须紧贴一起使用
<div id="app">
<div v-if="char === 'a'">This is A</div>
<div v-else-if="char === 'b'">This is B</div>
<div v-else>This is Other</div>
</div>
注意:vue在渲染dom的时候会尝试复用已经存在的dom,如果不需要这样,可以给对应的dom元素在上
key
值,表示唯一性。
4、组件注册
全局注册
直接注册,可以全局使用
// 全局注册组件
Vue.component('my-component', {
template: '<p>Hi! vue</p>'
})
局部注册
//可以直接写,使用脚手架的时候一般是一个.vue单组件
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
components: {
Child //es6的写法,当键和值一样的时候,可以省略写。这个时候使用:'<child></child>'渲染
}
})
5、父子组件通信
父-->子(props
)
假设子组件叫child
- 父组件使用
<!-- 将值放在属性中-->
<child mumtell="听爸爸的话"></child>
- 子组件定义
export default {
props: ['mumtell'],//子获取父的值,然后通过this.mumtell就可以获取对应的值了
}
- props拓展
可以指定数据的类型
props:{
mumtell:[String] //必须是字符串格式
}
可以指定校验
props:{
type: String,
required: false, // 必传
default: '默认值',// 默认值
validator:function(val){ //自定义校验
return val.length > 5
}
}
单向数据流:子组件不可以随意的修改从父组件传过来的参数,防止引用数据的共同改变。可以直接在子组件里复制一份父传来的值
子-->父($emit
)
- 父组件中使用
<child @tell="sonSay"></child>
import Child from './child'
export default {
methods: {
sonSay(msg){
console.log(msg) // "HI,BABA"
}
},
components: {
Child
}
};
- 子组件定义
export default {
methods: {
subClick() {
let msg = "HI,BABA"
this.$emit('tell',msg);
}
}
}
6、is属性
使用场景:
- 某些情况下(比如组合标签)不可以直接写组件的名字,使用
is
属性可以定义组件名
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template:'<tr>this is tr</tr>'
})
var vm = new Vue({
el: '#app'
})
</script>
- 结合
component
构建动态组件
<component :is="tabName"></component>
<script>
var vm = new Vue({
data(){
return {
tabName: 'Child' //此时渲染成Child组件
}
}
})
</script>
一般结合计算属性使用,根据场景改变
tabName
的值
7、钩子函数
vue的钩子函数,就是vue实例在某个时间点自动执行的函数
-
beforeCreate
: 组件实例刚被创建,组件属性计算之前,使用场景如:可以加上loading事件; -
created
: 组件实例创建已经完成,属性已绑定,但是dom未生成,使用场景如:结束loading时间,做一些初始化的操作; -
beforeMount
: 模板编译/挂载 之前; -
mounted
: 模板编译/挂载 之后;使用场景如:需要dom生成才执行一些初始化的操作; -
beforeUpdate
: 组件更新之前; -
updated
: 组件更新之后; -
beforeDestory
: 组件销毁前 -
destoryed
: 组件销毁后 -
activated
: keep-alive组件激活时调用; -
deactivated
: keep-alive组件停用时调用;
8、ref属性
用于访问组件的对象,指定了ref,就相当于挂载在 $refs
中,可以通过this.$refs[refName]
获得对应的绑定数据
<div id="parent">
<page-footer ref="pagefooter"></page-footer>
</div>
new Vue({
el:'#parent',
mouted(){
//获取dom节点或组件的引用及绑定在组件上的数据
console.log(this.$refs.pagefooter)
}
})
注意:$refs只在组件渲染完成后才填充,并且它是非响应式的
9、slot插槽
不完全使用组件的HTML,有自定义的HTML的时候使用。
<!-- my-component 组件模板 -->
<div>
<h2>我是子组件的标题</h2>
<slot>
自定义的HTML在这渲染
</slot>
</div>
<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>11</p>
<p>22</p>
</my-component>
</div>
渲染结果:
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>11</p>
<p>22</p>
</div>
</div>
- 多个插槽:可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字
<!-- app-layout 组件模板-->
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
<app-layout>
<h1 slot="header">11</h1>
<p>22</p>
<p>33</p>
<p slot="footer">44</p>
</app-layout>
渲染结果为:
<div class="container">
<header>
<h1>11</h1>
</header>
<main>
<p>22。</p>
<p>33</p>
</main>
<footer>
<p>44</p>
</footer>
</div>
10、keep-alive
抽象组件:主要用于缓存不活动的组件实例
<keep-alive>
<coma v-if="test"></coma>
<comb v-else></comb>
</keep-alive>
<button @click="handleClick">切换显示</button>
export default {
data () {
return {
test: true
}
},
methods: {
handleClick () {
//点击组件发生切换,组件的状态被缓存,内容不会因为组件的切换而消息
this.test = !this.test;
}
}
}
如果有的时候缓存的组件需要重新请求接口或重新渲染,可以结合使用
activated
和deactivated
这两个钩子,它们在组件切换的时候会执行。