• vue1.0 -vue 2.0

    vue.js

    发表于 2017-01-15   |  

    vue基础

    vue1.0

    vue1.0对象的属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    var vm = new Vue({
    el:'#box', //容器
    data:{ //数据
    msg:"data",
    a:1
    },
    methods:{ //普通方法
     
    },
    computed:{ //计算属性(属性b随着其return中相关的属性改变而改变)
    b:function(){ //b是一个属性，使用方法和data里的属性一样，return的就是它的值
    return a*3
    },
    b2:{ //b是默认走get的写法，b2是完整写法
    get:function(){
    return a*3
    },
    set:function(val){ //val是对b2进行设置时赋的值
    //对data的个个属性进行设置，之后还会执行get通过本身与属性的关系改变自己的值
    }
    }
    },
    transitions:{ //定义所有动画名称
    bounce:{ //与上面自定义动画名称对应
    enterClass:'zoomInLeft', //进入时执行的动画
    leaveClass:'zoomOutRight' //离开时执行的动画
    }
    }
    })

    vue1.0的生命周期

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    var vm=new Vue({
    // 钩子函数
    init:function(){
    alert("实例刚被创建,还没属性什么的")
    },
    created:function(){
    alert('实例已经创建,已经有属性了');
    },
    beforeCompile:function(){
    alert('编译之前');
    },
    compiled:function(){
    alert('编译之后');
    },
    ready:function(){
    alert('插入到文档中');
    },
    beforeDestroy:function(){
    alert('销毁之前');
    },
    destroyed:function(){
    alert('销毁之后');
    }
    });
     
    /*点击页面销毁vue对象*/
    document.onclick=function(){
    vm.$destroy();
    };

    vue1.0实例的方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var vm = new Vue({
    el:'#box', //容器
    data:{ //数据
    msg:"data",
    a:1
    },
    })
     
    vm.$el //DOM元素#box
    vm.$data //就是实例的数据
    vm.$mount("#box") //手动将vm实例对象挂载到#box上
    vm.$options //实例对象的配置参数
    vm.$detroy //销毁对象
    vm.$log() //查看现在的数据状态
    vm.$watch("data attr",function(){ //监听data attr属性的变化
    console.log("当data attr发生变化是就会执行这里");
    },{deep:true}) //第三个参数是深度监听

    过滤器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    v-for="val in arr | filterBy a" //值循环数组中含有a的
    v-for="val in arr | limitBy a" //只要含有a的
    v-for="val in arr | limitBy 2" //只要前两位
    v-for="val in arr | limitBy 2 1" //只要两位，从第一位开始算
    v-for="val in arr | orderBy 1" //正序排列
    v-for="val in arr | orderBy -1" //倒叙排列
     
    //自定义过滤器
    Vue.filter("过滤器名",function(val,参数...){ //val 是竖杆前变量的值
    return 。。。。 //返回的就是处理后的值
    })

    指令

    系统指令

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    ```
    #### 自定义指令
    ```javascript
    //加了 v-red 属性的原始字体就会变红
    Vue.directive("red",function(){
    this.el.style.color="red"; //this.el 原生的加了指令的原始
    })
     
    //加了 v-color="'red'" 颜色变红
    Vue.directive("color", function(attr) {
    this.el.style.color = attr;
    })
     
    //通过指令直接操作DOM元素
    Vue.directive('drag', function() {
    var oDiv = this.el; //
    oDiv.onmousedown = function(ev) {
    var disX = ev.clientX - oDiv.offsetLeft;
    var disY = ev.clientY - oDiv.offsetTop;
     
    document.onmousemove = function(ev) {
    var l = ev.clientX - disX;
    var t = ev.clientY - disY;
    oDiv.style.left = l + 'px';
    oDiv.style.top = t + 'px';
    };
    document.onmouseup = function() {
    document.onmousemove = null;
    document.onmouseup = null;
    };
    };
    });

    过渡动画

    1
    2
    //在行间加入 transition="定义的动画名称"
    //css 样式中写出2.0那样的动画就行

    animate.js 库

    1、给要添加动画的东西加速 class=”animated”
    2、在行间加入 transition=”bounce” (自定义定义的动画名称)
    3、Vue配置加入transitions

    1
    2
    3
    4
    5
    6
    7
    8
    var vm=new Vue({
    transitions:{ //定义所有动画名称
    bounce:{ //与上面自定义动画名称对应
    enterClass:'zoomInLeft', //进入时执行的动画
    leaveClass:'zoomOutRight' //离开时执行的动画
    }
    }
    });

    组件

    1、定义组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    //方法一
    var Co = Vue.extend({
    data:function(){ //组件里面的数据必须是一个函数，并且必须返回一个json对象
    retrun {
    msg:"标题"
    }
    },
    template:"<div>{{msg}}</div>"
    })
    Vue.component("组件名",Co); //这样注册组件是全局组件
     
    //方法二
    var vm=new Vue({
    el:"#box",
    data:{
    msg:"标题"
    },
    components:{ //这样注册组件是局部组件
    '组件名'：Co,
    '组件名'：{ //直接定义
    data(){
    retrun {
    msg:"标题"
    }
    },
    template:"<div>{{msg}}</div>"
    }
    }
    });
     
    //方法三 动态组件
    //html 中
    <component :is="com"><component>
    //js 中
    var vm=new Vue({
    el:"#box",
    data:{
    com:"组件名"
    },
    components:{
    '组件名'：{
    retrun {
    msg:"标题"
    }
    },
    template:"<div>{{msg}}</div>"
    }
    }
    });
    //随时切换com的value切换组件

    2、组件信息传递
    父传子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    //html
    <template id="aaa">
    <h1>11111</h1>
    <bbb :data="msg" :data2="msg2"></bbb> //1传入
    </template>
    //js
    var vm = new Vue({
    components: {
    'aaa': {
    data() {
    return {
    msg: '我是父组件的数据',
    msg2: '我是父组件的数据2'
    }
    },
    template: '#aaa',
    components: {
    'bbb': {
    props: ['data','data2'], //2接收
    // props: {
    // 'data':'类型',
    // 'data2':'类型'
    // },
    template: '<h3>{{data}}</h3>' //3显示我是父组件的数据
    }
    }
    }
    }
    });

    vue2.0 变化

    小变化

    1、不支持片段代码

    2、组件

    1
    2
    3
    var json = {}
    Vue.component("组件名",json);//直接一个json不需要 Vue.extend({});
    //在实例中注册也可以

    3、循环
    –去掉了隐式一些变量 $index $key
    –之前: v-for=”(index,val) in array”
    –现在: v-for=”(val,index) in array” 如果循环的是json 参数二可以是key
    –循环时加上 :key=”index” //为了提升性能可以不加

    4、自定义键盘指令
    之前：Vue.directive(‘on’).keyCodes.ctrl=17;

    现在:  Vue.config.keyCodes.ctrl=17

    5、过滤器
    删除了所有内置过滤器，只能自定义过滤器
    只是传参数方式改变了

    1
    2
    3
    Vue.filter('过滤器名',function(obj,参数1,参数n){ //{{ data | 过滤器 ('参数1','参数n')}} obj就是data
    return; 还是显示return出来处理后的值
    })

    大变化

    vue2.0的生命周期

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    var vm=new Vue({
    // 钩子函数
    beforeCreate(){
    console.log('组件实例刚刚被创建,还没属性');
    },
    created(){
    console.log('实例已经创建完成,有属性了');
    },
    beforeMount(){
    console.log('模板编译之前');
    },
    mounted(){
    console.log('模板编译完成');
    },
    beforeDestroy(){
    console.log('组件销毁之前');
    },
    destroyed(){
    console.log('组件销毁之后');
    },
    //更新是新增的
    beforeUpdate(){
    console.log('组件更新之前');
    },
    updated(){
    console.log('组件更新完毕');
    }
    });

    组件通信

    1、自己不能直接改父级传入的数据,但是能改传入的对象的属性
    2、单一事件管理组件通信(类似vuex)
    – 首先要在全声明一个所有组件都能访问到的vue对象 var Event = new Vue();
    –这个Event 含有$emit() 和 $on() 事件分别发送数据和接收数据
    –Event.$emit(“自定义事件名称”,data); 发送数据
    –Event.$on(“自定义事件名称”,function(data){}.bind(this)) // 接收数据 并且绑定作用域
    – 一个组件中发送一个数据 所有组件都能通过 Event.$on() 方式得到数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>智能社</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
     
    </style>
    <script src="vue.js"></script>
    <script>
    //准备一个空的实例对象
    var Event=new Vue();
     
     
    var A={
    template:`
    <div>
    <span>我是A组件</span> -> {{a}}
    <input type="button" value="把A数据给C" @click="send">
    </div>
    `,
    methods:{
    send(){
    Event.$emit('a-msg',this.a);
    }
    },
    data(){
    return {
    a:'我是a数据'
    }
    }
    };
    var B={
    template:`
    <div>
    <span>我是B组件</span> -> {{a}}
    <input type="button" value="把B数据给C" @click="send">
    </div>
    `,
    methods:{
    send(){
    Event.$emit('b-msg',this.a);
    }
    },
    data(){
    return {
    a:'我是b数据'
    }
    }
    };
    var C={
    template:`
    <div>
    <h3>我是C组件</h3>
    <span>接收过来的A的数据为: {{a}}</span>
    <br>
    <span>接收过来的B的数据为: {{b}}</span>
    </div>
    `,
    data(){
    return {
    a:'',
    b:''
    }
    },
    mounted(){
    //var _this=this;
    //接收A组件的数据
    Event.$on('a-msg',function(a){
    this.a=a;
    }.bind(this));
     
    //接收B组件的数据
    Event.$on('b-msg',function(a){
    this.b=a;
    }.bind(this));
    }
    };
     
     
    window.onload=function(){
    new Vue({
    el:'#box',
    components:{
    'com-a':A,
    'com-b':B,
    'com-c':C
    }
    });
    };
    </script>
    </head>
    <body>
    <div id="box">
    <com-a></com-a>
    <com-b></com-b>
    <com-c></com-c>
    </div>
    </body>
    </html>

    过渡动画

    (1) 到2.0以后 transition 组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    //写法与内置事件
    <transition name="fade"
    @before-enter = "fn" //在四个状态的enter执行之前执行
    @enter = "fn" //动画enter进入时执行 //回调中会有一个元素是当前使用动画的元素
    @after-enter = "fn" //动画进入之后执行
    @before-leave ="fn"
    @leave ="fn"
    @after-leave ="fn" //离开
    >
    //运动东西(元素，属性、路由....)
    </transition>
     
    //class定义:
    .fade-enter{} //初始状态
    .fade-enter-active{} //变化成什么样 -> 当元素出来(显示)
     
    .fade-leave{} //开始结束时初始状态
    .fade-leave-active{} //变成成什么样 -> 当元素离开(消失)
     
    //一般只给 .fade-leave-active,.fade-enter-active 添加过渡

    (2) vue2.0 与 animate.css 结合使用
    –引入animate.css
    –给运动元素添加class=”animated” 添加到进入离开动画名前面
    –给transition组件添加属性: enter-actioe-class=”进入动画名”,leave-active-class=”离开动画名”
    – 没有了实例属性中的那种写法了

    (3) 配合animate多元素运动

    1
    2
    3
    4
    5
    6
    <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
    <p v-show="show" class="animated" :key="1"></p>
    <p v-show="show" class="animated" :key="2"></p>
    </transition-group>
     
    //必须加唯一标志位

    vue的插件

    vue-devtools vue调试插件 理顺组件的关系

    GitHub直接搜 vue-devtools

    vue-resource

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    this.$http(.......) //默认使用get方式
    //get 无传值
    this.$http.get('a.txt').then(function(res){
    alert(res); //成功回调
    },function(res){
    alert(res); //失败回调
    });
    //get 传值
    this.$http.get('get.php',{ a:1, b:2 }).then(function(res){
    alert(res.data);
    },function(res){
    alert(res.status);
    });
    //post
    this.$http.post('post.php',{a:1,b:20},{
    emulateJSON:true //post要传一个头信息，这边是加这个标志
    }).then(function(res){
    alert(res.data);
    },function(res){
    alert(res.status);
    });
    //jsonp 获取本域之外的数据(只要有接口的路径部分 + ？后面的回调和关键字的键值对就能正常访问了)
    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
    wd:'a' //搜索关键字为a,wd是百度上关键字对应的键
    },{
    jsonp:'cb' //设置回调函数名称，取你使用的接口上的回调函数名，默认callback不要设置
    }).then(function(res){
    alert(res.data.s);
    },function(res){
    alert(res.status);
    });

    Vuex

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    // 1、在main.js文件中引入单独文件，并根路由一样存入vue实例中
    import store from './store'
    new Vue({
    store,
    el: '#app',
    render: h => h(App)
    })
    // 2、store.js
    import Vue from 'vue'
    import Vuex from 'vuex'
     
    Vue.use(Vuex);
     
    var state = {//数据
    count: 10
    };
     
    const mutations = {
    addNumber(state) { //处理状态(数据)变化
    state.count++;
    },
    lessNumber(state) {
    state.count--;
    }
    };
     
    const actions = { //给mapActions组件提供的方法
    increment: ({ //处理你要干什么，异步请求，判断，流程控制
    commit
    }) => {
    commit('addNumber') //当组件中触发该方法时，指向mutations中的addNumber
    },
    decrement: ({
    commit
    }) => {
    commit('lessNumber');
    },
    clickOdd: ({ //state就是当前参考的stsate
    commit,
    state
    }) => {
    if (state.count % 2 == 0) {//过滤 通过某个条件时才指向mutations中的addNumber
    commit('addNumber')
    }
    },
    clickAsync: ({
    commit
    }) => {
    new Promise((resolve) => {
    setTimeout(function() {
    commit('addNumber');
    resolve();
    }, 1000);
    });
    }
    };
     
    const getters = { //给组件中 mapGetters 提供的数据
    count(state) {
    return state.count;
    },
    getOdd(state) {
    return state.count % 2 == 0 ? '偶数' : '奇数';
    }
    };
     
     
    //需要导出Store对象
    export default new Vuex.Store({ //把定义好的对象挂载到Vuex.Store中,大型项目最后分别设置一个文件
    state,
    mutations,
    actions,
    getters
    });
    // 3、组件中使用
    import {mapGetters, mapActions} from 'vuex'
     
    export default{
    computed:mapGetters([ //获取数据 跟data的数据一样使用 {{count}}
    'count',
    'getOdd'
    ]),
    methods:mapActions([ //获取方法
    'increment',
    'decrement',
    'clickOdd',
    'clickAsync'
    ])
    }

    elementUi and MintUl

    饿了么提供的基于vue的开源ui框架(前者真的pc,后者针对移动端)

    配置

      1. 安装 element-ui
        npm i element-ui -D
        npm install element-ui –save-dev
        // i -> install
        // D -> –save-dev
        // S -> –save

      2. 引入 main.js 入口文件
        import ElementUI from ‘element-ui’
        import ‘element-ui/lib/theme-default/index.css’ //注意引入loder style!css

      3. 使用组件
        Vue.use(ElementUI)
  • 相关阅读:
    反射、面向对象（基础篇）
    配置文件
    模块补充 、迭代器和 生成器
    模块
    正则表达式
    冒泡排序、递归和简单装饰器
    使用Apache Archiva管理Maven仓库
    AppScan9.0.3.5漏洞扫描记录
    Linux环境下安装Websphere8.5.5
    如何排查网络通讯状况
  • 原文地址：https://www.cnblogs.com/KLYY/p/7197063.html
Copyright © 2020-2023  润新知