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此时datamethod$el均没有初始化
created此时datamethod初始化完成,但是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

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值