Vue2.0 学习笔记

Vue2

Vue对象实例

实例

var vm =  new Vue()

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

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

访问实例属性与方法

//vm.a只能用作于访问data属性
//vm.$data.a 在属性前面加$可以访问vm对象的属性与方法
var vm =  new Vue({
  el: '#app',
  template: '<App/>',
  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: '<p>报告非凡哥 {{ msg }}</p>',
  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: '<jianjun></jianjun>', //一个字符串模板作为 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: '<strong>吔屎啦!</strong>'
  }
})

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

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

v-html

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

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

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

v-show

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

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

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

//根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。
//当条件变化时该指令触发过渡效果。
<div id="app">
  <p v-if="false">我系非凡哥1</p><!--true -->
  <p v-else>我系非凡哥2</p><!--true -->
  <p v-if="false">我系非凡哥3</p><!--false -->
  <p v-else-if="false">我系非凡哥4</p><!--false -->
  <p v-else>我系非凡哥5</p><!--true -->
</div>

//相当于
if(){
  显示:我系非凡哥1
}else{
  显示:我系非凡哥2

}

if(){
  显示:我系非凡哥3
}else if(){
  显示:我系非凡哥4
}else{
  显示:我系非凡哥5
}

v-for

//js
var vm = new Vue({
  el: '#app',
  data: {
    sayList:[
      { msg: '吔屎啦,梁非凡! x1' },
      { msg: '吔屎啦,梁非凡! x2' },
      { msg: '吔屎啦,梁非凡! x3' },
      { msg: '吔屎啦,梁非凡! x4' },
      { msg: '吔屎啦,梁非凡! x5' },
    ]
  }
})

<!--html-->
<div id="app">
  <p>非凡:昨天怎么不上班!</p>
  <p v-for="say in sayList">醒哥: {{ say.msg }}</p>
  <p v-for="(say, index) in sayList" >醒哥: {{ say.msg }} | {{ index }}</p>
</div>

//结果
<p>非凡:昨天怎么不上班!</p>
<p>醒哥: 吔屎啦,梁非凡! x1</p>
<p>醒哥: 吔屎啦,梁非凡! x2</p>
<p>醒哥: 吔屎啦,梁非凡! x3</p>
<p>醒哥: 吔屎啦,梁非凡! x4</p>
<p>醒哥: 吔屎啦,梁非凡! x5</p>

<p>醒哥: 吔屎啦,梁非凡! x1 | 0</p>
<p>醒哥: 吔屎啦,梁非凡! x2 | 1</p>
<p>醒哥: 吔屎啦,梁非凡! x3 | 2</p>
<p>醒哥: 吔屎啦,梁非凡! x4 | 3</p>
<p>醒哥: 吔屎啦,梁非凡! x5 | 4</p>

v-on

修饰符传送门

<!-- 用在普通元素上时，只能监听 原生 DOM 事件。 -->

<!--监听单个事件-->
<button v-on:click="sayA">方法处理器</button>
<button @click="sayA">方法处理器</button>
<button @click="sayA('非凡哥',$event)">方法处理器</button>

<!--使用修饰符-->
<button @click.stop="sayA">停止冒泡</button>
<button @click.prevent="sayA">阻止默认行为</button>
<input type="text" @submit.prevent> <!--阻止默认行为，没有表达式-->
<button @click.stop.prevent="sayA">串联修饰符</button>
<input @keyup.enter="sayA"><!-- 键修饰符，键别名 -->
<input @keyup.13="sayA"><!-- 键修饰符，键代码 -->
<button @click.once="sayA">点击回调只会触发一次</button><!-- 点击回调只会触发一次 -->

<!--监听多个事件 但调用的方法不能传参数-->
<button v-on="{ mousedown: sayA, mouseup: sayB}"></button>

<!-- 用在自定义元素上时 -->
<!--监听子组件触发的自定义时间-->
<!--html-->
<div id="on-click">
   <p>{{ total }}</p>
   <jianjun v-on:diy-son="eatTotal"></jianjun>
</div>

//注册组件  js代码
Vue.component('jianjun', {
  template: '<button v-on:click="eat">吔 +{{ counter }}!</button>',
  data() {
    return {
      counter: 0
    }
  },
  methods:{
    eat(){
      this.counter+=1
      this.$emit('diy-son')
    }
  }
})
//创建一个 Vue 的根实例
var vm = new Vue({
    el: '#on-click',
    data: {
        total: 0,
    },
    methods:{
        eatTotal(){
            this.total += 1
        }
    }
})

请注意不是子组件自定义监听是如何实现的,理清楚$on、v-on、$emit三者的关系

• v-bind

内置组件

组件

模板语法

列表渲染

class与style

条件渲染

事件处理器

表单控件绑定

计算属性

过渡效果

自定义组件

插件

awesome vue(有很多vue试用插件)

时间插件(vue-date-picker)

单文件组件

vue-cli

es6

vue-router

动态路由配置

嵌套路由

编程式导航

命名式路由

命名式视图

重定向

HTML5History模式

router-link

router-view

路由信息对象

Vuex

State

Mutations

Actions

Getters

Modules

vue-resource

json-server

问题

<template>内置组件?

data里面的数据a.list=true b完全没有list属性 在循环下取不到值为什么:if判断是true或是其他

箭头函数的this表示什么,如何理解绑定父级上下文