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 这两个钩子，它们在组件切换的时候会执行。