API(选项/数据 选项/dom)

选项/数据

data

• 类型： Object | Function

• 限制： 组件的定义只接受function

    var data = { a: 1 }
  
    // 直接创建一个实例
    var vm = new Vue({
      data: data
    })
    vm.a // => 1
    vm.$data === data // => true
  
    // Vue.extend() 中 data 必须是函数
    var Component = Vue.extend({
      data: function () {
        return { a: 1 }
      }
    })
  

props

• 类型：Array | Object

• 详细：

• props可以是数组或对象，用于接收来自父组件的数据。props可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测，自定义校验和设置默认值

    // 简单语法
    Vue.component('props-demo-simple', {
      props: ['size', 'myMessage']
    })
  
    // 对象语法，提供校验
    Vue.component('props-demo-advanced', {
      props: {
        // 检测类型
        height: Number,
        // 检测类型 + 其他验证
        age: {
          type: Number,
          default: 0,
          required: true,
          validator: function (value) {
            return value >= 0
          }
        }
      }
    })
  

propsData

• 类型：{[key:string]:any}

• 限制：只用于new创建的实例中

• 详细：创建实例时传递props。主要作用是方便测试

    var Comp = Vue.extend({
      props: ['msg'],
      template: '<div>{{ msg }}</div>'
    })
  
    var vm = new Comp({
      propsData: {
        msg: 'hello'
      }
    })
  

• propsData Option 全局扩展的数据传递

    <h1>PropsData Option Demo</h1>
            <hr>
        <header></header>
        <script src="vue.js"></script>
        <script type="text/javascript">
                var header_a = Vue.extend({
                    template:`<p>{{message}}</p>`,
                    data:function(){
                        return {
                                message: 'Hello ,I am Header'
                        }
                    }
                });
            new header_a().$mount('header');
        </script>
  

• 我们用propsData三步解决传值

• 1，在全局扩展里加入props进行接收。propsData:{a:1}

• 2、传值时用propsData进行传递。props:['a']

• 3、用插值的形式写人模板。{{a}}

    var header_a = Vue.extend({
    template:`<p>{{message}}--{{a}}</p>`,
    data:function(){
        return {
            message: 'Hello ,I am Header'
        }
    },
    props: ['a']
      });
        new header_a({propsData:{a:1}}).$mount('header');
  

computed

• 类型：{[key:string]:Function | {get: Function,set:function}}

• 详细：计算属性将被混入到vue实例中。所有getter和setter的this上下文自动地绑定为vue实例

• 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖（比如非响应式属性）在改实例范畴之外，则计算属性是不会被更新的

    var vm = new Vue({
      data: { a: 1 },
      computed: {
        // 仅读取
        aDouble: function () {
          return this.a * 2
        },
        // 读取和设置
        aPlus: {
          get: function () {
            return this.a + 1
          },
          set: function (v) {
            this.a = v - 1
          }
        }
      }
    })
    vm.aPlus   // => 2
    vm.aPlus = 3
    vm.a       // => 2
    vm.aDouble // => 4
  

Computed Option

    <h1>Computed Option 计算选项</h1>
    <hr>
    <div id="app">
        {{newPrice}}
    </div>
    <script src="vue.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            price: 100
        },
        computed:{
            newPrice:function(){
                return this.price='￥'+this.price+'元'
            }
        }
    })
    </script>

methods

• 类型：{[key:string]:Function}

• 详细：

• methods将混入到vue实例中，可以直接通过VM实例访问这些方法，或者在指令表达式中使用。方法中的this自动绑定为Vue实例

    var vm = new Vue({
      data: { a: 1 },
      methods: {
        plus: function () {
          this.a++
        }
      }
    })
    vm.plus()
    vm.a // 2
  

Methods Option

<h1>Methods Option 方法选项</h1>
<hr>
<div id="app">
    {{a}}
    <p><button @click="add">add</button></p>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
    el:'#app',
    data:{
        a:1
    },
    methods:{
        add:function(){
            this.a++
        }
    }
})
</script>

watch

• 类型：{[key:string]:string | Function | Object | Array }

• 详细：

• 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性

    var vm = new Vue({
      data: {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: {
          f: {
            g: 5
          }
        }
      },
      watch: {
        a: function (val, oldVal) {
          console.log('new: %s, old: %s', val, oldVal)
        },
        // 方法名
        b: 'someMethod',
        // 深度 watcher
        c: {
          handler: function (val, oldVal) { /* ... */ },
          deep: true
        },
        // 该回调将会在侦听开始之后被立即调用
        d: {
          handler: function (val, oldVal) { /* ... */ },
          immediate: true
        },
        e: [
          function handle1 (val, oldVal) { /* ... */ },
          function handle2 (val, oldVal) { /* ... */ }
        ],
        // watch vm.e.f's value: {g: 5}
        'e.f': function (val, oldVal) { /* ... */ }
      }
    })
    vm.a = 2 // => new: 2, old: 1
  

watch

	<h1>Watch 选项 监控数据</h1>
        <hr>
        <div id="app">
            <p>今日温度：{{temperature}}°C</p>
            <p>穿衣建议：{{this.suggestion}}</p>
            <p>
                <button @click="add">添加温度</button>
                <button @click="reduce">减少温度</button>
            </p>
        </div>
        <script src="vue.js"></script>
        <script type="text/javascript">
        var suggestion = ['T恤短袖','夹克长裙','棉衣羽绒服']
        var app = new Vue({
            el:'#app',
            data:{
                temperature: 14,
                suggestion: '夹克长裙'
            },
            methods:{
                add:function(){
                    this.temperature+=5;
                },
                reduce:function(){
                    this.temperature-=5;
                }
            },
            watch:{
                temperature:function(newVal,oldVal){
                   if(newVal>=26){
                        this.suggestion=suggestion[0];
                    }else if(newVal<26 && newVal >=0)
                    {
                        this.suggestion=suggestion[1];
                    }else{
                        this.suggestion=suggestion[2];
                    }
                }
            }
        })
        </script>

• 用实例属性写watch监控

    app.$watch('xxx',function(){})
  

选项/DOM

el

• 类型：string | HTMLElement
• 限制：只在new创建的实例中遵守
• 详细
• 提供一个页面上已存在的DOM元素作为Vue实例的挂载目标。可以是css选择器，也可以是一个HTMLElement实例
• 在实例挂载之后，元素可以用vm.$el访问
• 如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显示调用vm.$mount()手动开启编译

template

• 类型：string
• 详细
• 一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
• 如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template"> 包含模板。

render

• 类型：(createElement:() => VNode) => Vnode
• 详细
• 字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
• 如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

选项/组合

mixins

mixins一般有两种用途

• 1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。

• 2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

    <h1>Mixins Option Demo</h1>
        <hr>
        <div id="app">
            <p>num:{{num}}</p>
            <p><button @click="add">增加数量</button></p>
       </div>
        <script src="vue.js"></script>
        <script type="text/javascript">
            var addLog = {
                updated:function(){
                    console.log('数据发生变化，变化成'+this.num+".")
                }
            }
           var app = new Vue({
                el: '#app',
                data:{
                    num: 1
                },
                methods:{
                    add:function(){
                        this.num++;
                    }
               },
                updated:function(){
                    console.log('构造器里的updated方法。')
                },
                mixins:[addLog]//混入
                })
  
                // Vue.mixin({ //全局混入的执行顺序要前于混入和构造器里的方法。
                //     updated:function(){
                //         console.log('我是全局被混入的')
                //     }
                // })
            </script>
  

extends 扩展选项

<h1>Extends Option Demo</h1>
    <div id="app">
    {{message}}
    <p><button @click="add">增加数量</button></p>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
    var bbb = {
        created:function(){
            console.log('我是被扩展出来的')
        },
        methods:{
            add:function() {
                console.log('我是被扩展出来的方法！')
            }
        }
    }
    var app = new Vue({
        el: '#app',
        data:{
            message: 'hello Vue!'
        },
        methods:{
            add:function(){
                console.log('我是原生方法')
            }
        },
        updated:function(){
            console.log('构造器里的updated方法。')
        },
       extends:bbb
    })

</script>

选项/其他

delimiters 选项

• delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式

         delimiters:['${','}']
  

• 现在插值形式就变成${}。