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

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        <包名>          查看包版本信息

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="" 推荐
     效果能出来，但是会报一个404错误
      效果可以出来，不会发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:
        ['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];
            }
        }
"box">
    "text" v-modal="t1" @keyup="get($event)" @keydown.down="changeDown()"  @keydown.up.prevent="changeUp()">
    

        
for="value in myData" :class="{gray:$index==now}">
            {{value}}
        
    
    
"myData.length==0">暂无数据。。。

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
{{msg}}
 

计算属性:

    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元素
});
 * 注意: 必须以 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'
            }
        });
    };

    



自定义元素指令:（用处不大）
    Vue.elementDirective('zns-red',{
        bind:function(){
            this.el.style.background='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">一个divdiv>
  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:'
我是标题3
'
});
Vue.component('aaa',Aaa);
    *组件里面放数据:
        data必须是函数的形式，函数必须返回一个对象(json) 事例-Vue组件-其他
var Aaa=Vue.extend({
data(){
return{
msg:’我是标题…’
};
}
    template:'
{{msg}}
'
});

2 局部组件

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

另一种编写方式:

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

配合template模板:
1. template:'

标题2->{{msg}}

'
2. 单独放到某个地方

a).
b).
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 动态组件:

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

组件数据传递: 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>'
            }
        }
    }); 

1. 子组件就想获取父组件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>111li>
                 <li>222li>
                 <li>333li>
             ul>
        aaa>
    div>
    <template id="aaa">
        <h2>XXXXh2>
        <slot>占个位置slot>//在页面渲染的时候如果aaa标签里面有其他标签，slot标签里面的内容将被替代
        <p>welcome vuep>
    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:
主页 跳转链接

展示内容:

js:

//1. 准备一个根组件
var App=Vue.extend();
//2. Home News组件都准备
var Home=Vue.extend({
    template:'
我是主页
'
});
var News=Vue.extend({
    template:'
我是新闻
'
});
//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:'我是登录信息'
        }
    },
    'reg':{
        component:{
            template:'我是注册信息'
        }
    }
}

路由其他信息:
/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组件代码
    
    
    

简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue文件，官方推荐命名法
|-package.json 工程文件(项目依赖、名称、配置)
npm init –yes 生成
|-webpack.config.js webpack配置文件

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

App.vue -> 变成正常代码       [email protected]
cnpm install [email protected] --save-dev

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

vue-html-loader、css-loader、vue-style-loader、
[email protected]

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 [email protected]
2. import VueRouter from ‘vue-router’

1. Vue.use(VueRouter);

2. 配置路由
   var router=new VueRouter();
   router.map({
   路由规则
   })

3. 开启
   router.start(App,’#app’);

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

App.vue ->   需要一个 
  根元素

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以后，有哪些变化?

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

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

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

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

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

1. 生命周期

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

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

   arr.forEach(function(item,index){

   });

   去掉了隐式一些变量
   index key

   之前:
   v-for=”(index,val) in array”
   现在:
   v-for=”(val,index) in array”

2. track-by=”id”
   变成
   

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

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

5. 过滤器
   之前:
   系统就自带很多过滤
   {{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>

1. 路由具体写法

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

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

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

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

1. 重定向
   之前 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包管理器 [email protected]

饿了么团队开源一个基于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/

1. 下载
   npm install mint-ui -S

   -S
   –save

2. 引入
   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
            
"div1" :style="style">
        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:
        "300" :latitude="">

    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