Vue.js学习笔记一
2018-09-05 10:42
731 查看
Vue介绍
Vue.js是什么?是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,与第三方库或既有项目整合方便。与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。
声明式渲染
Vue.js的核心是一个允许采用简洁的模版语法来声明式地将数据渲染进DOM的系统。
如:文本插值
<div id="app">{{ message }}</div>
如:绑定元素特性
<span v-bind:title="message">鼠标悬停查看动态绑定的提示信息</span>
说明:v-bind指令指:将这个元素节点的title特性和Vue实例的message属性保持一致。
指令:带有前缀v-,表示是Vue提供的特殊特性。它们会在渲染的DOM上应用特殊的响应式行为。
条件与循环
如:控制切换一个元素是否显示
<p v-if="seen">通过seen的值控制是否渲染该元素</p>
说明:不仅可以把 数据 绑定到DOM文本或特性,还可以绑定到DOM结构。此外,Vue也提供一个强大的过渡效果系统,可以在Vue插入、更新、移除元素时自动应用过渡效果。
如:v-for指令可以绑定数组的数据来渲染一个项目列表
<li v-for="item in list">{{ item.text}}</li>
处理用户输入
如:v-on指令添加一个事件监听器,通过它调用在Vue实例中定义的方法
<button v-on:click="clickHandler">单击事件监听器,单击时触发调用方法</button>
说明:clickHandler方法中,只需更新应用的状态,不需要碰触DOM,所有的DOM操作都由Vue来处理,编写的代码只需关注逻辑层面即可。
组件化应用构建
组件系统是Vue的一个重要概念,因为它是一种抽象,允许使用小型、独立和通常可复用的组件构建大型应用。任意类型的应用界面都可以抽象为一个组件树。
在Vue里,一个组件本质上是一个拥有预定义选项的一个Vue实例。
如:简单的Vue组件
// 定义名为 todo-item 的新组件 Vue.component('todo-item', { template: '<li>这是个待办项</li>' })
<ol> <!-- 创建一个 todo-item 组件的实例 --> <todo-item></todo-item> </ol>
如:从父作用域将数据传递到子组件,组件定义props
Vue.component('todo-item', { // todo-item 组件现在接受一个 // "prop",类似于一个自定义特性。 // 这个 prop 名为 todo。 props: ['todo'], template: '<li>{{ todo.text }}</li>' })
var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '随便其它什么人吃的东西' } ] } })
使用v-bind指令将待办项传到循环输出的每个组件中
<div id="app-7"> <ol> <!-- 现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量,即其内容可以是动态的。 我们也需要为每个组件提供一个“key”,稍后再 作详细解释。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> </div>
Vue实例
创建一个Vue实例每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的。
var vm = new Vue({ // 选项 })
虽然没有完全遵守MVVM模型,但Vue的设计也受到了它的启发,在文档中经常会使用vm(ViewModel的缩写)这个变量名表示Vue实例。
当创建一个Vue实例时,你可以传入一个选项对象。如何使用这些选项来创建你想要的行为。
一个Vue应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。
数据与方法
当一个Vue实例被创建时,它向Vue的响应式系统中加入了其data对象中能找到的所有属性。当这些属性的值发生改变时,视图将会产生响应,即匹配更新为新的值。
当这些数据改变时,视图会进行重渲染。
注意:只有当实例被创建时 data 中存在的属性才是响应式的。所以如果添加一个新的属性,该属性值的改动不会触发任何视图的更新。因此,如果可预知在晚些时候需要一个属性,但是一个开始它为空或不存在,那么你仅需要设置一些初始值(如:''、0、false、[]、null)。
唯一的例外是使用 Object.freeze() ,这会阻止修改现有的属性,即响应系统无法再追踪变化。
var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj })
除了数据属性,Vue实例还暴露了一些有用的实例属性与方法(它们都由前缀$)。
实例生命周期钩子
每个Vue实例在被创建时都要经过一系列的初始化过程,如:需要设置数据监听、编译模版、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这样可以在不同阶段添加自己的代码。
生命周期钩子的 this 上下文指向调用它的Vue实例。
注意:不要在选项属性或回调上使用箭头函数,比如:
created: () => console.log(this.a) 或
vm.$watch('a', newValue => this.myMethod())
因为箭头函数是和父级上下文绑定在一起的,this 不会是如你所预期的Vue实例,经常导致:
Uncaught TypeError: Cannot read property of undefined 或
Uncaught TypeError: this.myMethod is not a function 之类的错误。
生命周期图示
相关文章推荐
- Vue.js 源码学习笔记 - 细节
- vuejs 学习笔记
- Vue.js第三天学习笔记(计算属性computed)
- Vue.js第二天学习笔记(vue-router)
- Vue.js学习笔记之常用模板语法详解
- vue.js学习笔记:如何加载本地json文件
- vue.js学习笔记-7
- Vue.js学习笔记:属性绑定 v-bind
- vue.js 源代码学习笔记 ----- instance inject
- vue.js 源代码学习笔记 ----- $watcher
- vue.js中的各种问题记录(包括环境问题和学习笔记)
- vue.js 学习笔记
- Vue.js第四天学习笔记
- vue.js 源代码学习笔记 ----- instance proxy
- Vue.js学习笔记(三)
- Vue.js学习笔记——处理用户输入(逆转消息)
- vue.js学习笔记第一季-基础指令集(JS胖老师课程)
- Vue.js 源码学习笔记 -- 分析前准备2 -- Object.defineProperty
- Vue.js第二天学习笔记(vue-router)
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)