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：计算属性，根据其他的值计算出另一个结果。它的重要的特点是每次改变前使用缓存值，如果依赖的值没有改变则不计算。

    
        
        
        {{fullName}}

计算属性的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

事件修饰符：由点开头的指令后缀来表示
按键修饰符：将常用的按键以别名的形式便于业务场景控制

循环指令

循环指令：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同用

   
       
           {{index+1}}:{{item.title}}
           {{item.content}}

条件指令

v-if根据条件显示或隐藏（操作的是dom），一般结合v-else使用，必须紧贴一起使用

    
        This is A
        This is B
        This is Other

注意：vue在渲染dom的时候会尝试复用已经存在的dom，如果不需要这样，可以给对应的dom元素在上key值，表示唯一性。

4、组件注册

全局注册

直接注册，可以全局使用

    // 全局注册组件
    Vue.component('my-component', {
        template: 'Hi! vue'
    })

局部注册

    //可以直接写，使用脚手架的时候一般是一个.vue单组件
    var Child = {
        template: 'A custom component!'
    }
    new Vue({
        components: {
            Child //es6的写法，当键和值一样的时候，可以省略写。这个时候使用：''渲染
        }
    })

5、父子组件通信

父-->子（`props`）

假设子组件叫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`）

父组件中使用

    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属性可以定义组件名

结合 component 构建动态组件

一般结合计算属性使用，根据场景改变 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]获得对应的绑定数据

new Vue({
    el:'#parent',
    mouted(){
        //获取dom节点或组件的引用及绑定在组件上的数据
        console.log(this.$refs.pagefooter)
    }
})

注意：$refs只在组件渲染完成后才填充，并且它是非响应式的

9、slot插槽

不完全使用组件的HTML，有自定义的HTML的时候使用。



  我是子组件的标题
  
    自定义的HTML在这渲染


  我是父组件的标题
  
    11
    22

渲染结果：


  我是父组件的标题
  
    我是子组件的标题
    11
    22

多个插槽：可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字

渲染结果为：

10、keep-alive

抽象组件：主要用于缓存不活动的组件实例

export default {
    data () {
        return {
            test: true
        }
    },
    methods: {
        handleClick () {
            //点击组件发生切换，组件的状态被缓存，内容不会因为组件的切换而消息
            this.test = !this.test;
        }
    }
}

如果有的时候缓存的组件需要重新请求接口或重新渲染，可以结合使用 activated 和 deactivated 这两个钩子，它们在组件切换的时候会执行。

vue