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}
  1. 使用
<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>
  1. 具名插槽
<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
*/
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页