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) // 1console.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 // -> 1vm.$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

//jsvar 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

//jsvar 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

//jsvar 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表示什么,如何理解绑定父级上下文