Vue最简洁最全的入门教程

朴灿烈づ我的快乐病毒、 2022-04-08 11:55 380阅读 0赞

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

•环境安装

•模板语法（怎么写）

•指令

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

•[vuejs-devtools][]（怎么调试）

### **1.Vue.js** **简介** ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70][]

### **2.Vue.js** **特点** ###

•模板双向绑定机制

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

•组件化设计思想等

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70 1][]

### **3.Vue.js** **安装** ###

•[CDN script][][引入 ][CDN script]

•NPM

•[在线][Link 1][编辑器][Link 1]（推荐）

•命令行工具 (CLI)

安装node环境

npm install -g @vue/cli

vue create hello-world

npm install

npm run serve

### **4.[模板语法][Link 2]** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70 2][]

### **5.[指令][Link 3]** ###

•[v-text][]==\{ \{message\}\}

•[v-html][v-text] <div v-html="message2"></div>

•[v-show][v-text]：<h1 v-show="ok">Hello!</h1>

•[v-if][v-text]：<div v-if="type === 'A'">

•[v-else][v-text]：<div v-else>

•[v-else-if][v-text]：<div v-else-if="type === 'B'">

•[v-for][v-text]：<div v-for="(item, index) in items"></div>

•[v-on][v-text]==@：<button v-on:click="doThat('hello', $event)"></button>

•[v-bind][v-text]==：<img v-bind:src="imageSrc"> 缩写<img :src="imageSrc">

•[v-model][v-text]：<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][v-text]：有相同父元素的子元素必须有**独特的** **key****，主要用在****v-for**

•[Ref][v-text]：<input ref="input">被用来给元素或子组件注册引用信息

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

### **8.选项** **/** **数据** ###

•[Data][v-text]： Vue 实例的数据对象

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

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

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

•[Methods][v-text]：放置普通函数的地方

### **9.[生命周期][Link 4]** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70 3][]

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

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

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

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

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

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

### 10.[混入][Link 5] ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70 4][]

### **11.[组件][Link 6]** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70 5][]

### 12.调试 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70 6][]

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

•[https://cn.vuejs.org/v2/api/][Link 3]

•[https][Link 3][://][Link 3][wiki.imooc.com/vue/vuejsintroduce.html][Link 3]

•[https://][https][codesandbox.io][https]

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

[vuejs-devtools]: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70]: /images/20220405/2072b6d5feaa428cb5f0a9501824a543.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70 1]: /images/20220405/886f2822eee84b129d7abd7e228afb69.png
[CDN script]: https://jsfiddle.net/face08/50wL7mdz/791174/
[Link 1]: https://codesandbox.io/dashboard/recent
[Link 2]: https://jsfiddle.net/face08/eywraw8t/470801/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70 2]: /images/20220405/21a131754edb4b5bbf79fd8526c2f643.png
[Link 3]: https://wiki.imooc.com/vue/vuejsintroduce.html
[v-text]: https://cn.vuejs.org/v2/api/
[Link 4]: https://cn.vuejs.org/images/lifecycle.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70 3]: /images/20220405/3392bbeff1e3444ea9505c6559d7624e.png
[Link 5]: https://cn.vuejs.org/v2/guide/mixins.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70 4]: /images/20220405/335330efb2ed43abb8040eaf0ada7db4.png
[Link 6]: http://img.tqmall.com/demand/add/20181123/581542962171271.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70 5]: /images/20220405/7a53532586a2412faaa8d497d6555198.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xjZ29pbmc_size_16_color_FFFFFF_t_70 6]: /images/20220405/d6b973d58a254dd4b35e1582fa0744c4.png
[https]: https://codesandbox.io/