Vue2.0 快查手册近期需要接受Vue技术栈的项目，故开始快速学习上手。本文的写作背景是：过一遍vue文档，记录常用

前言：过一遍文档，记录常用api和开发范式。写给自己看的哈。

根实例

一个Vue实例对应一个vue应用。

const root = new Vue({
    el: '#app',
    data() { ... },
    methods: { ... },
    created() { ... }
})

数据

const vm =  new Vue({
    data:{
        num: 1
    }
})

vue中数据是响应式的。
但只有写在data中的数据才是响应式的。

vm.counter = 0

上述写法中的counter则不是响应式的。

生命周期

注意：不要在箭头函数当中使用this，那不会得到预期的结果！

渲染函数`render` vs 模板

一般情况下Vue采用template方式进行开发，但同时支持render函数结合jsx的方式。

模板方式

<template>
    <div v-if="show"> 
        hello vue 
        <button @click="changeShow"> change </button>
    </div>
</template>
<script>
    export default Vue.extend({
        components: {
            Nav
        },
        data(){
            show: true
        },
        methods:{
            changeShow(){
                this.show = !this.show
            }
        }
    })
</script>

render & jsx

    import App from "./app" // app为一个组件
export default Vue.extend({
    components: {
        Nav
    },
    data(){
        show: true
    },
    methods:{
        changeShow(){
            this.show = !this.show
        }
    }
    render: h => h(App)
})

模板语法

插值

文本插值：{{ variable}}
属性插值：<div v-bind:id="id" />
js表达式: <div :id=" flag?'a':'b' " />

指令系统

v-bind
v-on

修饰符

v-on:click.prevent // 等效于preventDefault

计算属性和侦听器

computed

对于重复使用的复杂逻辑，使用computed进行简化。

new Vue({
    data: {
        name: ...
    },
    computed:{
        reverseName() {
            return this.name.split('').reverse().join('')
        }
    }
})

watch

特别在意某个变量的改变，可以使用watch。

new Vue({
    data: {
        counter: 99
    },
    watch() {
        counter(val,oldVal) {
            console.log(val,oldVal)
        }
    }
})

class与style

class

对象方式

<template>
    <div :class="{ big-font: isBigFont, red-font: isRedFont }"> Hello,Vue </div>
</template>
<script>
    ...
    data() {
        isBigFont: true,
        isRedFont: false
    }
</script>

数组方式 （常用）

<template>
    <div :class="[ 'big-font', isRedFont? 'red-Font' : '' ]"> Hello,Vue </div>
</template>
<script>
    ...
    data() {
        isBigFont: true,
        isRedFont: false
    }
</script>

class × 自定义组件
当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

style

<div :style="{ fontSize: bigFont? '18px' : '14px' }" />

条件渲染

v-if="ok"

v-if + template
想要同时控制多个元素显示的时候可以使用如下方式

<template v-if="show"> 
    <div> i am div </div>
    <span> i am span </span>
</template>

v-show="ok"
1. v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2. v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
3. 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

基础使用

// items = [ 1 , 3 , 6 ]
<ul id="example-1"> 
    <li v-for="(item,key) in items" :key="item"> {{ item }} </li> 
</ul>

v-for × 对象

<ul id="example-1"> 
    <li v-for="(value , key) in obj" :key="value"> {{ value }} </li> 
</ul>

tips： vue无法检测数组和对象的变更。

事件

事件指令: v-on

带参事件

<div @click="toast('hello')" />
...
methods: {
    toast(text) {
        ...
    }
}

修饰符

表单

用到再参考文档： vue 表单文档

关于组件

组件注册

全局注册

Vue.component('my-component-name', {  
    // ... 选项 ... 
})

局部注册

const MyComponent = Vue.extend({ ...构造选项... })
const vm = new Vue({
    el: '#app',
    components: {
        MyComponent // 最常用的方式
        // or
        'my-component': MyComponent,
        // or
        
    }
})

使用时，都使用小写+横线方式 <my-component> </my-component>

props 属性

注册props

数组方式：props: ['title', 'name']

对象方式：

props: {
    'title': String,
    'name': String
}

传值
tips：传入一个对象的所有属性，可以使用不带参数的v-bind，直接将该对象传入。

// propsObj = { title: 'xxx', likes: 99 }

<my-component v-bind="propsObj" />
// 等价于
<my-component v-bind:title="propsObj.title" v-bind:likes="propsObj.likes" />

单向数据流原则
遵守 父组件 ===> 子组件 的数据流向。
禁止子组件修改props。

自定义事件

父组件定义事件，子组件通过 $emit 触发事件。
- $emit(event-name, args)

事件名最好采用kebab-case命名方式
子组件可以通过 $emit 第二个参数抛出参数。

其他内容待更新...

Vue2.0 快查手册

根实例

数据