基础
安装
用script引入
介绍
先script引入
再在js中定义new Vue({})对象
在html中定义容易div#app
V-bind:属性="xx"标签
V-if标签
{{data.text}}传入对象
处理用户输入v-on事件
v-model双向数据绑定
组件化
创建组件
Vue.component('login'.{templage:'登录组件'})
components:{ 'login':{templage:'登录组件'} }
html中使用组件
自定义组件取vm对象的值
先在自定义组件中添加props属性
Vue实例
模板语法
插值表达式
v-html可以解析原始html
使用javascript表达式
v-if之类的指令
事件修饰符
缩写
计算属性和侦听器
计算属性
计算属性computed里面的元素有get和set属性
侦听器
Class和Style绑定
绑定class
对象语法
数组语法
用在组件上
绑定内联样式
对象语法
数组语法
条件渲染v-if语句
<h1 v-if="flag">Vue!</h1>
<div v-else-if="type === 'B'">
<h1 v-else>没有结果</h1>
上面语句会切换.可用key关键字
简单的判断显示可用v-show
v-if和v-show对比
v-for和v-if一起使用
列表渲染v-for语句
v-for循环多数据
v-for带索引的循环(带括号第二参数是索引)
上面循环数组第二参数是索引
v-for循环对象
<li v-for="item in obj">{{item}}
<li v-for="(item.key) in obj">{{item}}
<li v-for="(item.key.index) in obj">{{item}}
v-for更新操作需要跟踪节点身份:key用来识别
数组更新检测方法
变异方法
替换数组
注意事项
对象变更检测注意事项
添加修改对象值
以前vm.b = 2
Vue.set(vm.userProfile. 'age'. 27)
vm.$set(vm.userProfile. 'age'. 27)
添加修改对象多个值
显示过滤/排序后的结果
可以使用计算属性
v-for取值范围
在templage上使用v-for
v-for和v-if同时使用
在组件上使用v-for
先引用v-for语句
此时虽然引用v-for因为作用域不同还需要进行传值
事件处理
监听事件
v-on:click="count++"
v-on:click="func('hi')"
事件修饰符
@click.stop
@click.prevent
@click.stop.prevent
@click.self
@click.once
按键修饰符
@keyup.enter='xx'
@keyup.page-down='xx'
@keyup.其他常用的按键名
全局配置config.keyCodes键码别名
@click.ctrl.exact(2.5版本可用)
表单输入绑定
v-model双向数据绑定并实时监测更新
样例demo在连接
修饰符
v-model.lazy=msg
v-model.number='age'
v-model.trim='msg'
组件基础
组件component特点
data必须是一个函数最后return对象数据
组件树
通过prop支撑向子组件传递数据
假设父组件有site:'helloword'我要用
先定义全局组件
再定义props数组定义子变量
在blog-post组件内模版调用title使用
最后要<blog-post :title='site'>绑定父组件属性
如果父组件site是一个对象或数组上面还需要v-for循环上面也要改
通过插槽分发内容
在组件模版内定义templage内容
html中调用标签之内有内容自动添加
动态组件
放在html中的component标签必须有is属性
is属性对应一个变量.值就是对应模版的名字
深入了解组件
全局组件注册
组件名
局部注册
自定义事件
组件调用js原生函数
插槽
调用变量作用域
<slot>后备内容</slot>
带name属性的插槽
之后在模版标签中定义v-slot="header"
插槽引用变量的作用域
独占默认插槽的缩写语法
先在组件标签上定义v-slot
然后在组件内部引用变量对象
动态组件和异步组件
在动态组件上使用keep-alive保持状态
其他知识点
访问根实例就是new vue的数据
访问父级组件实例
访问子组件实例或子元素(必须在组件定义属性ref='nihk'名字)
程序化的时间侦听器
$on(eventName.eventHandler)
$once()
$off()停止侦听一个事件
X-template
控制更新(数据双向绑定的更新)
过渡和动画
单元素/组件的过渡
上例涉及到的过渡css类名
css动画可结合animate等库
初始渲染的过渡
过渡模式(两个按钮之间的切换)
简单的写法在transition加上mode="out-in"
组件之间的过渡一样在组件外加transition标签
ul-li列表的过渡
状态过渡
混入及其他杂项
自定义指令
定义一个v-focus全局自定义指令
一个指令对象中有好多钩子函数
渲染函数&&JSX
节点树和虚拟dom
createElement 参数
vue插件
比如vue-route
过滤器
{{ message | capitalize }}
一些工具介绍
单文件组件
单元测试
简单的断言
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'
TypeScript 支持
生产环境部署
路由