Vue框架基础 返回首页

发表于 2020-02-16 | 本文共 1014 字

Vue框架

TARGET

Vue概述

优势

Vue基本使用

步骤

  1. 需要提供标签用于填充数据
  2. 引入Vue.js库文件
  3. 可以使用Vue的语法开发功能
  4. 把vue提供的数据填充到标签里面

实例参数分析

插值表达式

运行原理

Vue模板语法

前端渲染

渲染方式

指令

什么是指令
v-cloak指令用法
数据绑定指令

数据响应式

双向数据绑定

事件绑定

综合案例计算器

属性绑定

Vue如何动态处理属性
    v-bind
    <a v-bind:href='url'>跳转</a>
    缩写
    <a :href='url'>跳转</a>
v-model的底层实现原理
//使用输入域中最新的数据覆盖原来的数据
 <input v-bind:value='msg' v-on:input='msg=$event.target.value'>

样式绑定

class样式处理
+ 数组语法
```html
<div v-bind:class="{activeClass, errorClass}"></div>

分支循环结构

分支结构
v-if/v-show区别
循环结构
Tab选项卡案例

常用特性

表单操作
基于Vue的表单操作
表单域修饰符
钩子函数
自定义指令语法规则(获取焦点元素)
    Vue.directive('focus' {
        inserted: function(el) {
            //获取焦点元素
            el.focus();
        }
    })

    <input type="text" v-focus>
带参数的自定义指令(改变元素背景色)
    Vue.directive('color', {
        inserted: function(el, binding) {
            el.style.backgroundColor = binding.value.color;
        }
    })

    <input type="text" v-color='{color: "orange"}'>
局部指令(只能运用在本组件中)
    directives: {
        focus: {
            inserted: function(el) {
                el.focus();
            }
        }
    }
计算属性
计算属性的用法
    computed: {
        reverseMessage: function() {
            return this.msg.split(')reverse().join('');
        }
    }
计算属性与方法的区别
侦听器
侦听器的用法
    watch: {
        firstName: function(val) {
            // val表示变化后的值
            this.fullName = val + this.lastName;
        }
        lastName: function(val) {
            this.fullName = this.firstName + val;
        }
    }
侦听器应用场景
过滤器
过滤器作用
自定义过滤器
    Vue.filter('name', fucntion(value) {
        // 
    })
    <div></div>
    <div></div>
    <div v-bind:id="id | formatId"></div>
局部自定义过滤器
    filters: {
            upper: function(val) {
                return val.charAt(0).toUpperCase() + val.slice(1);
            }
        },
带参数的过滤器
    Vue.filter('format', function(value, args) {
        //
    })
    <div></div>
使用过滤器格式化日期
Vue.filter('format', function(value, arg) {
            function dateFormat(date, format) {
                if(typeof date === 'string') {
                    var mts = date.match(/(\/Date\((\d+)\)\/)/);
                    if(mts && mts.length >= 3) {
                        date = parseInt(mts[2]);
                    }
                }
                date = new Date(date);
                if(!date || date.toUTCString() == "Invalid Date") {
                    return "";
                }
                var map = {
                    "M": date.getMonth() + 1,
                    "d": date.getDate(),
                    "h": date.getHours(),
                    "m": date.getMinutes(),
                    "s": date.getSeconds(),
                    "q": Math.floor((date.getMonth() + 3) / 3),
                    "S": date.getMilliseconds()
                };
                format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                    var v = map[t];
                    if(v !==undefined) {
                        if(all.length > 1) {
                            v = '0' + v;
                            v = v.substr(v.length - 2);
                        }
                        return v;
                    } else if(t === 'y') {
                        return (date.getFullYear() + '').substr(4 - all.length);
                    }
                    return all;
                });
                return format;
            }
            return dateFormat(value, arg);
        });
生命周期(钩子函数)
  1. 主要阶段
    • 挂载(初始化相关属性)
    • beforeCreate
    • created
    • beforeMount
    • mounted(el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子) + 更新(元素或组件的变更操作)
    • beforeUpdate
    • updated + 销毁(销毁相关属性)
    • beforeDestroy
    • destroed

本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

如果你觉得本文海星，不妨请我喝杯咖啡

赏