Vue 全家桶

最新推荐文章于 2022-04-12 14:57:19 发布

AruKing

最新推荐文章于 2022-04-12 14:57:19 发布

阅读量585

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/AruKing/article/details/82378732

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue实例上的属性

VueComponent{
    $attrs:(...)
    $children:[VueComponent] // 用来访问当前组件实例的直接子组件实例 【组件树】
    $createElement:f(a,b,c,d)
    $el:div#app //用来挂载当前组件实例的demo元素【dom访问】
    $els://用来访问$el元素中使用了v-el指令的DOM元素
    $listeners:(...)
    $options:{} //用来访问组件实例化时的初始化选项对象【数据访问】
    $parent:{} // 用来访问组件实例的父实例【组件树】
    $refs:{}  //用来访问ref指令的子组件【组件树】
    $root:{} // 用来访问当前组件树的根实例【组件树】
    $scopedSlots:{}
    $slots:{}
    $vnode:{}
    init
    msg
    sayHello
    title
    _c
    _data
    _directInactive:false
    _events:{}
    _hasHookEvent
    _inactive:null
    _isBeingDestroyed:false
    _isDestroyed:false
    _isMounted:true
    _isVue:true
    _props:{}
    _renderProxy:{}
    _renderRoot:{}
    _self:{}
    _staticTrees:null
    _uid:20
    _vnode
    _watcher
    _watchers
    $data //用来访问组件实例观察的数据对象【数据访问】
    $isServer
    $props
    $route
    $ssrContext
    get $attrs: f
    set $attrs: f
    get $listeners
    set $listeners
    get msg
    set msg
}

Dom 方法的使用

$appendTo(elementOrSelector,callback) 将el所指的DOM元素插入目标元素
$before(elementOrSelector,callback) 将el所指的DOM元素或片段插入目标元素之前
$after(elementOrSelector,callback) 将el所指的DOM元素或片段插入目标元素之后
$remove(callback) 将el所指的DOM元素或者片段从DOM中删除
$nextTick(callback) 用来在下一次DOM更新循环后执行指定的回调函数

event 方法的适用

监听

$on(event,callback) 监听实例的自定义事件
$once(event,callback) 同上，只触发一次。

$watch(property,callback(new,old))

    watch:{
        text(new,old){
            console.log(`${new}:${old}`)
        }
    }

    或

    const unWatch = this.$watch('text',(new,old){
         console.log(`${new}:${old}`)
    })
    setTimeout(()=>{
        unWatch()
    },2000)
    //需要手动销毁的第二种

出发
- $dispatch(event,args)：派发事件，先在当前实例触发，在沿父链一层层向上，对应的监听函数返回false停止
- $broadcast(event,args):广播事件，遍历当前实例的$ children,如果对应的监听函数返回fasle停止
- $emit(event,args):触发事件
删除
- $off(event,callback) 删除时间监听
其他
- $forceUpdate() 强制组件刷新
- $set(ele,attr,value) 给对象设置属性
- $delete(ele,attr,value) 删除对象属性

生命周期

new Vue()
init Events & Lifecycle
beforeCreate
init injections & reactivity
created
Has ‘el’ option?
Has template option
compile template into reder function || compile el’s outerHTML as template*
beforeMount
crate vm.$el and replace “el” with it
mounted
beforeUpdate
Virtual DOM re-render and patch
updated
when vm.$destroy() is called
beforeDestroy
Teardown watchers , child components and event listeners
Destroyed
destroyed

数据绑定

<template>
  <div id="app">
    <p>{{isActive?'active':'notActive'}}</p>
    <p>{{arr.join(' ')}}</p>
    <p>{{Date.now()}}</p>
    <p v-html="html"></p> 
    <div
      :class="{ active: isActive }"
      :style="[styles, styles2]"
    ></div>
    <div :class="[isActive? 'active':'']"></div>
    <ul>
      <li v-for="(item,index) in arr" :key="index">{{item}}</li>
    </ul>

    // 单个checkbox
    <input type="checkbox" v-model="a"> {{a}} <br/>
    // 多个checkbox
    爱好：<input type="checkbox" v-model="b" value="游泳"> 游泳
    <input type="checkbox" v-model="b" value="游泳"> 爬山
    <input type="checkbox" v-model="b" value="游泳"> 睡觉

    性别：<input type="radio" v-model="c" value="男"> 男
    <input type="radio" v-model="c" value="女"> 女

    // 只绑定一次
    <p v-once="a"></p> 

  </div>
</template>
<script>
export default {
  data() {
    return {
      isActive: false,
      arr: [1, 2, 3],
      html: '<span>123</span>',
      styles: {
        color: 'red',
        appearance: 'none'
      },
      styles2: {
        color: 'black'
      },
      a: false,
      b:[], // 可以拿到checkbox 的 value
      c:'' // 性别
    };
  }
}
</script>

v-model 修饰符

.number
<input v-model.number='age' type='number'>
.trim 去掉空白符
.lazy 值数据同步

computed 计算属性

<template>
  <div id="app">
    <p>{{name}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: 'Fin',
      lastName: 'Get',
    };
  },
  computed: {
    name() {
      return `${this.firstName}${this.lastName}`
    }
  }
}
</script>

双向绑定的计算属性与vuex

// vuex state是无法直接修改的，官方给出了 v-model 的解决方案
<input v-model="message">

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}
如果在方法或者生命周期中使用了计算属性，则必须设置一个set

watch 监听器

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: { // watch 方法最初绑定的时候，它是不会执行的，只有变化了才会执行
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

升级

<div id="demo">{{ obj.a }}</div>
<input v-model="obj.a" />

var vm = new Vue({
  el: '#demo',
  data: {
    obj: {
      a: '123'
    }
  },
  watch: {
    obj: {
      handler() {
        console.log('obj.a changed');
      },
      immediate: true,
      deep: true // 如果不加这一句，在输入框中输入值，并不会打印 obj.a changed
    }
  }
})

组件

vue组件中的data 为什么必须是函数

Vue.component('myComponent',{
    templace:'<div>hello component</div>',
    data(){
        return {}//返回一个唯一的对象，不要和其他组件共用一个对象返回
    }
})

可以理解构造函数，对构造函数的引用，实例化一个组件对象。
差不多就是这样：

let MyComponent = function(){} //定义一个构造函数
MyComponent.prototype.data = {
    name:'component',
    age:0
}
// 实例化组件对象
let componentA = new MyComponent()
let componentB = new MyComponent()
componentA.data.name === componmentB.data.name //true

改一下
MyComponent.prototype.data = function(){
    return:'component'
    ,age:0
}

用Vue.use()定义全局组件

//定义一个button组件
//button.vue
<template>
    <div class='button'>按钮</div>
</template>

//button.js
import buttonComponent from './button.vue'
const Button = {
    install(Vue){
        Vue.component('Button',ButtonComponent)
    }
}
export default Button

//main.js
import Button from './component/button.js';
Vue.use(Button);

props

<template>
    <div class='button'>按钮</div>
</template>
<script>
export default{
    props:['msg'], //并无限制
    props:{
        propA:Number, //基础的类型检查
        propB:[String,Number],//多个可能的类型
        propC:{  //必填的字符串
            type:String,
            required:true
        },
        propD:{  //带有默认值的数字
            type:Number,
            default:100
        }，
        propE:{  //带有默认值的对象
            type:Object,
            default:fuction(){
                return {mssage:'hello'}
            }
        },
        propF:{  //自定义验证函数
            validator(value){
                // 这个值必须匹配下列字符串中的一个

                return ['success', 'warning', 'danger'].indexOf(value) !== -1
            }
        }
    }
}
</script>

vue组件 extend

Vue.extend 包含组件选项的对象，其中data 选项必须是函数。

import Vue from 'vue'
// 一个包含组件选项的对象
const component = {
    props：{
        active:Boolean,
        propOne:string
    },
    template:`<div><input type="text" v-model="text">
      <span v-show="active">see me if active</span></div>`,
    data(){
        return{
            text:0
        }
    },
    mounted(){
        console.log('coml mounted')
    },
}
//创建一个 子类
const CompVue = Vue.extend(compoent）        
//实例化一个
new CompVue({
    el:'#root',
    propsData:{
        propOne:'xxx'
    },
    data:{
        text:123
    },
    mounted () {                    
       console.log('instance mounted');
    }
})

AruKing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 全家桶

vue实例上的属性VueComponent{ $attrs:(...) $children:[VueComponent] // 用来访问当前组件实例的直接子组件实例【组件树】 $createElement:f(a,b,c,d) $el:div#app //用来挂载当前组件实例的demo元素【dom访问】 $els://用来访问$el元素中使用了v-...
复制链接

扫一扫