Vue入门小结

最新推荐文章于 2022-09-08 19:11:44 发布
小皇帝web前端
最新推荐文章于 2022-09-08 19:11:44 发布
阅读量186
点赞数
分类专栏： vue
本文链接：https://blog.csdn.net/qq_39464969/article/details/103299367
版权
vue 专栏收录该内容
14 篇文章 1 订阅
订阅专栏
1、指令
{{msg}}/v-text   #文本插值
v-html   #原始html  
v-once   #只渲染一次  
v-show   #css控制显示隐藏  
v-if     #根据表达式渲染元素   #用 key 管理可复用的元素  
v-else/v-else-if #紧跟v-if的else  
v-for    #列表渲染  可以循环数字、数组、对象和对象数组  
v-on     #事件渲染  
v-bind   #动态绑定属性 :是缩写  
v-model  #表单输入绑定  
v-slot   #插槽 限用于&lt;template&gt;/组件  
v-pre    #不编译，显示源码  
v-cloak  #隐藏未编译直到实例完成  

1.2 v-on
@[event].stop   # @是v-on的缩写  [event]是动态事件  .stop是修饰符
.stop    # 调用 event.stopPropagation()。停止冒泡
.prevent    # 调用 event.preventDefault()。阻止默认行为
.capture    # 添加事件侦听器时使用 capture 模式。
.self    # 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias}    # 只当事件是从特定键触发时才触发回调。
.native    # 监听组件根元素的原生事件。
.once    # 只触发一次回调。
.left    # (2.2.0) 只当点击鼠标左键时触发。
.right    # (2.2.0) 只当点击鼠标右键时触发。
.middle    # (2.2.0) 只当点击鼠标中键时触发。
.passive    # (2.3.0) 以 { passive: true } 模式添加侦听器

1.3 v-bind
#:class和:style绑定样式
:class="['red','thin',isactive?'active':'']" #1.使用数组、三元表达式
:class="['red','thin',{'active',isactive}]" #2.使用嵌套对象
:class="{red:true,italic:true,active:true}" #3.使用对象

:[key]="value" # :是v-bind的缩写  [key]是动态特性名  value可以属性/表达式/数组/组合/json对象
.prop     # 被用于绑定 DOM 属性 (property)。
.camel     # (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
.sync     # (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

1.4 v-for
#1.循环数组和对象数组
<p v-for="(item, i) in list">{{item.name}},{{i}}</p>  
#2.循环对象
<p v-for="(val, key, i) in user">{{val}},{{key}},{{i}}</p>  
#3.迭代数字
<p v-for="count in 10">{{count}}</p>  
#在组件中使用 v-for 时，必须添加key(=string/number)。

1.5 v-model
.lazy     # 取代 input 监听 change 事件
.number     # 输入字符串转为有效的数字
.trim     # 输入首尾空格过滤

1.6 自定义指令
钩子函数：bind/inserted/update/componentUpdated/unbind 函数参数：el、binding、vnode 、 oldVnode
<input v-focus>  
Vue.directive('focus', {  
  inserted: function (el) {
    el.focus()
  }
})

Vue.directive('demo', {  
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})
#函数简写(只在 bind 和 update 时触发相同行为)
Vue.directive('color-swatch', function (el, binding) {  
  el.style.backgroundColor = binding.value
})

2、全局API
Vue.extend( options )   #构造器扩展  
Vue.directive( id, [definition] )   #注册或获取全局指令。  
Vue.set( target, key, value )   #全局操作  
Vue.component( id, [definition] )   #注册或获取全局组件。  
Vue.nextTick( [callback, context] )   #在下次 DOM 更新循环结束之后执行延迟回调。  
Vue.delete( target, key )   #删除对象的属性。  
Vue.filter( id, [definition] )   #注册或获取全局过滤器。  
Vue.use( plugin )   #安装 Vue.js 插件。  
Vue.mixin( mixin )   #全局注册一个混入  
Vue.compile( template )   #在 render 函数中编译模板字符串。  
Vue.observable( object )   #让一个对象可响应。v2.6.0+  
Vue.version   #获取Vue 安装版本号。可根据不同版本号制定不同策略。  

3、选项
3.1 生命周期
beforeCreate:Function   #创建之前  
created   #创建完成  
beforeMount   #挂载之前  
mounted   #挂载之后  
beforeUpdate   #更新之前  
updated   #更新之后  
activated   #激活时  
deactivated   #停用时  
beforeDestroy   #销毁前  
destroyed   #销毁后  
errorCaptured   #子孙组件的错误时被调用  

3.2 数据
data: Object|Function  #Vue 实例的数据对象。  
props: Array<string>|Object   #用于接收来自父组件的数据。  
propsData: {[key:string]:any}   #创建实例时传递 props。只用于 new 创建的实例中。  
computed: {[key:string]:Function|{get:Function,set:Function}}   #计算属性  
methods: {[key:string]:Function}   #方法  
watch: {[key:string]:string|Function|Object|Array}   #监听器  

3.3 DOM
el: string|Element   #提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。  
template: string   #模板  
render: (createElement: () => VNode) => VNode   #渲染函数  
renderError: (createElement: () => VNode, error: Error) => VNode   #ender函数错误提供另一种渲染输出  

3.4 资源
directives: Object   #私有指令  
filters: Object   #私有过滤器  
components: Object   #私有组件  

3.5 组合
parent: Vue instance   #指定已创建的实例之父实例，在两者之间建立父子关系。  
mixins: Array&lt;Object&gt;   #混入  
extends: Object|Function   #继承  
provide / inject   #为高阶插件/组件库提供用例。  

3.6 其他
name: string   #只有作为组件选项时起作用。  
delimiters: Array<string>   #改变纯文本插入分隔符。只在完整构建版本中的浏览器内编译时可用  
functional: boolean   #使组件无状态 (没有 data ) 和无实例 (没有 this 上下文)。  
model: { prop?: string, event?: string }   #允许一个自定义组件在使用 v-model 时定制 prop 和 event。  
inheritAttrs: boolean   #  
comments: boolean   #是否保留且渲染html注释  

4、实例
4.1 实例属性
vm.$data: Object   #Vue 实例观察的数据对象。  
vm.$props: Object   #当前组件接收到的 props 对象。  
vm.$el: Element   #Vue 实例使用的根 DOM 元素。  
vm.$options: Object   #用于当前 Vue 实例的初始化选项。  
vm.$parent: Vue instance   #父实例，如果当前实例有的话。  
vm.$children: Array&lt;Vue instance&gt;   #当前实例的直接子组件。  
vm.$slots: { [name: string]: ?Array&lt;VNode&gt; }   #用来访问被插槽分发的内容。  
vm.$scopedSlots: { [name: string]: props => Array&lt;VNode&gt; | undefined }   #用来访问作用域插槽。  
vm.$refs: Object   #一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。  
vm.$isServer: boolean   #当前 Vue 实例是否运行于服务器。  
vm.$attrs: { [key: string]: string }   #包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。  
vm.$listeners: { [key: string]: Function | Array<Function> }   #包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。  

4.2 实例方法
vm.$watch( expOrFn, callback, [options] )    #监听器  
vm.$set( target, key, value )   #全局 Vue.set 的别名。  
vm.$delete( target, key )   #全局 Vue.delete 的别名。  
vm.$on( event, callback )   #监听当前实例上的自定义事件。  
vm.$once( event, callback )   #监听一个自定义事件，但是只触发一次.  
vm.$off( [event, callback] )   #移除自定义事件监听器。  
vm.$emit( eventName, […args] )   #触发当前实例上的事件。  
vm.$mount( [elementOrSelector] )   #-生命周期-挂载实例  
vm.$forceUpdate()   #-生命周期-重新渲染  
vm.$nextTick( [callback] )   #-生命周期-将回调延迟到下次 DOM 更新循环之后执行。  
vm.$destroy()   #-生命周期-销毁实例  

5、其他
5.1 内置组件
component   #渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。  
transition   #为单个元素/组件的过渡效果。  
transition-group   #为多个元素/组件的过渡效果。  
keep-alive   #动态组件  
slot   #为组件模板之中的内容分发插槽。  

5.2 特殊特性
key: number | string   #设置唯一的值  
ref: string   #用来给元素或子组件注册引用信息。  
is: string | Object (组件的选项对象)   #用于动态组件且基于 DOM 内模板的限制来工作。  
slot/slot-scope(已废弃)：v-slot指令替代  
scope(已移除)  

5.3 过渡&动画
转至过渡&动画
5.4 可复用性&组合
混入 (mixins)：混入对象可以包含任意组件选项；选项合并；Vue.mixin全局混入。 
渲染函数 & JSX ：render 函数
5.5 插件
Vue.use(MyPlugin)   #使用插件  
# 开发插件
MyPlugin.install = function (Vue, options) {  
 # 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  # 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      #  逻辑...
    }
    # ...
  })
  # 3. 注入组件
  Vue.mixin({
    created: function () {
      #  逻辑...
    }
    # ...
  })
  #  4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    #  逻辑...
  }
}

5.6 过滤器
常用于文本格式化，用在双花括号插值和 v-bind 表达式中。
{{ message | capitalize }}
<div v-bind:id="rawId | formatId"></div>  
#局部过滤器
filters: {  
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
#全局过滤器
Vue.filter('dateFormat', function (time,format) {  
    let t = new Date(time);
    let tf=(str)=>(str.toString().padStart(2,'0'));
    return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
        switch(a){
            case 'yyyy':
                return tf(t.getFullYear());
                break;
            case 'MM':
                return tf(t.getMonth() + 1);
                break;
            case 'mm':
                return tf(t.getMinutes());
                break;
            case 'dd':
                return tf(t.getDate());
                break;
            case 'HH':
                return tf(t.getHours());
                break;
            case 'ss':
                return tf(t.getSeconds());
                break;
        }
    })
})