vue 选项

数据和方法

数据和方法类型的选项是Vue实例选项中最重要的内容，用好这些足以支持开发者创建一个完整的Vue应用。

数据选项

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

 

属性选项

Vue为组件开发提供了属性（props）选项，我们可以使用它为组件注册动态特性，以处理业务间的差异，使代码可以复用于相似的应用场景。props选项可以是数组或者对象类型，用于接收从父组件传递过来的参数**，并允许开发者为其设置默认值、类型检测和校验规则等。

 

方法选项

//代码1
let storel={
msg:’He11o World'，logMsg；function）{
console.log（'-----—-匿名函数—-\n’，this）
console.log（this.msg）
store1.logMsg（）
//代码2
let store2={
msg:’Hel1o World'，logMsg:（）=>{
console.log（'---------—-箭头函数——\n’，this）
console.log（this.msg）
store2.logMsg）

 

 

使用箭头函数定义方法时并不会创建函数作用域，因此this也不会指向其父级实例，此时的this会向上追踪。当找到某个函数作用域时，this将指向该函数的父级实例；否则，this将指向浏览器的内置对象Windows。

关于methods选项唯一的一点就是不要用箭头函数在其中定义方法。在创建组件时，methods中的方法将被绑定到Vue实例上，方法中的this也将自动指向Vue实例。此时，如果使用箭头函数的话，this将无法正确指向Vue实例，这会带来不必要的麻烦。

 

计算属性

开发者有权定义可被赋值的computed属性，方法类似于定义对象属性描述符中的setter和getter，示例代码如下

<template>
    <div id="app">
        <h3>computed选项重构</h3>
        <p>{{msg}}</p>
        <p>{{notEmptyMsg}}</p>
        <p>{{toLowerCaseMsg}}</p>
        <button @click="changeMsgMethod">{{changeMsg}}</button>
    </div>
</template>
​
<script>
    export default {
        name: "compute",
        data() {
            return {
                msg: 'WHO IS YOUR LOVE? XIAO QIAO OR DA QIAO?'
            }
        },
        methods: {
            changeMsgMethod() {
                this.msg ='BOTH ARE MY WIVES, I DON\'T DO CHOICE.';
            }
        },
        computed: {
            notEmptyMsg() {
                return this.msg.replace(/\s/g, '');
            },
            toLowerCaseMsg() {
                return this.msg.toLowerCase()
            },
            changeMsg() {
                    return this.msg.toLowerCase()
            }
        }
    }
</script>
​
<style scoped>
​
</style>

 

 

侦听属性

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

<template>
    <div id="app">
        <h3>监听器</h3>
        <label>小乔:
            <p>{{xiaoQiao}}</p>
        </label>
        <label>大乔:
            <p>{{daQiao}}</p>
        </label>
        <button @click="wearBikini">改变着装</button>
    </div>
</template>
​
<script>
    export default {
        name: "watch1",
        data() {
            return {
                xiaoQiao: '我是小乔,我今天穿什么衣服,大乔也要穿什么衣服',
                daQiao: '我是大桥,小乔今天穿什么衣服,大乔就穿什么衣服'
​
            }
        },
        methods: {
            wearBikini() {
                this.xiaoQiao = '今天穿' + Math.ceil(Math.random() * 1000) + "型号比基尼"
            }
        },
        watch: {
            xiaoQiao(newV, oldV) {
                // axios({//发送ajax异步请求
                //     method: 'GET',
                //     ur1: '/someur1',
                //     params: {
                //         message: newValue
                //     }
                // }).then(res => {
                //     this.daQiao = res.data.message//接收响应后，异步修改数
                // })
                console.log('lodV:' + oldV + ',newV:' + newV);
                this.daQiao = newV;
            }
        }
    }
</script>
​
<style scoped>
​
</style>

 

 

 

 

此外，Vue还为watch选项提供了丰富的声明方式，如：

 

 

 

 

 

DOM渲染

指定被挂载元素

el选项可用于指定Vue实例的挂载目标，属性值仅限于CSS选择器或者DOM节点对象。选项的相关用法如下所示：

 

 

 

 

 

 

 

渲染函数render

render函数同样也可以用于渲染视图，它提供了回调方法createElement以供我们创建DOM节点，下面来看一段

 

选项的优先级

render》template 》 el

 

 

封装复用

过滤器

<template>
    <div id="app">
        <p>没有过滤器: {{msg}}</p>
        <p>过滤#: {{msg | remove1}}</p>
        <p>过滤器# @: {{msg | remove1 | remove2}}</p>
        <p>过滤器# @ %: {{msg | remove1 | remove2 | remove3}}</p>
    </div>
</template>
​
<script>
    export default {
        name: "filter",
        data() {
            return {
                msg: '我是谁#@#%##%@,我在哪'
            }
        },
        filters: {
​
            remove2(value) {
                console.log(value)
                return value.replace(/@/g, '')
            },
            remove3(value) {
                console.log(value)
                return value.replace(/%/g, '')
            }
        }
    }
​
​
</script>
​
<style scoped>
​
</style>

import Vue from 'vue'
import App from './App.vue'
​
Vue.config.productionTip = false
​
Vue.filter('remove1', value=>{
  return value.replace(/#/g, '')
​
})
let vms = new Vue({
  render: h => h(App),
});
vms.$mount('#app')

 

 

 

 

自定义指令

我们接触过一些Vue提供的“开箱即用”的指令，如v-bind、v-on、v-model等。除了这些指令外，Vue也允许我们使用一些自定义的指令。在组件和实例中，这些自定义指令应该被声明在directives选项中。Vue为自定义指令提供了如下几个钩子函数（均为可选）：

●bind：指令与元素绑定时调用。

●inserted：指令绑定的元素被挂载到父元素上时调用。

●update：指令所在VNode更新时调用，可能发生在其子VNode更新之前。

●componentUpdated：指令所在VNode及其子VNode全部更新后调用。

●unbind：指令与元素解绑时调用。

钩子函数会被传入以下参数：

●el：指令所绑定元素，可用于操作DOM。

●binding：包含指令相关属性的对象。binding包含以下属性：

●name：指令名称。

●value：指令绑定的值，如在v-some=“22”中，绑定值为4。

●oldValue：指令值改变前的值，仅在update和componentUpdated钩子函数中可用。

●expression：字符串类型的指令表达式，如在v-some=“22”中，值为“2*2”。

●arg：传给指令的参数，如在v-some:someValue中，值为“someValue”。

●modifiers：修饰符对象，如在v-some.upper中，值为{upper: true}。

●vnode：虚拟节点。

●oldNode：虚拟节点更新前的值，仅在update和componentUpdated钩子函数中可用。

<template>
    <div id="app">
        <h3>自定义指令</h3>
        <p> 自定义大小写 原文 {{msg}} </p>
        <p v-some.upper>自定义大写: {{msg}}</p>
        <p v-some.lower> 自定义大小写: {{msg}}</p>
        <p v-style="style"> 自定义修改样式: {{msg}}</p>
        <button @click="changeStyle"> 修改样式 </button>
    </div>
</template>
​
<script>
    export default {
        name: "customCmd",
        data() {
            return {
                msg: 'WHO IS you wives? XIAO QIAO OR da QIAO?',
                style: {}
​
            }
        },
        methods: {
            changeStyle() {
                this.$set(this.style, 'color', '#145')
                this.$set(this.style, 'transform','rotateX(45deg)')
            }
        },
        directives: {
            style: {
​
                bind(el, binding, vNode) {
                    console.log("el:%o\nbind:%o\nvNode:%o", el, binding, vNode)
                    let styles = binding.value
                    Object.keys(styles).forEach(key => el.style[key] = styles[key])
                }
                ,
                update(el, binding, vNode, oldVnode) {
                    console.log("el:%o\nbind:%o\nvNode:%o\noldVnode:%o", el, binding, vNode, oldVnode)
                    let styles = binding.value
                    Object.keys(styles).forEach(key => el.style[key] = styles[key])
                }
            }
            ,
            //在bind和update时触发相同行为，且无需定义其他钩子函数
            //指令可以简写为以下形式
            some(el, binding) {
                let text = el.innerText
                let modifiers = binding.modifiers
                if (modifiers.upper) { //如果带有upper后缀，则大写文本
                    el.innerText = text.toUpperCase()
                }
                if (modifiers.lower) {//如果带有1ower后缀，则小写文本
                    el.innerText = text.toLowerCase()
                }
            }
        }
    }
​
</script>
​
<style scoped>
​
</style>

 

 

 

组件的注册

components选项用于为组件注册从外部引入的组件，由于子组件并非在全局定义，因此不可以直接在父组件的作用域内使用。选项常见的应用场景有引入第三方库中的组件和自定义组件等。