美文网首页
Vue.js学习-01

Vue.js学习-01

作者: magic_pill | 来源:发表于2017-10-19 11:48 被阅读29次

111

vue:

vue和angular区别?

  • vue

    • 简单、易学（中文）；
    • 指令以 v-xxx 开头；
    • 一片html代码配合上json，再new出来vue实例；
    • 个人维护项目；
    • 更适合: 移动端项目,小巧；
    • vue的发展势头很猛，github上start数量已经超越angular

  • angular

    • 上手难；
    • 指令以 ng-xxx；
    • 所有属性和方法都挂到$scope身上；
    • angular由google维护；
    • 更合适: pc端项目

  • 共同点: 不兼容低版本IE

vue基本雏形:

angular展示一条基本数据:
    var app=angular.module('app',[]);
    app.controller('xxx',function($scope){  //C
        $scope.msg='welcome'
    })

    html:
    div ng-controller="xxx"
        {{msg}}

vue:
    html:
        <div id="box">
            {{msg}}
        </div>

        var c=new Vue({
            el:'#box',  //选择器  class tagName
            data:{
                msg:'welcome vue'
            }
        });

常用指令:

angular:
     ng-model   ng-controller
     ng-repeat
     ng-click
     ng-show

    $scope.show=function(){}
指令: 扩展html标签功能,属性
v-model
  • 一般表单元素(input) 双向数据绑定
    <div class="v1">
        <input type="text" v-model="msg">
        <input type="text" v-model="msg">
        {{msg}}
    </div>
    <script>
        var vm = new Vue({
            el:".v1",
            data:{
                msg:"yijiang"
            }
        })
    </script>
  • el：用于指定在哪个标签中使用，可以是类名、标签名、ID。
  • data：里面可以放数字、字符串、数组、json（其中json打印出来时是Object）。
v-for循环:
    v-for="name in arr"
        {{name}}

    v-for="name in json"
        {{name}}

    v-for="(k,v) in json"

    <div class="for">
        <ul>
            <li v-for="key in arr">
                {{key}}
            </li>
            <li v-for="(value,key) in json">
                {{key}}:{{value}}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:".for",
            data:{
                arr:["apple",'banana',"pear"],
                json:{a:"Japple",b:"Jbanana",c:"Jpear"}
            }
        })
    </script>
事件:v-on: 
    v-on:click="函数"

    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:{
            show:function(){    //方法
                alert(1);
            }
        }
    });
显示隐藏:
    v-show=“true/false”

    <!--函数-->
    <input class="func" type="button" v-on:click="show()" value="显示">
    <script>
        window.onload = function () {
            var vm = new Vue({
                el:".func",
                methods:{
                    show:function () {
                        alert(1111111);
                    }
                }
            })
        }
    </script>
    <!--直接绑定-->
    <input type="button" value="直接绑定" onclick="alert(1)">

   <div class="over">
        <input type="button" value="over" v-on:mouseover="over">
        <ul>
            <li v-for="value in arr">
                {{value}}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:".over",
            data:{
                arr:["apple",'banana',"pear"],
            },
            methods:{
                over:function () {
                    this.arr.push("tomato");    //this代表当前创建的对象vm
                }
            }
        })
    </script>
bootstrap+vue简易留言板(todolist):
bootstrap: css框架    跟jqueryMobile一样
    只需要给标签 赋予class（角色）
    依赖jquery

确认删除？和确认删除全部么?

事件高级

事件:
v-on:click/mouseover......
简写的:
@click="函数"     推荐使用

事件对象:
    @click="show($event)"

<body>
    <button class="ev" @click="show($event)">按钮</button>
    <script>
        new Vue({
            el:".ev",
            methods:{
                show:function (a) {
                    alert(a.clientY)
                }
            }
        })
    </script>
</body>
事件冒泡:
阻止冒泡:
    a) ev.cancelBubble=true;
    b) @click.stop="函数" 推荐使用，只执行本函数，然后停止冒泡

<div class="bubble">
    <div class="canBb" @click="show2()">
        <button class="ev" @click="show1($event)">按钮</button>
    </div>
</div>
<script>
    new Vue({
        el:".bubble",
        methods:{
            show1:function (ev) {
                alert(111);
                ev.cancelBubble = true;
            },
            show2:function () {
                alert(222);
            }
        }
    })
</script>

<div class="bubble">
    <div class="canBb" @click="show2()">
        <button class="ev" @click.stop="show1()">按钮</button>
    </div>
</div>
<script>
    new Vue({
        el:".bubble",
        methods:{
            show1:function () {
                alert(111);
            },
            show2:function () {
                alert(222);
            }
        }
    })
</script>
阻止默认行为(默认事件):
阻止默认行为:
    a). ev.preventDefault();
    b). @xxx.prevent="函数"   推荐
键盘:
@keydown="函数"
如果想要知道按下哪个键，可以通过事件$event获得键码：ev.keyCode
@keyup

常用键:
    回车
        a）@keyup，回车的键码是13
        b）@keyup.enter="函数" 和 @keyup.13="函数"是等价的
    上、下、左、右
        @keyup/keydown.left
        @keyup/keydown.right
        @keyup/keydown.up
        @keyup/keydown.down
    .....

<div class="keyboard">
    <input type="text" @keydown="show($event)">
    <input type="text" @keyup.left="showLeft()">
</div>
<script>
    new Vue({
        el:".keyboard",
        methods:{
            show:function (ev) {
                if (ev.keyCode == 13){
                    alert("您按回车了")
                }
            },
            showLeft:function () {
                alert("我按下了左键")
            }
        }
    })
</script>

属性:v-bind: 

v-bind:src=""
       width/height/title....

简写:
:src="" 推荐

![]({{url}})    会报一个404错误
![](url)    效果可以出来
![](url) 推荐使用

<div class="propty">
    ![](url)
    ![](url)
</div>
<script>
    new Vue({
        el:".propty",
        data:{
            url:"./aaa.jpg",
            tt:"我是一张美图",
            w:"100px"
        }
    })
</script>
class和style:用的不多
:class=""   v-bind:class=""
:style=""   v-bind:style=""

用法一：数组
:class="[red]"  red是数据
:class="[red,b,c,d]"
用法二：json
:class="{red:true, blue:false}"

:class="json"

    data:{
        json:{red:true, blue:false}
    }
--------------------------
style:
:style="[c]"
:style="[c,d]"
    注意:  复合样式，采用驼峰命名法，如backgroundColor。
:style="json"

模板:

{{msg}}     数据更新模板变化
{{*msg}}    数据只绑定一次

{{{msg}}}   HTML转意输出

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

系统提供一些过滤器:

{{msg| filterA}}
{{msg| filterA | filterB}}

uppercase   eg: {{'welcome'| uppercase}}
lowercase
capitalize

currency    钱
{{msg| filterA 参数}}，人民币的钱：{{12|currency "￥"}}
....

<div id="box">
    {{'Welcome'|uppercase}}
    <br>
    {{'wELCOME'|lowercase}}
    <br>
    {{'WELCOME'|lowercase|capitalize}}
</div>
<script>
    new Vue({
        el:"#box"
    })
</script>

交互:

$http   （ajax）
如果vue想做交互，必须要引入: vue-resouce库
get:
获取一个普通文本数据:
this.$http.get('aa.txt').then(function(res){
    alert(res.data);
},function(res){
    alert(res.status);
});

<div class="get">
    <input type="button" value="获取" @click="getData()">
</div>
<script>
    new Vue({
        el:".get",
        methods:{
            getData:function () {
                this.$http.get("aaa.php").then(function (res) {
                    alert(res.data);
                },function (res) {
                    alert(res.status);
                });
            }
        }
    })
</script>

给服务发送数据:(使用最多)
this.$http.get('get.php',{
    a:1,
    b:2
}).then(function(res){
    alert(res.data);
},function(res){
    alert(res.status);
});

<div class="send">
    <input type="button" value="发送" @click="sendData()">
</div>
<script>
    new Vue({
        el:".send",
        methods:{
            sendData:function () {
                this.$http.get("a.php",{a:2,b:3},function (res) {
                    alert(res)
                },function (res) {
                    alert(res.data)
                })
            }
        }
    })
</script>
post:
this.$http.post('post.php',{
    a:1,
    b:20
},{
    emulateJSON:true
}).then(function(res){
    alert(res.data);
},function(res){
    alert(res.status);
});

<!--post发送数据-->
<div class="pst">
    <input type="button" value="pst发送" @click="send()">
</div>
<script>
    new Vue({
        el:".pst",
        methods:{
            send:function () {
                this.$http.post("aaa.php",{a:10,b:20},{
                    emulateJSON:true
                }).then(function (res) {
                    alert(res.data);
                },function (res) {
                    alert(res.data)
                })
            }
        }
    })
</script>
jsonp:
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
    wd:'a'
},{
    jsonp:'cb'  //callback名字，默认名字就是"callback"
}).then(function(res){
    alert(res.data.s);
},function(res){
    alert(res.status);
});

https://www.baidu.com/s?wd=s

<!--jsonp跨域请求-->
<div class="jsp">
    <input type="button" @click="jspGet()" value="jsp获取">
    <script>
        new Vue({
            el:".jsp",
            methods:{
                jspGet:function () {
                    this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
                        wd:"a"
                    },{
                        jsonp:'cb'
                    }).then(function (res) {
                        alert(res.data.s)
                    },function (res) {
                        alert(res.status)
                    })
                }
            }
        })
    </script>
</div>
案例：百度下拉列表
https://www.baidu.com/s?wd=ttt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度下拉菜单</title>
    <script src="lib/vue.js"></script>
    <script src="lib/vue-resource.js"></script>
    <style>
        .gray{
            background-color: #cccccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" v-model="t1" @keyup="getData($event)" @keydown.up.prevent="goUp()" @keydown.down="goDown()">
        <ul >
            <li v-for="(index,value) in myData" :class="{gray:index==now}">{{value}}</li>
        </ul>
        <p v-show="myData.length==0">暂无数据。。。</p>
    </div>

    <script>
        new Vue({
            el:".box",
            data:{
                myData:[],
                t1:"",
                now:-1
            },
            methods:{
                getData:function (ev) {
                    //按上下键时不再进行搜索
                    if (ev.keyCode==38 || ev.keyCode==40)return;

                    //如果按下回车就进行搜索
                    if (ev.keyCode==13){
                        window.open("https://www.baidu.com/s?wd="+this.t1);
                    }

                    this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{wd:this.t1},{jsonp:"cb"}).then(function (res) {
                        this.myData = res.data.s;
                    },function (res) {
                        alert(res.status)
                    })
                },
                goUp:function () {
                    this.now--;
                    if (this.now==-2){
                        this.now = this.myData.length-1;
                    }
                    this.t1=this.myData[this.now];
                },
                goDown:function () {
                    this.now++;
                    if (this.now==this.myData.length){
                        this.now = -1;
                    }
                    this.t1=this.myData[this.now];
                }
            }
        })
    </script>
</body>
</html>
作业:
1. 简易留言-> 确认删除? 确认删除全部
2. 用vue get 写个例子    weibo

    vue制作weibo
        交互

    vue->  1.0
        vue-resource    ajax    php
        服务器环境(node)

        vue-resource有两种用法：
            用法一：this.$http.get()/post()/jsonp()
            用法二：
                this.$http({
                    url:地址
                    data:给后台提交数据,
                    method:'get'/post/jsonp
                    如果是jsonp一定要加：jsonp:'cb' //cbName
                });
    ----------------------------------
    vue事件:
        @click=""
    数据:


    添加一条留言：

    获取某一页数据:
        getPageData(1);
    ----------------------------------

vue生命周期:
    钩子函数:

    created ->   实例已经创建 √
    beforeCompile   ->   编译之前
    compiled    ->   编译之后
    ready       ->   插入到文档中 √（预加载一般放在这里）

    beforeDestroy   ->   销毁之前
    destroyed   ->   销毁之后

用户会看到花括号标记:
解决方法一：
添加：v-cloak      防止闪烁, 一般用在比较大的段落
在style便签里面添加:    [v-cloak]{display:none;}

解决方法二：
<span>{{msg}}</span>    ->   花括号可以用v-text代替，如：<span v-text="msg"></span>
{{{msg}}}，可以解析标签，但是2.0已经被抛弃 ->   v-html，这种方式还可以防止闪烁

监听属性值的改变
    ng中:  $scope.$watch

    计算属性的使用:
    使用方法一：
    computed:{
        b:function(){   //b是属性，获取值和data里面数据获取方式一样。默认调用的是get方法
            //业务逻辑代码
            return 值
        }
    }
    --------------------------
    使用方法二：
    computed:{
        b:{
            get:function(){
                return 值;
            }
            set:function(val){  //设置值时候调用

            }
        }
    }

    * computed里面可以放置一些业务逻辑代码，一定记得return

<div class="compute">
    <span v-text="a"></span>
    <br>
    <span v-html="b"></span>
    <br>
    <span>{{com}}</span>
</div>
<script>
    var vm = new Vue({
        el:".compute",
        data:{
            a:11111,
            b:"<strong>11111</strong>"
        },
        computed:{
            com: {
                get: function () {
                    return this.a + 2;
                },
                set: function (val) {
                    this.a = val;
                }
            }
        }
    });

    document.onclick = function () {
        vm.com = 123;
    }
</script>

vue实例的一些简单方法:
    vm.$el  ->  就是元素
    vm.$data  ->  就是data
    vm.$mount ->  手动挂在vue程序

    vm.$options ->   获取自定义属性
    vm.$destroy();  ->   销毁对象

    vm.$log();  ->  查看现在数据的状态

</script>
<div class="mou">
    <span v-text="msg"></span>
</div>
<script>
    new Vue({
        data:{
            msg:"我是mount数据"
        }
    }).$mount(".mou");
</script>

循环：
v-for="value in data"

会有重复数据？如果无法添加
track-by='索引'   提高循环性能

track-by='$index/uid'

过滤器:
vue提供过滤器:
    capitalize  uppercase   currency....

    debounce    配合事件，延迟执行：<input type="text" @keydown="show |debounce 2000">

数组配合使用过滤器:
    limitBy 数据；从头开始限制几个
    limitBy 数据1 数据2；取几个，从哪开始

    filterBy 'o' -> 过滤数据，只留下包含'o'的数据

    orderBy 排序
    orderBy 谁 1/-1
        1  -> 正序
        -1  -> 倒序

自定义过滤器: model -> 过滤 ->view
    Vue.filter(toDouble,function(input){
        return input<10?"0"+input : input;
    });

时间转化器:
    Vue.filter("date",function(input){
        var newDate = new Date(input*1000);
        return newDate.getFullYear()+'-'+(newDate.getMonth()+1)+'-'+newDate.getDate()+" "+newDate.getHours()+":"+newDate.getMinutes()+":"+newDate.getSeconds();
    }

过滤html标记
    双向过滤器:*
        Vue.filter('filterHtml',{
            read:function(input){ //model-view
                return input.replace(/<[^<]+>/g,'');
            },
            write:function(val){ //view -> model
                return val;
            }
        });

数据 -> 视图
model -> view
view -> model
指令
v-text
v-for
v-html
    指令: 扩展html语法

自定义指令:
    属性:
    Vue.directive(指令名称red,function(参数){
        this.el -> 原生DOM元素
    });
    <div v-red="参数"></div>
    指令名称:   v-red  ->  red

    * 注意: 必须以 v-开头

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

@keydown.up
@keydown.enter
@keydown.a/b/c....

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

监听数据变化:
    我们已经学了很多东西，如：vm.$el/$mount/$options/....

    vm.$watch(name,fnCb);  //浅度
    vm.$watch(name,fnCb,{deep:true});  //深度监视

vue组件:(后面讲)
组件间各种通信
slot
vue-loader  webpack   .vue
vue-router

222

git page：
    任何仓库 master分支，都可以发布(git page)

双向过滤器:（使用不多）
    Vue.filter(name,{
        read:
        write:
    });

1.0
2.0

使用时，先引入 vue.js

bower-> （前端）包管理器，npm更偏向后台的包管理器
    安装：npm install bower -g
    验证: bower --version

bower install 包名
bower uninstall 包名
bower info 包名   查看包版本信息

<script src="bower_components/vue/dist/vue.js"></script>

vue-> 过渡(动画)

本质走的css3: transtion ,animation

<div id="div1" transition="fade"></div>

定义动画:
    .fade-transition{
        transition: 1s all ease;
    }
    进入：
    .fade-enter{
        opacity: 0;
    }
    离开：
    .fade-leave{
        opacity: 0;
        transform: translateX(200px);
    }

<head>
    <style>
        .show{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .fade-transition{
            transition: 3s all ease;
        }
        .fade-enter{
            opacity: 0;
        }
        .fade-leave{
            opacity: 0;
            transform: translateX(200px);
        }
    </style>
</head>
<body>
    <div class="trans">
        <input type="button" @click="tog" value="按钮">
        <div class="show" v-show="flag" transition="fade"></div>
    </div>
    <script>
        new Vue({
            el:".trans",
            data:{
                flag:true
            },
            methods:{
                tog:function (){
                    this.flag = !this.flag;
                }
            }
        })
    </script>
</body>
</html>

两个opacity都是0

通过animate.css实现更加炫酷的动画：首先要引入animate.css

<div class="animate2">
        <input type="button" value="animate" @click="anim">
        <div class="animated anim2" transition="tt" v-show="flag"></div>
    </div>
    <script>
        new Vue({
            el:".animate2",
            data:{
                flag:true
            },
            methods:{
                anim:function () {
                    this.flag = !this.flag;
                }
            },
            transitions:{   //定义所有动画名称
                tt:{
                    enterClass:"slideInLeft",
                    leaveClass:"bounceOutUp"
                }

            }
        });
    </script>

vue组件:

组件: 一个大对象
定义一个组件:
1. 全局组件
    var Aaa=Vue.extend({
        template:'<h3>我是标题3</h3>'
    });

    Vue.component('aaa',Aaa);
    然后就可以使用：<aaa></aaa>了。

    *组件里面放数据:
        data必须是函数的形式，函数必须返回一个对象(json)

<div class="box">
    <aaa></aaa>
</div>
<script>
    var AAA = Vue.extend({  //AAA相当于一个类
        data: function(){
                return {a:"我是其它数据"}
        },
        methods:{
            change:function () {
                this.a = "我又回来了"
            }
        },
        template:"<h3 @click='change'>我是标题三,喝喝----{{a}}</h3>"
    });
    Vue.component('aaa',AAA);

    new Vue({
        el:".box"
    })
</script>
//此后，aaa可以当标签使用了

2. 局部组件
    放到某个组件内部
var vm=new Vue({
    el:'#box',
    components:{ //局部组件
        aaa:Aaa
    }
});

    <div class="box2">
        <bbb></bbb>
    </div>
    <script>
        var Bbb = Vue.extend({
            data(){
                return {msg:"bbbbbb"}
            },
            template:"<h2>我是二标题{{msg}}</h2>"
        });
        new Vue({
            el:".box2",
            components:{    //局部组件
                bbb:Bbb
            }
        })
    </script>

另一种编写方式:
//全局
Vue.component('my-aaa',{
    template:'<strong>好</strong>'
});
//局部
var vm=new Vue({
    el:'#box',
    components:{
        'my-aaa':{
            template:'<h2>标题2</h2>'
        }
    }
});

<!--全局缩写形式-->
<div class="box11">
    <aaa></aaa>
</div>
<script>
    Vue.component('aaa',{
        template:"<h2 @click='change'>我是标题222-----{{tt}}</h2>",
        data(){
            return {tt:"hahaha"}
        },
        methods:{
            change(){
                this.tt = "你把我改变了";
            }
        }
    });
    new Vue({
        el:".box11"
    })
</script>

<!--局部缩写-->
<div class="box21">
    <bbb></bbb>
</div>
<script>
    new Vue({
        el:".box21",
        components:{
            'bbb':{
                template:"<h3>哈哈---{{cc}}</h3>",
                data(){
                    return {cc:"是我啦，死鬼"}
                }
            }
        }
    })
</script>
配合模板：有多个标签时使用
1. template:'<h2 @click="change">标题2->{{msg}}</h2>'

2. 单独放到某个地方
    a). <script type="x-template" id="aaa">
            <h2 @click="change">标题2->{{msg}}</h2>
            <ul>
                <li>11111</li>
                <li>11111</li>
                <li>11111</li>
            </ul>
        </script>

<div class="box1">
    <aaa></aaa>
</div>
<script type="x-template" id="a1">
    <h2 @click="change">{{tt}}</h2>
</script>
<script>
    new Vue({
        el:".box1",
        components:{
            aaa:{
                data(){
                    return {tt:"shiwo"}
                },
                methods:{
                    change(){
                        this.tt = "welcome"
                    }
                },
                template:"#a1"
            }
        }
    });
</script>
  • 其中必须指定type为x-template，而且只能用id选择器
    b). <template id="aaa">
            <h1>标题1</h1>
            <ul>
                <li v-for="val in arr">
                    {{val}}
                </li>
            </ul>
        </template>

<div class="box2">
    <bbb></bbb>
</div>
<template id="bb">
    <h2>{{tt}}</h2>
</template>
<script>
    new Vue({
        el:".box2",
        components:{
            bbb:{
                data(){
                    return {tt:"我又来啦"}
                },
                template:"#bb"
            }
        }
    })
</script>

动态组件:（感受一下即可）
    <component :is="组件名称"></component>

<div id="box1">
    <input type="button" value="a1" @click="a='aaa'">
    <input type="button" value="b2" @click="a='bbb'">
    <component :is="a"></component>
</div>
<script>
    new Vue({
        el:"#box1",
        data:{
            a:""
        },
        components:{
            'aaa':{
                template:"<h2>我是aaaaaa</h2>"
            },
            'bbb':{
                template:"<h2>我是b啦</h2>"
            }
        }
    })
</script>

vue-devtools    ->  调试工具
    https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

父子组件

vue默认情况下，子组件不能访问父组件数据

<div id="box1">
    <aaa></aaa>
</div>
<script>
    new Vue({
        el:"#box1",
        components:{
            'aaa':{
                template:"<div><h2>我是父组件</h2><bbb></bbb></div>",
                components:{
                    'bbb':{
                        template:"<h3>我是子组件</h3>"
                    }
                }
            }
        }
    });
</script>
组件数据传递: √
1. 子组件想获取父组件data
    在调用子组件时：
        <bbb :m="数据"></bbb>

    子组件之内:
        props:['m','myMsg']

        props:{
            'm':String,
            'myMsg':Number
        }

<div id="box1">
    <aaa></aaa>
</div>
<template id="ttt">
    <div>
        <h2>{{a}}</h2>
        <bbb :mmm="a"></bbb>
    </div>
</template>
<script>
    new Vue({
        el:"#box1",
        components:{
            'aaa':{
                data(){
                    return {a:"我是父组件里面的数据"}
                },
                template:"#ttt",
                components:{
                    'bbb':{
                        props:["mmm"],
                        template:"<h3>我是子组件--{{mmm}}</h3>"
                    }
                }
            }
        }
    });
</script>

2. 父级获取子级数据
    *子组件把自己的数据，发送到父级

    vm.$emit(事件名,数据);  子级发送
    v-on:   @   父级接收

<div class="box2">
        <aaa></aaa>
    </div>

    <template id="aa2">
        <div>
            <h2>我是父组件---{{a}}</h2>
            <bbb @send-data="getdata"></bbb>
        </div>
    </template>
    <template id="bb2">
        <div>
            <h3>我是子组件</h3>
            <input type="button" value="点我发数据" @click="sss">
        </div>
    </template>

    <script>
        new Vue({
            el:".box2",
            components:{
                aaa:{
                    data(){
                        return  {a:"父级数据"}
                    },
                    methods:{
                        getdata(msg){
                            this.a = msg
                        }
                    },
                    template:"#aa2",
                    components:{
                        bbb:{
                            data(){
                                return {b:"子级数据"}
                            },
                            template:"#bb2",
                            methods:{
                                sss(){
                                    this.$emit("send-data",this.b);
                                }
                            }
                        }
                    }
                }
            }
        })
    </script>

vm.$dispatch(事件名,数据)    子级向父级发送数据
vm.$broadcast(事件名,数据)   父级向子级广播数据
    配合: event:{}

在vue2.0里面已经取消，报废了
slot:
位置、槽口；
作用: 占个位置，显示组件里面的内容，如果不使用slot就不能显示；
类似ng里面 transclude  （指令）

<div class="box1">
    <aaa>
        <ul slot="ul-slot">
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
        <ol slot="olslot">
            <li>222222</li>
            <li>222222</li>
            <li>222222</li>
        </ol>
    </aaa>
    <aaa></aaa>
</div>
<template id="t1">
    <div>
        <h3>tttttt</h3>
        <div>woshinvsheng</div>
        <slot name="ul-slot">这是默认情况</slot>
        <slot name="olslot">这是默认情况</slot>
    </div>
</template>
<script>
    new Vue({
        el:".box1",
        components:{
            aaa:{
                template:"#t1"
            }
        }
    })
</script>

vue-router

vue -> SPA应用，单页面应用
    vue-resouce 交互
    vue-router  路由,根据不同url地址，出现不同效果

主页  home
新闻页 news

html:
    <a v-link="{path:'/home'}">主页</a>   跳转链接:v-link

    展示内容:
    <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');

    //6.跳转:
    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-loader,vue-loader需要使用webpack编译成浏览器能够懂的代码

.vue文件:
    放置的是vue组件代码

    <template>
        html
    </template>

    <style>
        css
    </style>

    <script>
        js  （平时代码、ES6），但是大部分浏览器对ES6还不是很友好，一般通过babel-loader编译成ES5
    </script>

搭vue-loader可以使用脚手架vue-cli

简单的目录结构:
    |-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 -> 变成正常代码       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

最最核心：
最最核心：
npm install vue@1.0.28

继续讲手动配置:
    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 <package-name>  --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'

3. Vue.use(VueRouter);

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

注意:
    之前: index.html  ->   <app></app>
    现在: index.html  ->   <div id="app"></div>

    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

相关文章

  • Vue.js学习-01

    111 vue: 读音：view vue到底是什么?一个mvvm框架(库)、和angular类似比较容易上手、小巧...

  • 前端基础知识学习---Vue.js学习（一）模板语法

    Vue.js学习笔记 Vue.js的使用之HelloWord 引入Vue.js 创建Vue对象其中el：指定根el...

  • Vue.js 介绍

    建议学习时长： 30分钟学习方式：了解 学习目标 知道什么是 Vue.js 了解 Vue.js 的特点 能运行 H...

  • Vue.js - day01

    Vue.js - day01 插件推荐 vue官方推出的插件，高亮，一些提示 vue的代码提示 框架的学习方式 没...

  • 2018-04-24 vue.js

    这是关于vue.js学习的心得。

  • v-on指令

    Vue.js 基础学习 v-on 指令

  • Vue.js 学习笔记（一）

    声明:本文章并非原创，而是参考黑马程序员Vue.js教程配套资料，仅供学习使用，侵删。 Vue.js 学习笔记 什...

  • 1.“hellow Vue.js” 2.git软件 3.

    1.hellow Vue.js 显示“hellow Vue.js world” 代码 2.git软件 学习了gi...

  • 基于 React.js + Redux + Bootstrap

    最近在学习前端的各大流行框架, 主要学习了 Vue.js 和 React.js, 前段时间用 Vue.js + u...

  • 前端TODO

    Vue.js 等框架原理了解 webpack 原理了解 browserify 插件开发 Vue.js 等框架原理学习

网友评论

      本文标题：Vue.js学习-01

      本文链接：https://www.haomeiwen.com/subject/ecduuxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Vue.js学习-01|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！