大家好，又见面了，我是你们的朋友全栈君。
最近在学vue，主要从以下几个方面学习：
•环境安装
•模板语法（怎么写）
•指令
•选项、生命周期（写在哪儿）
•vuejs-devtools（怎么调试）
1.Vue.js 简介
Vue.js是一套构建用户界面的UI框架，它专注于MVVM模型的ViewModel层，通过双向数据绑定把View层和Model层链接起来。
2.Vue.js 特点
•模板双向绑定机制
•利用指令（directive）对DOM进行封装
•组件化设计思想等
3.Vue.js 安装
•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://wiki.imooc.com/vue/vuejsintroduce.html
•https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/135947.html原文链接：https://javaforall.net
