vue2.0基础学习

Posted hooyun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue2.0基础学习相关的知识，希望对你有一定的参考价值。

（三）Vue2.0-选项

选项就是在Vue构造器里的配置功能的前缀

propsData

 只用于 new 创建的实例中。

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

propsData在实际开发中我们使用的并不多，我们在后边会学到Vuex的应用，他的作用就是在单页应用中保持状态和数据的。

 

computed

　　computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号等。

　　注意：不应该使用箭头函数来定义计算属性函数 。

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

 

methods

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

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

　　methods中的$event参数：

　　　　有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：

　　　　　　<button @click=”add(2,$event)”>add</button> 

 

　　native  给组件绑定构造器里的原生事件

　　　　在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。

　　　　　　<p><btn @click.native="add(3)"></btn></p>

 

watch

　　数据变化监控。是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。　　

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4
  },
  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
    }
  }
})
vm.a = 2 // => new: 2, old: 1

 

　　有些时候我们会用实例属性的形式来写watch监控。也就是把我们watch卸载构造器的外部，这样的好处就是降低我们程序的耦合度，使程序变的灵活。

app.$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];
    }
 
})

 

mixins

　　mixins选项接受一个混合对象的数组。这些混合实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。　

　 mixins一般有两种用途：

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

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

<script type="text/javascript">
        //全局混入
        Vue.mixin({
            created:function(){
                console.log(‘我是全局被混入的‘);
            }
        })


        var aaa={
            created:function(){
                console.log(‘我是外部被混入的‘);
            }
        }

        var app=new Vue({
            el:‘#app‘,
            data:{
                message:‘hello Vue!‘
            },
            created:function(){
                console.log(‘我是原生的‘);
            },
            mixins:[aaa]
        })
    // 我是全局被混入的
    // 我是被外部引入的
    // 我是原生的

    </script>

　　mixins的调用顺序：

　　　　Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用

　　　　从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。

 

　　PS：当混入方法和构造器的方法重名时，混入的方法无法展现，也就是不起作用

 

 

extend 扩展选项

　　通过外部增加对象的形式，对构造器进行扩展 。

　　   与mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级。

 

delimiters

　　改变纯文本插入分隔符。

new Vue({
  delimiters: [‘${‘, ‘}‘]
})
// 分隔符变成了 ES6 模板字符串的风格

　　现在我们的插值形式就变成了${}

 

 

 

（四 ）实例和内置组件

第一节：实例属性

　　一、vue和jQuery一起使用

　　　　在DOM被挂载后修改里边的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
    <title>Early Examples Demo</title>
</head>
<body>
    <h1>Early Examples Demo</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:‘#app‘,
            data:{
                message:‘hello Vue!‘
            },
            //在Vue中使用jQuery
            mounted:function(){
                $(‘#app‘).html(‘我是jQuery!‘);
            }
        })
    </script>
</body>
</html>

  

　　二、实例调用自定义方法　　

methods:{
    add:function(){
        console.log("调用了Add方法");
    }
}

 　　调用：

　　　　app.add();

 

第二节：实例方法

　　一、vm.$mount()　　　　

　　　　 创建并挂载到 #app (会替换 #app)

　　　　 new MyComponent().$mount(‘#app‘)
 
　　二、vm.$forceUpdate()
　　　　迫使 Vue 实例重新渲染
 
　　三、vm.$nextTick() 数据修改方法
　　　　当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。
 
　　四、$destroy()
　　　　完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
 

第三节：实例事件

　　一、vm.$on( event, callback )

　　　　监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

 

　　二、vm.$once( event, callback )

　　　　听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。

 

　　三、vm.$off( [event, callback] )

　　　　　移除自定义事件监听器。

    • 　　如果没有提供参数，则移除所有的事件监听器；

    • 　　如果只提供了事件，则移除该事件所有的监听器；

    • 　　如果同时提供了事件与回调，则只移除这个回调的监听器。

 

　　四、vm.$emit( event, […args] )

　　　　触发当前实例上的事件。附加参数都会传给监听器回调

 

第四节：内置组件slot

　　slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。

　　slot的使用需要两步：

　　　　1、在HTML的组件中用slot属性传递值

<comp>
    <span slot="bolgUrl">{{jspangData.bolgUrl}}</span>    
    <span slot="netName">{{jspangData.netName}}</span>    
    <span slot="skill">{{jspangData.skill}}</span>    
</comp>

 　　　　2、在组件模板中用<slot></slot>标签接收值

<template id="tmp">
    <div>
        <p>博客地址：<slot name="bolgUrl"></slot></p>
        <p>网名：<slot name="netName"></slot></p>
        <p>技术类型：<slot name="skill"></slot></p>
        
    </div>
</template>

 

以上是关于vue2.0基础学习的主要内容，如果未能解决你的问题，请参考以下文章

vue2.0基础学习

Vue2.0基础学习--- 一个简单的实例学习

vue2.0的变化

学习vue2.0

vue2.0有哪些变化

vue2.0学习笔记之webpack-simple模板中的路由简单配置案例