Vue 学习笔记

 

 

各目录作用

{{}}引用data中的值

v-html引用data中的值并渲染到页面上

v-bind控制属性中的值 缩写

v-model 数据双向绑定

v-if

v-on:click 监听事件 缩写

{{message|capitalize}} 过滤器，第一个是参数

在元素和template之间使用v-if，还有v-else

v-show指令

v-for 循环语句 site in sites 循环数组元素

value in object 对一个对象的属性迭代数据 (value,key) in object (value,key,index) in object 第一个参数为值，第二个参数为关键字，第三个参数为索引

v-for="n in 10" 循环整数

计算属性 computed ，用于处理一些复杂逻辑，放在vue实例里

computed : {

object: function(){

// this 指向vue实例

return ....;

}

}

computed VS methods

两者效果是一样的

computed是基于它的依赖缓存

methods需要调用才会执行

computed 也可以使用set属性

监听属性 watch

元素: function() 监控函数

v-bind 样式绑定，表达式的结果除了字符串之外，还可以是对象或数组

v-bind:class="{ '样式名称':变量}"

v-on 事件处理器 click 对应 methods中的一个function

通过由.表示的指令后缀来调用修饰符

.stop - 阻止冒泡

.prevent - 阻止默认事件

.capture - 阻止捕获

.self - 只监听触发该元素的事件

.once - 只触发一次

.left - 左键事件

.right - 右键事件

.middle - 中间滚轮事件

v-model指令在表单控件元素上创建双向数据绑定

.lazy 在默认情况下，v-model是在input事件中同步输入的数据，可以添加此修饰符，从而转变为在change事件中同步

.number 修饰符 自动将输入值转为数值

.trim 修饰符 过滤首尾空格

组件：component

prop是子组件用来接收父组件传递过来的数据的一个自定义属性，父组件的数据需要通过props把数据传给子组件，子组件需要显式用props选项声明“prop:”

prop是单向绑定的，只能有父传递到子

自定义事件，使用$on监听事件，使用$emit触发事件

data必须是个函数

自定义指令

directive注册自定义指令

钩子函数：

bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

inserted：被绑定元素插入父节点时调用

update：被绑定元素模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新

componentUpdated：被绑定元素所在模板完成一次更新周期时调用

unbind：只调用一次，指令与元素解绑时调用

钩子函数的参数：

el：指令所绑定的元素，可以用来直接操作DOM

binding：一个对象，包含以下属性：

name：指令名，不包括v-前缀

value：指定的绑定值。例如：v-my-directive="1+1"，value的值是2

oldValue：指定绑定的前一个值，仅在update和compentUpdated的钩子中可用，无论值是否改变都可用

expression：绑定值的表达式或变量名。例如v-my-direcvive="1+1"，expression的值是"1+1"

arg：传给指令的参数。例如v-my-directive:foo，arg的值是"foo"

modifiers：一个包含修饰符的对象。例如v-my-directive.foo.bar，修饰符对象modifiers的值是{foo:true,bar:true}

vnode：Vue编译生成的虚拟节点

oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用

路由，可实现多视图的单页Web应用，需载入vue-router库

是一个组件，该组件用于设置一个导航链接，切换不同HTML内容。to属性为目标地址，即要显示的内容

如果使用模块化机制编程，导入Vue和VueRouter，要调用Vue.use(VueRouter)

1.定义路由组件 const，也可以import引用其他组件

2.每个路由映射一个组件，component可以是通过Vlue.extend()创建的组件构造器，也可以是一个组件配置对象

3.创建router实例，传routes配置或其他参数

4.挂载到根实例

相关属性

to：表示目标路由的链接，点击后，to的值会传到router.push()，所以这个值可以是一个字符串或描述目标位置的对象

replace：调用router.replace()，导航后不会留下histor记录

append：在当前路径前添加其路径

tag：将渲染成某种标签，如

active-class：设置链接激活时使用的css名

exact-active-class：配置当链接被精确匹配的时候应激活的class

event：声明可以用来触发导航的事件

过渡&动画

v-enter：定义进入过渡的开始状态。在元素被插入前生效，在元素被插入后的下一帧移除

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。可以被用来定义进入过渡的过程时间，延迟和曲线函数

v-enter-to：定义过渡的结束状态。在元素被插入后下一帧生效（与此同时v-enter被移除），在过渡/动画完成之后移除

v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧移除

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。可以被用来定义离开过渡的过程时间，延迟和曲线函数

v-leave-to：定义离开过渡的结束状态。在离开过渡被触发后下一帧生效（与此同时v-leave被删除），在过渡/动画完成之后移除

混入（mixins）

Ajax请求（axios）

异步加载 vue-resource库

vue.set 响应接口