vue基础学习（一）

本文主要记录学习vue的一些基础内容及常用知识点的记录。原文参加个人博客：[vue基础]（http://webhmy.com/2018/05/24/vue-base/）

1、脚手架命令

vue init webpack vue-demo 初始化
npm install 安装包依赖
npm run dev 启动可以实现热加载

2、常用参数

基本参数

data：绑定的数据
methods：方法，this可以指向data中的数据
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）
事件绑定：v-on:click 或者 @click 后面是methods中的方法，可以写一些键盘事件，比如@keyup.enter
属性指令：:class="{red: isRed}" :class="[classAName,{classB: isB}]"
其中，classAName 就是类名，但是 isB 是布尔值
表单指令：v-model

循环指令

基本使用：v-for="(item,index) in items"在每条数据的事件绑定可以将数据放在方法里，
例如：v-on:click=cancelEvt(item)

1.结合使用:key="item.id"提升渲染的性能，key必须是唯一性标注
2.不可通过下标的方法改变数据值(数据变化但视图不变)，尽量使用数组的原生方法（push/pop/shift/unshift/splice）或者直接改变整个数据的引用或者使用set方法，
例如：vm.$set(vm.items,2,{...})

3.渲染的内容必须在一个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、组件注册

全局注册

    <div id="box">
        <my-component></my-component>
    </div>

    <script>
        // 全局注册组件
        Vue.component('my-component', {
            template: '<p>Hi! vue</p>'
        })
        // 创建根实例
        new Vue({
            el: '#box'
        })
    </script>

显示结果

    <div id="box">
        <p>Hi! vue</p>
    </div>

局部注册

    var Child = {
        template: '<div>A custom component!</div>'
    }
    new Vue({
        components: {
            'my-component': Child
        }
    })

5、组件模板

直接定义

Vue.component('myheader',{
    template:'<div></div>',
    data(){...}
})

模板定义

<script type="text/x-template" id="myheader">
    //这里的模板中的数据必须包含在一个父级标签中
</script>

Vue.component('name',{
    template:'#myheader', //这里可以直接写html代码，也可以写模板的ID
    data(){...}
})

6、组件通信

1.父元素向子元素传递数据（通过props选项）：

父组件中使用

<!-- 父组件将值放在属性中-->
<mySun mumtell="你是我的儿子"></mySun>

子组件定义

//在.vue的文件中`export default{}` 会自动实例化一个`new Vue({})`
export default {
  props: ['mumtell'],//子获取父的值，然后通过this.mumtell就可以获取对应的值了
};

单向数据流：子组件不可以随意的修改从父组件传过来的参数，防止引用数据的共同改变。可以直接在子组件里复制一份父传来的值

2.子元素向父元素传递数据（通过$emit事件传送）：

父组件中使用

<!-- 父组件使用子组件 -->
<mySun v-on:myboy="youson"></mySun>
<p>{{sonmsg}}</p>

import mySun from './mySun.vue'
export default {
    data() {
        return {
            sonmsg:""
        };
    },
    methods: {    
        youson(msg){
            this.sonmsg = msg;
        }
    },
    components: { mySun }
};

子组件定义

export default {
    data() {
        return {
            msg: "我是app的子组件"
        }
    },
    methods: {
        subClick() {
        //儿子告诉爸爸的话用事件触发
        this.$emit('myboy',this.msg)
        }
    }
}

7、动态组件

动态组件，是利用is属性改变组件的渲染方向，比如

<component v-bind:is="currentTabComponent"></component>

如果这个时候currentTabComponent值决定渲染的组件名，一般可结合计算属性一起使用。is属性也可以放在特定的嵌套的标签中，保证渲染不出错。

<table>
  <tr is="subItem"></tr>
</table>