vue基础

vue概念

是一套用于构建用户界面的渐进式前端框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue组成

模板（视图）业务逻辑指令 联系模板与业务逻辑

指令

文本显示 {{}}v-textv-html="" 可以渲染html标签 条件渲染 v-ifv-else-ifv-elsev-show(通过css display隐藏，频繁切换显示与隐藏，建议使用v-show) 事件 v-on:事件名称|@事件名称事件修饰符：.once一次 .stop阻止事件冒泡 .prevent阻止默认事件 属性

v-bind:属性名称|:属性名

循环

v-for="(item,index) in list" :key=“item”

表单 v-model 修饰符号 .number(转换为数字) .lazy(延迟更新)type=checkbox 如果只有一个单选 值：true|false class :class=""属性绑定:class="{key:val,key2:val2}"对象形式，val为真，key对应的class被绑定:class="[name1,name2]"数组方式 style :style="{key:val,key2:val2}"对象形式，驼峰css名称书写 font-size->fontSize:style=“styles” styles是data中定义的一个对象

vue参数对象

el 指定vue的模板data 指定vue的初始数据methods vue的方法中心computed 从现有数据计算出新的数据watch 监听数据的变化生命周期钩子函数 创建前后 beforeCreate|Created挂载前后 beforeMount|Mounted更新前后 beforeUpdate|Updated卸载前后 beforeDestroy|Destroy computed 计算属性 computed:{ "rmsg":function(){ return this.msg } } watch 监听 watch:{ obj:{ handler:function(nval){ }, deep:true } } filters 过滤directives 自定义指令props 属性components组件路由守卫mixin 混合

computed 计算

从现有数据计算出新数据

computed:{ rmsg:function(){ return this.msg.split('').reverse().join(''); }, }

watch 监听

watch:{ obj:{ handler:function(nVal){ }, deep:true } }

时刻监听数据obj的变化并执行handler回调函数

deep深度监听对象的变化（属性与子对象）

filters过滤

filters:{ price:(val,arg1,arg2){ return val; } }

directives自定义指令

directives:{ "img":{ inserted:function(el,binding){ // el 当前指令所在的元素 // binding.value 指令值 } } } <div v-img="xxx">

动画

定义 |(动画组) 元素的显示与隐藏过程中产生的动画需要用transition内置组件包裹在显示过程中动态的给元素添加class 产生class v-enter-active进入过程

v-enter从什么状态进入，v-enter-to进入到什么状态 2. v-leave-active

v-leave从离开的起始状态，v-leave-to离开到的状态

transition组件

vue组件

全局组件 整个项目中不注册就直接使用定义 Vue.cpmponent(名称,参数) Vue.component("Count",{template,data,methods,}) 局部组件 谁注册谁使用定义 var Counter = {template:"",methods,...

3.注册

components:{Count} 使用 <Counter></Counter> <counter></counter> <my-item></my-item> 组件的数据传递props 父传子 //父组件传入 <counter :count="2"> //子组件接收 props:["count"] props验证默认值 props:{type:Number,default:1} 类型:Number String Object Array Boolean 组件的单向数据流 父传入给子组件的数据是单向的 是只读的(保证组件的数据更改，不影响其他组件)传参初始化 props:["count"] created(){this.num = this.count} (可以修改num的值)

2.子传父

this.$emit("numchange",this.num); //向父组件传递数据 <Step :min="6" :max="50" :step="2" :count="25" @numchange="getNum($event)"></Step> //父组件接收，并触发定义的事件 getNum(e){ this.number = e; } 组件的插槽 默认插槽 <Parent> <p>嵌入内容</p> </Parent> //在template中写入 <slot></slot> 具名插槽 <Parent> <p slot="foot">嵌入内容</p> </Parent> //在template中写入 <slot name="foot"></slot> 属性的.sync修饰符 :visible.sync = "flag" //:visible="flag" //@update:flag="$event" <div v-if="visible"> <button @click="$emit('update:visible',false)"> props:{visible:{type:Boolean,default:''}}

js文档注释

// /** *@params{类型}参数 解释 *@returns{类型}返回 解释 *@example{类型}例子 解释 *@constructor *@property *@var *@const */