VUE基础

vue基础

vue概念

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

vue组成

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

指令

• 文本显示

1. {{}}
2. v-text
3. v-html="" 可以渲染html标签

• 条件渲染

1. v-if
2. v-else-if
3. v-else
4. v-show(通过css display隐藏，频繁切换显示与隐藏，建议使用v-show)

• 事件

1. v-on:事件名称|@事件名称
2. 事件修饰符：.once一次 .stop阻止事件冒泡 .prevent阻止默认事件

• 属性

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

• 循环

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

• 表单 v-model

1. 修饰符号 .number(转换为数字) .lazy(延迟更新)
2. type=checkbox 如果只有一个单选 值：true|false

• class

1. :class=""属性绑定
2. :class="{key:val,key2:val2}"对象形式，val为真，key对应的class被绑定
3. :class="[name1,name2]"数组方式

• style

1. :style="{key:val,key2:val2}"对象形式，驼峰css名称书写 font-size->fontSize
2. :style=“styles” styles是data中定义的一个对象

vue参数对象

• el 指定vue的模板
• data 指定vue的初始数据
• methods vue的方法中心
• computed 从现有数据计算出新的数据
• watch 监听数据的变化
• 生命周期钩子函数

1. 创建前后 beforeCreate|Created
2. 挂载前后 beforeMount|Mounted
3. 更新前后 beforeUpdate|Updated
4. 卸载前后 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">

动画

• 定义 |(动画组)

1. 元素的显示与隐藏过程中产生的动画
2. 需要用transition内置组件包裹
3. 在显示过程中动态的给元素添加class

• 产生class

1. v-enter-active进入过程

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

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

• transition组件

vue组件

• 全局组件

1. 整个项目中不注册就直接使用
2. 定义

Vue.cpmponent(名称,参数)
Vue.component("Count",{template,data,methods,})

• 局部组件

1. 谁注册谁使用
2. 定义

var Counter = {template:"",methods,...

3.注册

components:{Count}

4. 使用

<Counter></Counter>
<counter></counter>
<my-item></my-item>

• 组件的数据传递props

1. 父传子

//父组件传入
<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;
}

• 组件的插槽

1. 默认插槽

<Parent>
    <p>嵌入内容</p>
</Parent>
//在template中写入
<slot></slot>

2. 具名插槽

<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
*/