Vue2.0 学习笔记

Vue2

Vue对象实例

实例

var vm =  new Vue()

/* eslint-disable no-new */
new Vue()

var vm =  new Vue({
  el: '#app',  //挂载节点
  template: '', //字符串模板
  components: { App },
  data: { 
    a: 1 
  }
})

访问实例属性与方法

//vm.a只能用作于访问data属性
//vm.$data.a 在属性前面加$可以访问vm对象的属性与方法
var vm =  new Vue({
  el: '#app',
  template: '',
  components: { App },
  data: { a: 1}
})
console.log(vm.$data.a) // 1
console.log(vm.a)  // 1

---

Vue基本概念

全局api

Vue.use

//安装 Vue.js 插件 例如:vue-resource  
import vueResource from 'vue-resource'

Vue.use(vueResource);

Vue.component

//这里注册了一个全局组件
Vue.component( 'jianjun', {
  template: '
报告非凡哥 {
     { msg }}
',
  data(){
    return {
      msg: '我话你啵嘴就啵嘴'
    }
  }
})

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象（自动调用 Vue.extend）
Vue.component('my-component', { /* ... */ })

// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('my-component')

Vue.extend

//使用基础 Vue 构造器，创建一个“子类”。
//data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

• -

选项 (创建Vue实例对象可以使用的选项)

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。

这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同， this.fetchTodos 的行为未定义。

data

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 }
  }
  //缩写
  data () {
    return { a: 1 }
  }
})

el

var vm = new Vue({
  el: '#app', //提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
  template: xxx,
  components: xxx,
  data: {
    xxx
  }
})

template

var vm = new Vue({
    el: xxx,
    template: '', //一个字符串模板作为 Vue 实例的标识使用。
    components: {  },
    data: {
      xxxx
    }
})

methods

//methods 将被混入到 Vue 实例中。
var vm = new Vue({
    el: xxx
    components: xxx
    data (){
        xxxx
    }
    methods: {
      say: function () {
     
        console.log("吔屎啦,梁非凡!")
      }
    }
})
vm.say() //可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。

实例属性/方法（Vue实例可以调用的属性/方法）

vm.$data

Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。

vm.$el

Vue 实例使用的根 DOM 元素。

vm.$on、vm.$emit

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

vm.$on('test', function (msg) {
     
 console.log(msg)
})
vm.$emit('test', 'hi')
// -> "hi"

//有点脑抽的想法  ↓↓↓↓↓↓↓↓
var vm = new Vue({
    el: xxx,
    data:{
        sum: 0
    },
    methods:{
        play(){
            this.$emit('diy')
        },
        sayTotal(){
          this.sum += 1
        }
    }
})
vm.$on('click', function () {
     
  vm.sayTotal()
})

<p @diy="sayTotal">{
     { sum }}p>
<button @click="play">吔屎啦button>

指令

v-text

//js
var vm = new Vue({
  el: '#app',
  data: {
    msg: '报告非凡哥',
    msg2: '吔屎啦!'
  }
})

// html
"app">
 <p v-text="msg">p>
  <p>{
     { msg }}p>
  <p v-text="msg2">p>
  <p>{
     { msg2 }}p>
div>

结果 ---没有解析字符串
报告非凡哥
报告非凡哥
吔屎啦!
吔屎啦!

v-html

//js
var vm = new Vue({
  el: '#app',
  data: {
    msg: '报告非凡哥',
    msg2: '吔屎啦!'
  }
})

//html
"app">
  <p v-html="msg">p>
  <p v-html="msg2">p>
div>

结果 ---解析会解析字符串
报告非凡哥
吔屎啦!

v-show

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

//根据表达式之真假值，切换元素的 display CSS 属性。
"app">
  <p v-show="true">我系非凡哥p>
  <p v-show="false">我系屎坑王p> 
div>

v-if 、v-else 、v-else-if

//根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是