vue 笔记(正在补充中。。。)

最新推荐文章于 2023-11-01 22:59:25 发布

bobobocai

最新推荐文章于 2023-11-01 22:59:25 发布

阅读量2k

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/bobobocai/article/details/74178025

版权

Vue1.x 和 Vue2.x 的区别

 1. 用index代替$index
 2. 过滤器 : 只存在自定义过滤器，自带的过滤器取消
 3. 配置keyCodes Vue.config.keyCodes.ctrl = 17 代替Vue.directive(‘on’).keyCodes = 17;

.ctrl 和 .alt 会报错，其他待发现

es6语法

toggle(){}  -->  toggle：function(){}

bower用法

bower-> （前端）包管理器 -->和npm类似
下载：npm install bower -g   
验证：bower --version
bower install     <包名>#版本号   下载Vue
bower uninstall   <包名>#版本号   卸载Vue
bower info        <包名>          查看包版本信息
<script src="bower_components/vue/dist/vue.js"></script>

vue

vue到底是什么?

vue是一个mvvm框架(库)、和angular类似，比较容易上手、小巧

vue和angular区别?

vue——简单、易学
    指令以 v-xxx
    一片html代码配合json，在new出来vue实例
    个人维护
    适合: 移动端项目,小巧
angular——上手难
    指令以 ng-xxx
    所有属性和方法都挂到$scope身上
    angular由google维护
    合适: pc端项目
共同点: 不兼容低版本IE

常用指令 : 扩展html标签功能,属性

v-model : 一般表单元素(input) 双向数据绑定
循环:
    v-for = "v in arr" {{v}} {{$index}}
    v-for = "v in json" {{v}} {{$key}} {{$index}}
    v-for = "(k,v) in json" {{v}} {{k}}/{{$key}} {{$index}}
事件: 
    v-on:click="add()"
    v-on:click/mouseout/mouseover/dblclick/mousedown.....
    new Vue({
        el:'#box',
        data:{ //数据
            arr:['apple','banana','orange','pear'],
            json:{a:'apple',b:'banana',c:'orange'}
        },
        methods:{
            add:function(){ //方法
                this(new出来的vue).arr(使用data里面的数据);
            }
        }
    });
显示隐藏:
    v-show=“true/false”

事件:

v-on:click/mouseover......
简写的:
@click=" "      推荐
事件对象:
    @click="show($event)"
事件冒泡:
    阻止冒泡:  
        a). ev.cancelBubble=true;  需要事件对象
        b). @click.stop            vue提供的(推荐)
默认行为(默认事件):
    阻止默认行为:(鼠标右键的默认行为)
        a). ev.preventDefault();    需要事件对象
        b). @contextmenu.prevent    推荐
键盘:
    @keydown    $event ev.keyCode
    @keyup
常用键:
    回车
        a). @keyup.13
        b). @keyup.enter
    上、下、左、右
        @keyup/keydown.left
        @keyup/keydown.right
        @keyup/keydown.up
        @keyup/keydown.down
        .....

属性:

v-bind:src=""
    width/height/title....
简写:
    :src="" 推荐
    <img src="{{url}}"> 效果能出来，但是会报一个404错误
    <img v-bind:src="url">  效果可以出来，不会发404请求

class和style:
    :class=""    v-bind:class=""
    :style=""    v-bind:style=""
    :class="[red]"  red是数据
    :class="[red,b,c,d]"
    :class="{red:a, blue:false}"
    :class="json"
        data:{
            json:{red:a, blue:false}
        }
    --------------------------
    data:{
        c:{color:'red'},
        b:{backgroundColor:'blue'} 注意:  复合样式，采用驼峰命名法
        json:{color:'red', backgroundColor:'blue'}
    }
    style:
    :style="[c]"
    :style="[c,d]"
    :style="json"

模板:

{{msg}}     数据更新模板变化
{{*msg}}    数据只绑定一次
{{{msg}}}   HTML转义输出

过滤器:-> 过滤模板数据

系统提供一些过滤器:
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase  大写  eg: {{'welcome'| uppercase}}
lowercase  小写
capitalize 首字母大写
currency   钱  {{ 12 | currency ￥}}
{{msg| filterA 参数}}
....

交互

如果vue本身不支持，想做交互
    需要引入: vue-resouce
    get.php/post.php:
        <?php
        $a=$_GET['a'];
        $b=$_GET['b'];
        echo $a+$b;
        ?>
    new Vue({
        el:'#box',
        data:{
            myData:[],
            t1:'',
            now:-1
        }
        methods:{
            get:function(){
            获取一个普通文本数据:
                this.$http.get('aa.txt').then(function(res){
                    alert(res.data);//成功
                },function(res){
                    alert(res.status);//失败
                });
            给服务器发送数据:√
                this.$http.get('get.php',{
                    a:1,
                    b:2
                }).then(function(res){
                    alert(res.data);
                },function(res){
                    alert(res.status);
                });
            },  
            post:function(){
                this.$http.post('post.php',{
                    a:1,
                    b:20
                },{
                    emulateJSON:true  //必须要加上
                }).then(function(res){
                    alert(res.data);
                },function(res){
                    alert(res.status);
                });
            },
            get:function(){//jsonp  百度搜索框例子
                if(ev.keyCode==38||ev.keyCode==40)return;//在按向上或向下的箭头的时候不会发送请求
                if(ev.keyCode==13){//按回车键会自动在百度上搜索你选择的内容
                     window.open('http://www.baidu.com/s?wd=' + this.t1);
                  }this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                    wd:this.t1
                },{
                    jsonp:'cb'  //callback名字，默认名字就是"callback"，此时在百度接口中是cb
                }).then(function(res){
                   this.myData=res.data.s;
                },function(res){
                    alert(res.status);
                });
            },
            changeDown:function(){ 
                this.now++;
                if(this.now==this.myData.length)this.now=-1;
                this.t1=this.myData[this.now];
            }
            changeUp:function(){
                this.now--;
                if(this.now==-2)this.now=this.myData.length-1;
                this.t1=this.myData[this.now];
            }
        }
<div id="box">
    <input type="text" v-modal="t1" @keyup="get($event)" @keydown.down="changeDown()"  @keydown.up.prevent="changeUp()">
    <ul>
        <li v-for="value in myData" :class="{gray:$index==now}">
            {{value}}
        </li>
    </ul>
    <p v-show="myData.length==0">暂无数据。。。</p>
</div>

360接口   https://sug.so.360.cn/suggest?callback=suggest_so&word=a
百度接口  https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

vue事件:

@click=""
数据:
添加一条留言：
获取某一页数据:
    getPageData(1);
vue生命周期:
    钩子函数(可以使用的函数)    执行的时期
    created         ->   实例创建好之后,编译之前   √ 
    beforeCompile   ->   编译之前
    compiled        ->   编译之后
    ready           ->   插入到文档中 √
    vm.$destroy() 销毁实例
    beforeDestroy   ->   销毁之前
    destroyed       ->   销毁之后

用户会看到花括号标记:（闪烁）
    v-cloak     防止闪烁, 比较大段落
    v-text 也可以防止闪烁，但是不能转义html
    v-html 转义html
<div class='v-cloak'><span>{{msg}}</span></div> 
<span v-text='msg'></span>
<span v-html='msg'></span>

计算属性:

    var vm = new Vue({
        aa:11,
        el:'#box',
        data:{
            a:1
        },
        computed:{
            b:function(){   //默认调用get，b的值取决于返回值
                return this.a+1;
            },
            b:{
                get:function(){ 
                    return this.a+1;
                },
                set:function(val){
                    this.a=val;
                }
            }
        }
    })
    document.onclick=function(){
        vm.b=10;
    }
    computed里面可以放置一些业务逻辑代码，一定记得return
    vm.$el           ->  就是元素，相当于document.getElementById;
    vm.$data         ->  就是data,实例的数据
    vm.$mount('#box') ->  手动挂载vue程序, 相当于el:’ ’
    vm.$options.aa   ->  获取自定义属性
    vm.$destroy          ->  销毁对象
    vm.$log();       ->  查看现在数据的状态

循环：

v-for="value in data" 不可以添加重复数据
会有重复数据？
track-by='索引'   提高循环性能
track-by='$index/uid(数据id)'

过滤器:

vue提供的过滤器：
capitalize  uppercase  currency
debounce 延迟 配合键盘事件使用
    @keyup="show|debounce 2000" 延迟2秒执行

limitBy  限制数量
    limitBy num 取几个
    limitBy num1 num2 从哪个位置开始
    v-for="val in arr|limitBy 2"
filterBy  过滤数据
    filterBy 'w' 过滤谁
orderBy 排序 
    orderBy ‘谁’ 1  正序排列
    orderBy -1 到序排列

自定义过滤器:  model ->过滤 -> view
    {{ a | name 1 2}}
    Vue.filter(‘name’,function(input, a, b){
        a：参数1； b：参数2；
    });
时间转化器：
双向过滤器:*（过滤html标记）
    Vue.filter('filterHtml',{
        read:function(input){ //model-view
            return input.replace(/<[^<+]>/g,'');
        },//（model -> view）
        write:function(val){ //view -> model
            return val;  //未执行
        } //(view -> model)
    });

自定义指令:

属性:
Vue.directive(red-->指令名称,function(参数){
    this.el -> 原生DOM元素
});
<div v-red="a-->参数"></div> * 注意: 必须以 v-开头
指令名称:   v-red  ->  red

拖拽:
    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;
            };
        };
    });

    window.onload=function(){
        var vm=new Vue({
            el:'#box',
            data:{
                msg:'welcome'
            }
        });
    };
<div id="box">
    <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
</div>

自定义元素指令:（用处不大）
    Vue.elementDirective('zns-red',{
        bind:function(){
            this.el.style.background='red';
        }
    });
<zns-red></zns-red>

自定义键盘信息:
    Vue.directive('on').keyCodes.ctrl=17;

监听数据变化:

vm.$el/$mount/$options/....
vm.$watch(name,fnCb);  //浅度
    fnCb 回调函数，监听的数据发生变化后执行的函数
vm.$watch(name,fnCb(){},{deep:true});  //深度监视 可以监视对象

vue过渡(动画) animate.css 动画库

本质和css3一样: transtion ,animation
1.首先规定动画的名称

<div  id="box">
  <button  @click="show = !show">按钮</button>
  <transition  name="fade">
    <div  v-if="show">一个div</div>
  </transition>
</div>

2.定义Vue实例

new Vue({
  el: '#box',
  data: {
    show: true
  }
})

3.定义动画的样式

进去
.fade-enter-active {
  animation: fade-in .5s;
}
出来
.fade-leave-active {
  animation: fade-out .5s;
}

@keyframes fade-in {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fade-out {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

4.过渡

.fade-enter-active {
  transition: all .3s ease;
}
.fade-leave-active {
  transition: all .8s ease;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}

5.过渡和动画只有在定义样式的时候不一样，其他的都是一样的

vue组件:

组件: 一个大对象

定义一个组件:

1 全局组件

var Aaa=Vue.extend({
    template:'<h3>我是标题3</h3>'
});
Vue.component('aaa',Aaa);
    *组件里面放数据:
        data必须是函数的形式，函数必须返回一个对象(json) 事例-Vue组件-其他
var Aaa=Vue.extend({
data(){
return{
msg:’我是标题…’
};
}
    template:'<h3>{{msg}}</h3>'
});

2 局部组件

放到某个组件内部
var vm=new Vue({
    el:'#box',
    data:{
        bSign:true
    },
    components:{ //局部组件，只在box里面才可以用
        ‘aaa’:Aaa
    }
});

另一种编写方式:

    Vue.component('my-aaa',{ //全局的，用的多些
        template:'<strong>好</strong>'
    });
    var vm=new Vue({
        el:'#box',
        components:{ //局部的
            'my-aaa':{
                data(){
                    return {
                        msg:'welcome vue'
                    }
                },
                methods:{               
                    change(){
                        this.msg='changed';
                    }
                },
                template:'<h2 @click="change">标题2{{msg}}</h2>'
            }
        }
    });

配合template模板:
1. template:'<h2 @click="change">标题2->{{msg}}</h2>'
2. 单独放到某个地方
a). <script type="x-template" id="aaa"> <h2 @click="change">标题2->{{msg}}</h2> </script> b). <template id="aaa">//推荐 <h1>标题1</h1> <ul> <li v-for="val in arr"> {{val}} </li> </ul> </template> var vm=new Vue({ el:'#box', components:{ //局部的 'my-aaa':{ data(){ return { msg:'welcome vue', arr:['apple','banana','orange'] } }, methods:{ change(){ this.msg='changed'; } }, template:'#aaa' } } });
3 动态组件:

    <input type="button" @click="a='aaa'" value="aaa组件">
    <input type="button" @click="a='bbb'" value="bbb组件">
    <component :is="a(组件名称)"></component>
    var vm=new Vue({
        el:'#box',
        data:{
            a:'aaa'
        },
        components:{
            'aaa':{
                template:'<h2>我是aaa组件</h2>',
            },
            'bbb':{
                template:'<h2>我是bbb组件</h2>'
            }
        }
    });

组件数据传递: vue默认情况下，子组件也没法访问父组件数据

    var vm=new Vue({
        el:'#box',
        data:{
            a:'aaa'
        },
        components:{
            'aaa':{//父组件
                data(){
                    return{
                        msg:'我是父组件的数据‘’
                    }
                },
                template:'<h2>我是aaa组件--》{{msg}}</h2><bbb></bbb>',//父组件可以直接使用自己以及子组件的数据
                components:{
                    'bbb':{//子组件
                        template:'<h3>我是bbb组件</h3>'
                    }
                }
            },
            'bbb':{
                template:'<h2>我是bbb组件</h2>'
            }
        }
    });

子组件就想获取父组件data
在调用子组件：

    <template id="aaa"> //只要在这个模板之重都可以拿到msg的数据
        <h1>1111-->{{msg}}</h1>
        <bbb :m="msg"></bbb>
    </template>
    var vm=new Vue({
        el:'#box',
        data:{
            a:'aaa'
        },
        components:{
            'aaa':{//父组件
                data(){
                    return{
                        msg:'我是父组件的数据‘’
                    }
                },
                template:'#aaa',
                components:{
                    'bbb':{//子组件
                        props:{'m':String},//props:['m']//多个数据：props:{'m':String,'myMsg':Number}
                        template:'<h3>我是bbb组件 {{m}}</h3>'
                    }
                }
            }
        }
    });

子组件之内:
    props:['m','myMsg']
    props:{
        'm':String,
        'myMsg':Number
    }

2. 父级获取子级数据

    原理：子组件把自己的数据，发送到父级  -->vm.$emit(事件名,数据);
    <template id="aaa"> //只要在这个模板之重都可以拿到msg的数据
        <span>我是父级  -->{{msg}}</span>//一开始获取的是父组件的msg，点击按钮之后变成子组件的msg
        <input type="button" value="按钮">
        <bbb @child-msg="get"></bbb>//接受数据
    </template>
    <template id="bbb"> //只要在这个模板之重都可以拿到msg的数据
        <h2>我是子组件</h2>
        <input type="button" value="提交" @click="send">
    </template>
    var vm=new Vue({
        el:'#box',
        data:{
            a:'aaa'
        },
        components:{
            'aaa':{//父组件
                data(){
                    return{
                        msg:'我是父组件的数据'
                    }
                },
                template:'#aaa',
                methods:{
                    get:(msg){
                        this.msg=msg;
                    }
                },
                components:{
                    'bbb':{//子组件
                        data(){
                            return{
                                a:'我是子组件的数据'
                            }
                        },
                        template:'#bbb',
                        methods:{
                            send(){
                                this.$emit('child-msg',this.a);
                            }
                        },
                    }
                }
            }
        }
    });

slot

    <div id="box">
        <aaa>  
             <ul> 
                 <li>111</li>
                 <li>222</li>
                 <li>333</li>
             </ul>
        </aaa>
    </div>
    <template id="aaa">
        <h2>XXXX</h2>
        <slot>占个位置</slot>//在页面渲染的时候如果aaa标签里面有其他标签，slot标签里面的内容将被替代
        <p>welcome vue</p>
    </template>
    var vm=new Vue({
        el:'#box',
        data:{
            a:'aaa'
        },
        components:{
            'aaa':{
                template:'#aaa',
            }
        }
    });

类似ng里面 transclude （指令）-> SPA应用，单页面应用
vue-resouce 交互
vue-router 路由
根据不同url地址，出现不同效果
咱上课: 0.7.13
主页 home
新闻页 news

html:
主页跳转链接

展示内容:
<router-view></router-view>

js:

//1. 准备一个根组件
var App=Vue.extend();
//2. Home News组件都准备
var Home=Vue.extend({
    template:'<h3>我是主页</h3>'
});
var News=Vue.extend({
    template:'<h3>我是新闻</h3>'
});
//3. 准备路由
var router=new VueRouter();
//4. 关联
router.map({
    'home':{
        component:Home
    },
    'news':{
        component:News
    }
});
//5. 启动路由
router.start(App,'#box');

跳转:
router.redirect({
‘/’:’/home’
});
路由嵌套(多层路由):

主页  home
    登录  home/login
    注册  home/reg
新闻页 news

subRoutes:{
    'login':{
        component:{
            template:'<strong>我是登录信息</strong>'
        }
    },
    'reg':{
        component:{
            template:'<strong>我是注册信息</strong>'
        }
    }
}

路由其他信息:
/detail/:id/age/:age
{{ $route.params | json}} -> 当前参数 {{$ route.path}} -> 当前路径
{{$route.query | json}} -> 数据
vue-loader:
其他loader -> css-loader、url-loader、html-loader…..
后台: nodeJs -> require exports
broserify 模块加载，只能加载js
webpack 模块加载器，一切东西都是模块, 最后打包到一块了
require(‘style.css’); -> css-loader、style-loader
vue-loader基于webpack
.css
.js
.html
.php
…..

a.vue
b.vue

.vue文件:
    放置的是vue组件代码
    <template>
        html
    </template>
    <style>
        css
    </style>
    <script>
        js  （平时代码、ES6）  babel-loader
    </script>

ES6: 模块化开发
导出模块：
export default {}
引入模块:
import 模块名 from 地址
webpak准备工作:
cnpm install webpack –save-dev
cnpm install webpack-dev-server –save-dev

App.vue -> 变成正常代码       vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev

cnpm install vue-html-loader --save-dev

vue-html-loader、css-loader、vue-style-loader、
vue-hot-reload-api@1.3.2

babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime

最最核心：

手动配置自己:
webpack+vue-loader

webpack加载模块

如何运行此项目？
1. npm install 或者 cnpm install
2. npm run dev
-> package.json
“scripts”:{
“dev”:”webpack-dev-server –inline –hot –port 8082”
}

以后下载模块：
npm install –save-dev

EADDRINUSE 端口被占用

少了:
webpack-dev-server
webpack
.vue 结尾，之后称呼组件

路由:

vue-router

    ->  如何查看版本:
        bower info vue-router

路由使用版本: 0.7.13

配合vue-loader使用:
1. 下载vue-router模块
cnpm install vue-router@0.7.13
2. import VueRouter from ‘vue-router’

Vue.use(VueRouter);
配置路由
var router=new VueRouter();
router.map({
路由规则
})
开启
router.start(App,’#app’);

注意:
之前: index.html ->
现在: index.html ->

App.vue ->   需要一个 <div id="app"></div>  根元素

home news
路由嵌套:
和之前一模一样
上线:
npm run build
-> webpack -p
脚手架:
vue-cli——vue脚手架
帮你提供好基本项目结构

本身集成很多项目模板:
simple 个人觉得一点用都没有
webpack 可以使用(大型项目)
Eslint 检查代码规范，
单元测试
webpack-simple 个人推荐使用, 没有代码检查 √

browserify  ->  自己看
browserify-simple

基本使用流程:
1. npm install vue-cli -g 安装 vue命令环境
验证安装ok?
vue –version
2. 生成项目模板
vue init <模板名> 本地文件夹名称
3. 进入到生成目录里面
cd xxx
npm install
4. npm run dev

vue2.0:

bower info vue
http://vuejs.org/

到了2.0以后，有哪些变化?

在每个组件模板，不在支持片段代码
组件中模板:

        之前:
            <template>
                <h3>我是组件</h3><strong>我是加粗标签</strong>
            </template>
        现在:  必须有根元素，包裹住所有的代码
            <template id="aaa">
                    <div>
                        <h3>我是组件</h3>
                        <strong>我是加粗标签</strong>
                    </div>
            </template>

关于组件定义
Vue.extend 这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，咱也不用——废弃

Vue.component(组件名称,{    在2.0继续能用
        data(){}
        methods:{}
        template:
    });

    2.0推出一个组件，简洁定义方式：
    var Home={
        template:''     ->   Vue.extend()
    };

生命周期

    之前:
        init    
        created
        beforeCompile
        compiled
        ready       √   ->     mounted
        beforeDestroy   
        destroyed
    现在:
        beforeCreate    组件实例刚刚被创建,属性都没有
        created 实例已经创建完成，属性已经绑定
        beforeMount 模板编译之前
        mounted 模板编译之后，代替之前ready  *
        beforeUpdate    组件更新之前
        updated 组件更新完毕  *
        beforeDestroy   组件销毁前
        destroyed   组件销毁后

循环
2.0里面默认就可以添加重复数据

arr.forEach(function(item,index){

});

去掉了隐式一些变量
$index$ key

之前:
v-for=”(index,val) in array”
现在:
v-for=”(val,index) in array”
track-by=”id”
变成
自定义键盘指令
之前：Vue.directive(‘on’).keyCodes.f1=17;

现在: Vue.config.keyCodes.ctrl=17
过滤器
之前:
系统就自带很多过滤
{{msg | currency}}
{{msg | json}}
….
limitBy
filterBy
…..
一些简单功能，自己通过js实现

到了2.0，内置过滤器，全部删除了

lodash 工具库 _.debounce(fn,200)

自定义过滤器——还有
但是,自定义过滤器传参
```
之前: {{msg | toDou '12' '5'}}
现在: {{msg | toDou('12','5')}}
```
组件通信:
vm. $emit() vm.$ on();

父组件和子组件:

子组件想要拿到父组件数据:
通过 props

之前，子组件可以更改父组件信息，可以是同步 sync
现在，不允许直接给父级的数据，做赋值操作

问题，就想更改：
a). 父组件每次传一个对象给子组件, 对象之间引用 √
b). 只是不报错, mounted中转
可以单一事件管理组件通信: vuex
var Event=new Vue();

Event.$emit(事件名称, 数据)

Event.$on(事件名称,function(data){
//data
}.bind(this));
debounce 废弃
-> lodash
_.debounce(fn,时间)

vue动画
vue路由
transition 之前属性

.fade-transition{}
.fade-enter{}
.fade-leave{}

到2.0以后 transition 组件

运动东西(元素，属性、路由….)

class定义:
.fade-enter{} //初始状态
.fade-enter-active{} //变化成什么样 -> 当元素出来(显示)

.fade-leave{}
.fade-leave-active{} //变成成什么样 -> 当元素离开(消失)

如何animate.css配合用？

多个元素运动:

vue2.0 路由:
http://router.vuejs.org/zh-cn/index.html
基本使用:
1. 布局

    <router-link to="/home">主页</router-link>
    <router-view></router-view>

路由具体写法

    //组件
    var Home={
        template:'<h3>我是主页</h3>'
    };
    var News={
        template:'<h3>我是新闻</h3>'
    };

    //配置路由
    const routes=[
        {path:'/home', componet:Home},
        {path:'/news', componet:News},
    ];

    //生成路由实例
    const router=new VueRouter({
        routes
    });

    //最后挂到vue上
    new Vue({
        router,
        el:'#box'
    });

重定向
之前 router.rediect 废弃了
{path:’*’, redirect:’/home’}
路由嵌套:
/user/username

const routes=[
{path:’/home’, component:Home},
{
path:’/user’,
component:User,
children:[ //核心
{path:’username’, component:UserDetail}
]
},
{path:’*’, redirect:’/home’} //404
];
/user/strive/age/10

:id
:username
:age
路由实例方法:
router.push({path:’home’}); //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
router.replace({path:’news’}) //替换路由，不会往历史记录里面添加
vue-cli
npm install
脚手架: vue-loader
1.0 ->
new Vue({
el: ‘#app’,
components:{App}
})
2.0->
new Vue({
el: ‘#app’,
render: h => h(App)
})
vue2.0
vue-loader和vue-router配合

style-loader css-loader

style!css

项目:
vue问题:
论坛
http://bbs.zhinengshe.com
UI组件
别人提供好一堆东西

目的: 
    为了提高开发效率
    功能

原则: 拿过来直接使用

vue-cli -> vue-loader

bootstrap:
twitter 开源
简洁、大方
官网文档

基于 jquery

栅格化系统+响应式工具  (移动端、pad、pc)
按钮

bower 前端包管理器 jquery#1.11.1
自动解决依赖
npm node包管理器 jquery@1.11.1

饿了么团队开源一个基于vue 组件库
elementUI PC
MintUI 移动端

elementUI:

如何使用

官网:http://element.eleme.io/

使用:
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’

全部引入

3. 使用组件
Vue.use(ElementUI)

css-loader      引入css
字体图标    file-loader


less:
    less
    less-loader

按需加载相应组件: √
就需要按钮
1. babel-plugin-component
cnpm install babel-plugin-component -D
2. .babelrc文件里面新增一个配置
“plugins”: [[“component”, [
{
“libraryName”: “element-ui”,
“styleLibraryName”: “theme-default”
}
]]]
3. 想用哪个组件就用哪个
引入:
import {Button,Radio} from ‘element-ui’
使用:
a). Vue.component(Button.name, Button); 个人不太喜欢
b). Vue.use(Button); √
发送请求:
vue-resourse 交互

axios

element-ui -> pc

mint-ui

移动端 ui库

http://mint-ui.github.io/

下载
npm install mint-ui -S

-S
–save
引入
import Vue from ‘vue’;
import Mint from ‘mint-ui’;
import ‘mint-ui/lib/style.css’
Vue.use(Mint);

按需引入:
import { Cell, Checklist } from ‘minu-ui’;
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

http://mint-ui.github.io/docs/#!/zh-cn2

论坛:

Mint-ui-demo: 看着手册走了一遍

https://github.com/itstrive/striveCode/tree/js/vue2.0-Mint-ui-demo

vue:
两种:
1. 直接页面级开发，script直接引入vue
2. 工程性开发 , webpack+loader\ vue-cli
webpack 配置多文件入口

webpack 打包完很大?
bundle.js
build.js

a). webpack代码拆分: code-spliting
b). 提取公共(css,js)
c). 预渲染: prerender-spa-plugin
d). 后台——开启压缩，gz
e). 异步加载组件
    require.ensure

vuex:
Vue 10月1 -> 2.0变的简单

vue
组件之间通信:
vue1.0 -> props -> 子组件可以更改父组件数据 .sync

解决问题:
    0. props
    1. $emit   单一事件管理  Store.js
        var Event=new Vue()
        export default Event
    2. 对象之间引用   √
        msg:'welcome'  -> 子级

        msg:{
            title:'welcome'
        }

        msg.title
    3. vuex  管理状态

this.$el

src/

$http('../src/data/api.')

localhost:8080#/home
localhost:8080/home

main.js
->const router=new VueRouter({})

use

new App({
    router
})

new Vuex.Store()
    ->  构造函数(类) 首字母大写

vue init

webpack2.0-> 端口 8080 8081 8082 8083….

module:{
loaders:[
{test:/.css$/, loader:’style!css’}
]
}

module:{
rules:[
{test:/.css$/, loader:’style-loader!css-loader’}
]
}
全家桶
axios——不能use

Vue.prototype.$http=axios;

this.$http.get

loading
install

vue init webpack-simple

webpack

this -> new Vue()
this -> 原生jsDOM对象
vue中引入百度地图?
1.

        template
            <div id="div1" :style="style"></div>
        script
            export default{
                data:(){
                    style:{
                        width:'100%',
                        height:this.height+'ox'
                    }
                },
                props:{
                    height:{
                        type:Number,
                        default:300
                    },
                    longitude:{},
                    latitude:{}
                },
                mounted(){
                    var map = new BMap.Map("div1");
                    var point = new BMap.Point(this.longitude,this.latitude);
                    map.centerAndZoom(point, 12);
                    var marker = new BMap.Marker(point);// 创建标注
                    map.addOverlay(marker);
                }
            }
    ----------------------------------
    App.vue
    template:
        <MapView :height="300" :latitude=""></MapView>

    import MapView

    export default{
        componets:{
            MapView
        }
        mounted:
    }

vue:
指令
属性
事件
数据:
data,props/computed
生命周期
http://bbs.zhinengshe.com
Vue2.0 -> React

json diff

package.json

cnpm install vue-resource -D

node_modules -> rm -rf

-g -> 命令环境用
webpack

bobobocai

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue 笔记(正在补充中。。。)

Vue1x 和 Vue2x 的区别es6语法vuevue到底是什么vue和angular区别常用指令扩展html标签功能属性事件属性过渡和动画只有在定义样式的时候不一样其他的都是一样的我是标题3msg标题2 httpschromegooglecomwebstoredetailvuejs-devtoolsnhdogjmej
复制链接

扫一扫