Vue最简洁最全的入门教程

大家好，又见面了，我是你们的朋友全栈君。

最近在学vue，主要从以下几个方面学习：

•环境安装

•模板语法（怎么写）

•指令

•选项、生命周期（写在哪儿）

•vuejs-devtools（怎么调试）

1.Vue.js 简介

Vue.js是一套构建用户界面的UI框架，它专注于MVVM模型的ViewModel层，通过双向数据绑定把View层和Model层链接起来。

2.Vue.js 特点

•模板双向绑定机制

•利用指令（directive）对DOM进行封装

•组件化设计思想等

3.Vue.js 安装

•CDN script引入

•NPM

•在线编辑器（推荐）

•命令行工具 (CLI)

  安装node环境

  npm install -g @vue/cli

  vue create hello-world

  npm install

  npm run serve

4.模板语法

5.指令

•v-text=={
{message}}

•v-html <div v-html=”message2″></div>

•v-show：<h1 v-show=”ok”>Hello!</h1>

•v-if：<div v-if=”type === ‘A'”>

•v-else：<div v-else>

•v-else-if：<div v-else-if=”type === ‘B'”>

•v-for：<div v-for=”(item, index) in items”></div>

•v-on==@：<button v-on:click=”doThat(‘hello’, $event)”></button>

•v-bind==：<img v-bind:src=”imageSrc“> 缩写<img :src=”imageSrc“>

•v-model：<input v-model=”message” placeholder=”edit me”><p>Message is: {
{ message }}</p>

6.Vue事件

•V-on：监听事件

•自定义事件

组件内抛出：this.$emit(‘myEvent‘)

外部监听：<my-component v-on:myEvent=”doSomething“></my-component>

•将原生事件绑定到组件

<base-input v-on:focus.native=”onFocus“></base-input>

7.特殊特性

•Key：有相同父元素的子元素必须有独特的 key，主要用在v-for

•Ref：<input ref=”input”>被用来给元素或子组件注册引用信息

•Slot：用于标记往哪个具名插槽中插入子组件内容

8.选项 / 数据

•Data： Vue 实例的数据对象

•Props： props 可以是数组或对象，用于接收来自父组件的数据

•Computed：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算

•Watch：一个对象，键是需要观察的表达式，值是对应回调函数

•Methods：放置普通函数的地方

9.生命周期

beforeCreate：此时data、method和$el均没有初始化
created：此时data和method初始化完成，但是DOM节点并没有挂载

beforeMount：编译模板，并且将此时在el上挂载一个虚拟的DOM节点

mounted：编译模板，且将真实的DOM节点挂载在el上，可做数据请求

beforeUpdate：在数据有更新时，进入此钩子函数，虚拟DOM被重新创建

updated：数据更新完成时，进入此钩子函数

beforeDestory：组件销毁前调用，移除watchers、子组件和事件等 
destoryed：组件销毁后调用

10.混入

11.组件

12.调试

13.一些学习网站和参考资料

•https://cn.vuejs.org/v2/api/

•https://wiki.imooc.com/vue/vuejsintroduce.html

•https://codesandbox.io

•https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd