Vue选项

1.数据和方法

数据选项（data）：数据选项可接受的类型有对象和函数，不过在定义一个组件时只能使用函数类型

let vm = new Vue({
    el:"#app",
    data:{//对象类型
           title:'A Vue App'
}
})
let vm = new Vue({
    el:"#app",
    data(){
    return {
        title:'A Vue App'
        }
    }
})

属性选项(props)：可以是数组或者对象类型，用于接收从父组件传递过来的参数，并允许开发者为其设置默认值、类型检测和校验规则等。

Vue.component('color-text',{
    props: {
        text: String,
        color: {
            type: String,
            default: '#000',
            required: true,
            validator (value) {
                return /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(value)
            }
        }
    }
})

方法选项（methods）：在当前选项中可以定义需要使用的方法

计算属性（computed选项）：设计的初衷在于减轻模板上业务负担，当数据链上出现复杂的衍生数据时，我们更期望使用一种易于维护的方式去使用它。

let vm = new Vue({
    el:"#app",
    data() {
        return {
            message: 'WAS IT A CAR'
        }
    },
    computed: {
        noSpaceMsg(){
            return this.message.replace(/\s/g,'')
        },
        palindromeMsg(){
            return this.message.replace(/\s/g,'').split('').reverse().join('')
        }
    }
})

侦听属性（watch选项）：Vue允许开发者使用侦听属性（watch选项）为实例添加被观察对象，并在对象被修改时调用开发者自定义的方法。

由于watch更注重处理数据变化使得业务逻辑，而computed更注重于衍生数据，因此，与computed相比，watch还优于可以异步修改数据。（关于methods、computed、watch的更加详细的区别，会有另外的帖子做进一步记录，现在暂不展开）。

2.DOM渲染

指定被挂载元素（el选项）：el选项可用于指定Vue实例的挂载目标，属性值仅限于CSS选择器或者DOM节点对象。

let vm = new Vue({
    el:'#app',//选择器
    data() {
        return {
            msg:'hello world'
        }
    }
})
let vm = new Vue({
    el:document.getElementById('app')//HTML Element
    data() {
        return {
            msg:'hello world'
        }
    }
})
let vm =new Vue({
    data(){
        return {
            msg:'hello world'
        }
    }
})
let handleMount = function(){
    vm.$mount('#app')
}

视图中的字符串模板（template选项）：Vue允许开发者使用字符串作为实例的模板，模板字符串由template选项接收。

let vm = new Vue({
    el:'#app',
    template: '<h1>template element</h1>'//模板节点将替换原有的DOM节点
})

渲染函数（render函数）：render函数同样也可以用于渲染视图，它提供了回调方法createElement以供我们创建DOM节点。

render （createElement）{
    //使用render函数渲染DOM
    /*
        createElement可接受三个参数
        1.HTML标签字符串（String）|组件选项对象（object）|节点解析函数（function）
        2.定义节点特性的对象
        3.子节点，createElement构建的VNode节点或者字符串生成的无标签文本节点（Array|String）
     */
}

选项优先级：el、template、render三个选项的功能是一致的---获取实例模板（指定或者创建），但是三个选项的优先级是render>template>el。