Vue.js起步学习笔记

先来一个小分享：

不知道大家是不是有很多人都有这样的体验：很想读书，很想多学习一下书里的知识，但是平常太忙根本没时间。

大家可以关注一下博主新建的微信公众平台或者加入QQ群，主要目的是定期更新一些我们大家的读书笔记和感悟，互相交流，这样就能短时间内汲取更多书的精华知识了～群号303238741，或者扫描文章最下方的二维码，在微信号中给我发一下QQ号～

安装

安装：npm install vue

安装命令行工具：npm install -g vue-cli（需要soda）

创建一个基于webpack的项目模版：vue init webpack test-project，会进行一系列的提示

进入目录安装依赖包：cd test-project;  npm install

运行项目：npm run dev

起步

见easy-test代码

概述

视图由数据驱动

指令：v-开头；如v-if/v-for/v-bind等

Vue实例

var vm = new Vue({})：创建一个基本的Vue实例

var MyComponent = Vue.extend({})：创建一个类似于抽象类的可扩展类，可以进行实例化，实例化的组件包涵该类的内容：var myComponentInstance = new MyComponent()

Vue实例内置的预定义属性和方法：以$开头，如$el<=>document.getElementById(‘’)

$watch方法的使用：

vm.$watch('a', function (newVal, oldVal) {

  // 这个回调将在 `vm.a`  改变后调用，起到一个监听器的作用

})

钩子：在一个Vue实例的生命周期的不同时期调用的方法，比如created方法内部的函数就会在实例创建后调用

各个阶段：created/beforeCompile/compiled/ready/beforeDestroy/destroyed

数据绑定语法

v-bind可以将标签特性进行绑定：<a v-bind:href="url"></a>等价于href="{ {url}}"