VUE2.0学习笔记

1.前言

安装

  • 直接用 <script> 引入(本地或者cdn)
  • npm npm install vue
  • vue-cli官方脚手架
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

简介

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层,对应view。

Vue数据驱动,jQuery是结构驱动

原理

内部使用Object.defineProperty(最低支持IE9)把所有属性全部转为 getter/setter,为每个组件绑定了watcher 实例对象,并且把属性作为依赖项,当依赖项的setter调用时,watcher将会重新计算,从而更新组件。

  • [组件render]-<创建>-[getter、setter]-<收集依赖>-[watcher]
  • [触发setter]-<通知>-[watcher]-<触发>-[组件渲染函数]-<更新>-[组件]
    image
image

开发环境

  • vueTools
  • vscode【Vetur、Vue2 Snippets】
  • weboack

2.实例

声明式渲染

<!--html-->
<div id="app">
  {{ message }}
</div>
//js
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

数据与方法

当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 他们引用相同的对象!
vm.a === data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ... 反之亦然
data.a = 3
vm.a // => 3

当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性是响应式的。也就是说如果你添加一个新的属性,将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

自身属性和方法

vue实例自身暴露的属性和方法通过前缀$来获取

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程(生命周期)。在这个过程中会运行一些叫做生命周期钩子的函数,用户可以在不同阶段添加自己的代码来做一些事情。
image

  • beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
  • beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
  • mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
  • beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
  • updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子
  • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
  • activated/deactivated:keep-alive 组件激活/停用时调用,
  • errorCaptured:当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

注意:

  • beforeCreate,created外的钩子在服务器端渲染期间不被调用。
  • 不要在选项属性或回调上使用箭头函数,比如
//错误,会导致this不会指向Vue 实例
created: () => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())

Vue对象的选项

var vm = new Vue({
  // 数据
  data: "声明需要响应式绑定的数据对象",
  props: "接收来自父组件的数据",
  propsData: "创建实例时手动传递props,方便测试props",
  computed: "计算属性",
  methods: "定义可以通过vm对象访问的方法",
  watch: "Vue实例化时会调用$watch()方法遍历watch对象的每个属性",
  // DOM
  el: "将页面上已存在的DOM元素作为Vue实例的挂载目标",
  template: "可以替换挂载元素的字符串模板",
  render: "渲染函数,字符串模板的替代方案",
  renderError: "仅用于开发环境,在render()出现错误时,提供另外的渲染输出",
  // 生命周期钩子
  beforeCreate: "发生在Vue实例初始化之后,data observer和event/watcher事件被配置之前",
  created: "发生在Vue实例初始化以及data observer和event/watcher事件被配置之后",
  beforeMount: "挂载开始之前被调用,此时render()首次被调用",
  mounted: "el被新建的vm.$el替换,并挂载到实例上之后调用",
  beforeUpdate: "数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前",
  updated: "数据更改导致虚拟DOM重新渲染和打补丁之后被调用",
  activated: "keep-alive组件激活时调用",
  deactivated: "keep-alive组件停用时调用",
  beforeDestroy: "实例销毁之前调用,Vue实例依然可用",
  destroyed: "Vue实例销毁后调用,事件监听和子实例全部被移除,释放系统资源",
  // 资源
  directives: "包含Vue实例可用指令的哈希表",
  filters: "包含Vue实例可用过滤器的哈希表",
  components: "包含Vue实例可用组件的哈希表",
  // 组合
  parent: "指定当前实例的父实例,子实例用this.$parent访问父实例,父实例通过$children数组访问子实例",
  mixins: "将属性混入Vue实例对象,并在Vue自身实例对象的属性被调用之前得到执行",
  extends: "用于声明继承另一个组件,从而无需使用Vue.extend,便于扩展单文件组件",
  provide&inject: "2个属性需要一起使用,用来向所有子组件注入依赖,类似于React的Context",
  // 其它
  name: "允许组件递归调用自身,便于调试时显示更加友好的警告信息",
  delimiters: "改变模板字符串的风格,默认为{{}}",
  functional: "让组件无状态(没有data)和无实例(没有this上下文)",
  model: "允许自定义组件使用v-model时定制prop和event",
  inheritAttrs: "默认情况下,父作用域的非props属性绑定会应用在子组件的根元素上。当编写嵌套有其它组件或元素的组件时,可以将该属性设置为false关闭这些默认行为",
  comments: "设为true时会保留并且渲染模板中的HTML注释"
});

3.模板语法

Vue.js 使用了基于 HTML 的模板语法,必须是合法的 HTML。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。

插值

文本

<!--Mustache-->
<span>Message: {{ msg }}</span>
<!--v-text-->
<span v-text="msg"></span>
<!--v-once:一次性插值-->
<span v-once>这个将不会改变: {{ msg }}</span>

HTML

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。

特性

<div v-bind:id="dynamicId"></div>

在插值中可以使用表达式,但只限简单表达式。

{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

指令

指令 (Directives) 是带有 v- 前缀的特殊属性。
指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

<p v-if="seen">现在你看到我了</p>
<a v-on:click="doSomething">...</a>
指令 预期/限制 作用
v-text string 文本插值
v-html string html插值
v-show any 条件显示
v-if、v-else、v-else-if any 条件渲染
v-for Array/Object/number/string 列表渲染
v-on(@) Function/Inline Statement/Object 事件绑定
v-bind(😃 any (with argument)/Object (without argument) 特性绑定
v-model 仅限/