Vue.js 学习笔记

Vue.js

Vue是一个前端UI框架，能够实现数据绑定，将传统的js和jQuery对DOM的操作转化为对对象数据的操作。但是Vue编写的程序不会得到搜索引擎的搜索，所以vue在编写完成后还得做SEO优化。

常用语法

如何使用

vue作为独立的js文件在html文件中引入即可使用。可在bootcdn中搜索或者直接保存在离线文件。

数据绑定

vue与html中内容建立关系的方式是绑定，在自定的js文件中定义一个Vue对象，内部元素el作为选择器绑定对应标签，如div;data是一个对象，其中的键值对对应html中v-model属性的值如data：{ name:“小明”}。在html中将被绑定的值用双大括号保住，则{{name}}的值随自定义vue对象data值中name的值改变。

1.v-model v-show

v-model,v-show是vue自定义的属性，称为指令：directive.
v-model与v-show一般配合使用。v-model绑定输入标签input与vue对象变量；v-show绑定输出标签与VUE变量对象如SPAN等；
html代码：

<div id="app">
    <div>
        <!-- v-model是vue定义的属性，称为指令：directive -->
        <input type="text" v-model="name">
        <span v-show="name">
            你的名字是{{name}} 
        </span>
    </div>
    <div>
        <input type="text" v-model="age">
        <span v-show="age">
            你的年龄是{{age}}
        </span>
    </div>
    <div>
        <input type="text" v-model="sex">
        <!-- v-show的作用是：如果sex属性存在，则显示此sapn 
v-if,与v-show作用相同，区别是，v-show是仅仅隐藏，而v-if是当sex属性不存在时则将span从DOM中删除
-->
        <span v-show="sex">
            你的性别是{{sex}}
        </span>
    </div>
</div>

js代码：

var app = new Vue({
    el:'#app',
    data:{
        name:'abcd',
        age:'19',
        sex:'man'
    }
})

可以在console中输入app.name来查看对应的值。

2.v-for

v-for的作用格式迭代，在html中li元素中定义个v-for的属性如：

<li v-for="food in foodList">{{food}}</li>

表示在foodList中迭代输出food，代码如下
html:

<div id="app">
    <ul>
        <!-- v-for是一种迭代 -->
        
        <!-- <li v-for="food in foodList">
            {{food}}
        </li> -->
        <li v-for="food in foodList">
            {{food.name}}:￥{{food.price*food.discount}}
        </li>
    </ul>
</div>

js:

var app = new Vue({
    el:"#app",//绑定对应元素
    data:{    //数据键值对
        // foodList:['葱','姜','蒜'],
        foodList:[
            {
                name:'葱',
                price:29,
                discount:2,
            },
            {
                name:'姜',
                price:5,
                discount:0.5,
            },
            {
                name:'蒜',
                price:10,
                discount:0,

            }
        ]
    }
})

如上所示，访问data中数据时，可以直接用app.name 而不用app.data.name,而且在{{}}中可以进行数学运算，如价格和打折数的相乘.

3.v-bind

与上述不同的是v-bind的作用是绑定属性，比如动态修改a标签中的链接，俄日而且，v-bind能绑定类，也可以绑定条件类，条件类传入一个对象{active:isActive}，active表示要执行的类，isActive代表条件，为真时执行active类 ,v-bind可以简写直接用冒号代替–>
html:

<div id="app">
    <!-- v-bind是绑定属性 如下边的a标签的属性可以动态修改-->
    <a v-bind:href="url" title="">    
        <!-- v-bind可以绑定类，也可以绑定条件类，条件类传入一个对象{active:isActive}，active表示要执行的类，isActive代表条件，为真时执行active类 ,v-bind可以简写直接用冒号代替-->
        <!-- <span v-bind:class="klass"> -->
        <span :class="{active:isActive}">
            点我
        </span>
        <img v-bind:src="img" alt="">
    </a>
</div>

js:

var app = new Vue({
    el:"#app",
    data:{
        url:"http://www.bing.com",
        img:"fff.png",
        klass:"back",
        isActive:true,
    }
})

4:v-on

v-on用于绑定事件，简写为@。v-on可以绑定单个事件格式为：v-on:click=“onclick”,其中，onclick为自定的函数。这个函数放在method对象中，而不是data中。绑定多个事件的格式为：v-on = “{mouseenter:onenter,mouseleave:onout}”
代码如下
html：

<div id="app">
    <button v-on:click="onClick">点我</button>
    <!-- v-on一次性绑定多个事件利用利用对象传入，记住利用对象是用等于号赋值，不是冒号！ -->
    <button v-on="{mouseenter: onEnter, mouseleave:onOut}">
        再点我
    </button>
    <!-- keyup.enter用于设置当回车键按下时执行操作，而不是所有人都能。 -->
    与v-bind的简写通，v-on简写为@符号
    <form @keyup.enter="onKeyup" @submit.prevent="onSubmit">
        <input type="text">
        <button type="submit">提交</button>
    </form>
</div>

js：

var app = new Vue({
    el:'#app',
    methods:{//方法
        onClick:function(){
            console.log("onClick");
        },
        onEnter:function(){
            console.log("onEnter")
        },
        onOut:function(){
            console.log('outEnter')
        },
        onSubmit:function(){
            console.log('submitted')
        },
        onKeyup:function(){
            console.log('Keyup')
        }
    }
})

submit.prevent是Vue封装好的阻止默认事件的函数。除此之外还有submit.stop，停止冒泡（这个不懂，，，）

5.v-model###

v-model是绑定显示与vue对象变量，v-model.lazy代表滞后同步，当用户在input中输入完毕，鼠标脱离输入框后，数据实现同步；v-model.number是将输入作为数字；v-model.trim是去掉前后空格。
代码
html：

<div id="app">
    <!-- v-model的作用是绑定数据 -->
    <!-- v-model.trim的作用是指向变量为取消空格 -->
    <input type="text" v-model="name">{{name}}
    <!-- v-model.number指向的变量为数字型的 -->
    <input type="text" v-model.number="price">{{price}}
    <!-- v-model.lazy是拖沓型的绑定，当鼠标光标取掉之后才更新{{}}中的显示 -->
    <input type="text" v-model.lazy="password">{{password}}
</div>

js：

var app = new Vue({
    el:"#app",
    data:{
        name:'xiaoming',
        price:20,
        password:'abcd'
    }
})

单选型radio、多选型checkbox；下拉列表select，多行文本textarea代码如下，仔细看注释
html：

<div id="app">
    <div>
        <!-- v-model绑定sex，value为sex值 -->
        你是男生or女生？
        <label >
            男
            <input v-model="sex" value="male"  type="radio">
        </label>
        <label >
            女
            <input v-model="sex" value="female" type="radio" >
        </label>

        {{sex}}

        <!-- 传统实现方法 -->
        <!-- <label>
男
<input name="sex" value="male" type="radio">
</label>
<label>
女
<input name="sex" value="female" type="radio">
</label> -->
    </div>
    <div>
        你的取向？
        <label >
            男
            <input v-model="likesex" value="male"  type="checkbox">
        </label>
        <label >
            女
            <input v-model="likesex" value="female" type="checkbox" >
        </label>
        {{likesex}}
    </div>
    
    <div>
        你来自哪里？
        <!-- 可以直接在js中data区里设置别名 -->
        <select v-model="from">
            <option value="1">龙凤坡</option>
            <option value="2">西沙庄</option>

        </select>
        {{from}}
        <!-- 传统实现方法
<select name = "sel">
<option value="1">龙凤破</option>
<option value="2">西沙庄</option>
</select> -->
    </div>
    <div>
        <textarea >
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </textarea>
    </div>
</div>

js：

var app = new Vue({
    el:"#app",
    data:{
        sex:'male',//可以设置默认值
        likesex:[],
        from:"1"
    }
    
})

6.v-if，v-else，v-else-if

实现逻辑判断控制
代码
html：

<div id="app">
    <div v-if="role == 'admin'">
        管理员你好
    </div>
    <div v-else-if="role == 'hr'">
        hr你好
    </div>
    <div v-else>
        您没有管理权限
    </div>
</div>

js：

var app = new Vue({
    el:"#app",
    data:{
        role:'admin',
    }
    
})

7.全局和局部组件

组件是vue中的基本单位，定义好的组件在应用上类似于一个标签，在html中使用即可，具体定义在js文件中，包括模板和方法。
定义一个全局组件
js:

// 定义一个全局组件 其中alert为自定义的组件名
Vue.component('alert',{
    // <!-- template模板 -->
    template:'<button @click="on_click">ttt</button>',
    // <!-- 方法 -->
    methods:{
        on_click:function(){
            alert("Yo,");
        }
    }
});
//设定其作用域为app中
new Vue({
    el:'#app'
});

html:

<div id="app">
    <alert>

    </alert>
</div>    

这种方式定义的全局组件在整个js文件中全部可见，相当于html中的window对象，但在实际用时，全局组件比较少用，一般定义局部组件。局部组件先可以将模板和方法封装在一个对象中，然后在vue对象中作为components键中的一个自定义组件名（作为内部键）的值引入。如下：
js：

//封装组件内容为一个对象
var alert_component={
    // <!-- template模板 -->
    template:'<button @click="on_click">ttt</button>',
    // <!-- 方法 -->
    methods:{
        on_click:function(){
            alert("Yo,");
        }
    }
}
// 设置一个域:自定义组件componet作用范围
//
new Vue({
    el:'#seg1',
    //在seg1域中定义一个alert局部组件。
    components:{
        alert:alert_component,
    }
});

8.组件构建

组件构建及填充组件的血肉，充实他的功能。我的理解是在Vue中，组件类似于一个对象，有属性也有方法，通过bind设置组件的属性，通过v-on设置他的对应事件的处理函数如点击，也就是方法。在组件中定义变量是通过data这样一个函数来实现的，在data函数内部return一个对象，对象中的键值对就是要定义的变量，在mothods中使用这些变量时需要加上this.前缀，因为这些变量时component对象的。同时我感觉Vue在后台有某些机制运行，实时监测在html中双引号{{}}中变量的改变并实时刷新，代码
js：

Vue.component('up',{
    //模板   
    //Vue中的某种机制在后台运行中一直监听like_count的变化并实时更新
    //:class="{liked:liked}"的作用是绑定一个类liked_style，
    //当变量liked为真时，此类起效，否则失效。
    template:"<button :class='{abcd:uped}' @click=toggle_up>顶({{up_count}})</button>",
    //感觉相当于变量定义，    //这里的data和vue的不一样，这里是一个function
    data:function(){
        return{
            up_count:10,
            uped:false,//这个变量在内部mothod中看不到，变量属于组件，所以应该在mothod中加this前缀
        };
    },
    methods:{
        toggle_up:function(){
            //如果没有顶过则加加，否则减减
            if(!this.uped)
                this.up_count++;
            else
                this.up_count--;
            //取反标志
            this.uped=!this.uped;
        }
    }
});
//组件作用域
new Vue({
    el:"#app",
})

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>

    <style type="text/css">
        .abcd{
            background: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <up>
        </up>
    </div>

</body>
    <script src="vue.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
</html>

其中js文件中模板template绑定东西太多会造成不好看，所以可以将他放在html文件中，利用template标签包括，并且给该标签一个ID，然后在js文件中template中直接选择该标签即可。代码：
html：

<!-- template标签的作用是保存模板     -->
<template id="liked_component_tpl">
    <button :class="{liked_style:liked}" @click=toggle_like>赞({{like_count}})
    </button>
</template>

js：

Vue.component('like',{
    template:"#liked_component_tpl",//具体内容放在html中
    data:function(){
        return{
            like_count:10,
            liked:false,
        }
    },
    methods:{
        toggle_like:function(){
            if(!this.liked)
            {
                this.like_count++;
            }
            else
            {
                this.like_count--;
            }
            this.liked = !this.liked;
        }
    }
});

8.组件-父子通信

父子通信，我理解是外部的html对自定义组件component向内部组件实现的传参。如调用自定的alert时传入要显示的信息，代码：
html：

<div id="app">
    <!-- user和msg都是自定义的传参键，后跟着值，这里传入，js中component定义中读出 -->
    <alert user="liangfeng" msg="haha">
    </alert>
</div>

js：

Vue.component('alert',{
    template:'<button @click="on_click">弹窗</button>',
    // Vue提供的一个属性props，他是一个数组，每一项对应外边传进来的值
    props:['msg','user'],
    methods:{
        on_click:function(){
            alert(this.user+":say:"+this.msg);
        }
    },
});
new Vue({
    el:"#app",
})

上诉例子随着在html中调用alert时传入值得不同，弹出框内容不同。
例子2：根据传入参数不同设置连接不同
html：

<div id="app">
    <user username="lafe">

    </user>
</div>

js：

Vue.component('user',{
    template:'<a :href="\'/user/\'+username">@{{username}}</a>',
    // Vue提供的一个属性props，他是一个数组，每一项对应外边传进来的值
    props:['username'],
    methods:{
    },
});
new Vue({
    el:"#app",
})

8.组件-子父通信

两个组件，balance组件包含show组件，show组件是一个按钮，当点击show组件中按钮时，子组件show向父组件发出消息并触发父组件一个事件（此事件是自定义的？没有明白)，父组件处理事件显示余额。
js:

Vue.component('balance',{
    template:'<div><show @show-balance="display_fun"></show><div v-if="display_flag">您的余额是20元</div></div>',
    data:function(){
        return{
            display_flag:false,
        }
    },
    methods:{
        //data就是子级组件传来的值（{a,b}）
        display_fun:function(data){
            console.log("display-fun");
            this.display_flag = true;//千万写this，否则函数内部赋值不了
            console.log(data);
        }
    }
});
Vue.component('show',{
    template:'<button @click="on_blick">显示余额</button>',
    methods:{
        on_blick:function(){
            // console.log("show pused");
            //与其父亲组件component通信：$emit触发父级事件show-balance,
            //而这个事件是现在自定义的吗？？？？
            //a和b为参数
            this.$emit("show-balance",{a:1,b:2});            
        }

    }
});
new Vue({
    el:"#app",
})

html:

<div id="app">
    <balance>
    </balance>
</div>

$emit(“show-balance”,{a:1,b:2});为触发父组件show-balance函数的函数，a，b为传入的参数。

9.组件-平行任意组件通信

平行组件之间的通信利用事件调度器实现，如A组件要将值传入B组件中，在A组件设置某一个事件函数，再此处理函数中利用事件调度器Event触发自定义事件，并传入参数：Event.KaTeX parse error: Expected '}', got 'EOF' at end of input: …nction(){Event.on(‘A-function’,function(data){进行A数据的处理})}其中mounted指B组件初始化完成后执行内部函数也就是将自定义事件绑定， function为自定义函数A-function的回调函数，再次内部执行A的取值工作。data为传入的A的值。
疑问：为什么要交mount为钩子???
js:

//事件调度器来同步两个组件中的变量v
var Event = new Vue();
//花花说，
Vue.component('huahua',{
    template:'<div>花花说:<input @keyup="on_change" v-model="hhsaid" type="text" />{{hhsaid}}</div>',
    data:function(){
        return{
            hhsaid:'',
        }
    },
    methods:{
        on_change:function(){
            //事件调度器触发huahua-said-something并传入hhsaid数据
            Event.$emit('huahua-said-something',this.hhsaid);
        }
    }

});
//栓蛋听
Vue.component('shuandan',{
    template:'<div>栓蛋听:{{sdlisten}}</div>',
    data:function(){
        return{
            sdlisten:'',
        }
    },
    //传说中的钩子，相当于时间节点，即什么时刻后
    //mounted指本组件初始化完毕
    //this.$on绑定事件
    mounted:function(){
        var me = this; //因为函数中的this变为了函数，所以必须先保存当时的组件
        Event.$on('huahua-said-something',function(data){
            console.log(this);
            console.log(data);
            me.sdlisten=data;
        })
    }
});


new Vue({
    el:"#app",
});

html:

<div id="app">
    <huahua>
    </huahua>
    <shuandan>
    </shuandan>
</div>

10.过滤器

过滤器是为参数增加前后缀或者某种完成某种格式，比如输入金额后自动加上单位元。过滤器的基本格式是:{{值 | 过滤器（过滤器参数）}};使用方式如同函数。自定义过滤器用Vue.filter(‘过滤器名’，function（参数1，参数2…）{具体实现 return值；})实现。
js：

//定义个过滤器，第一个是过滤器名字，第二个是器内部函数
//在html中 这样调用{{price | currency}}
Vue.filter('currency',function(val,unit){
    val = val||0;//当无金额时也显示0
    unit = unit||'元';//如果传入单位则使用，如果没穿如则默认为元，传入方式为{{price | currency('USD')}}：
    return val+unit;


});
new Vue({
    el:"#app",
    data:{
        price:10,
    }
});

html：

<div id="app">
    <input v-model="price" type="text" name="">
        <!-- 过滤器：值 管道符 滤波器 -->
   <!-- filter 传参类似于函数 -->
   {{price | currency("USD")}}
</div>

在filter定义中，匿名函数function第一个参数val就是管道符前的变量，第二个才是过滤器传入的参数。

11.自定义指令

在vue中v-bind、v-on都是指令directive，当时我们也可以自定义指令，简化操作。指令在使用过程中如同自定义属性，赋值不同，在指令的实现定义上操作不同。定义指令时传入两个参数，第一个是指令名，在标签使用时遵循Vue指令前加“v-”的传统，在定义时不加。第二个参数是个匿名函数，函数中有两个值，el指指令作呕用的元素，binging指指令值。代码如下：
js：

//pin 指令名，匿名函数：el：指令作用的元素，binging:指令值
Vue.directive('pin',function(el,binging){
    var pined = binging.value;
    console.log(pined);
    if(pined){
        el.style.position="fixed";
        el.style.top="10px";
        el.style.left="10px";
    }
    else{
        el.style.position='static';
    }
});
new Vue({
    el:"#app",
    data:{
        card1:{
            pinned:false,
        },
        card2:{
            pinned:false,
        }
    }
})

html：

<div v-pin='card1.pinned' class="card">
            <button @click="card1.pinned=!card1.pinned" type="">订住/取消</button>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt 
        </div>
        <div v-pin='card2.pinned' class="card">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt 
        </div>
        <div>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo laudantium porro nostrum iusto, error tempore vero sed, quia autem ipsam quibusdam illo eligendi ad beatae cum repellat, delectus veritatis tempora!</div>
            <div>Accusantium voluptas corrupti quo omnis enim rem alias culpa quam modi deleniti, repudiandae ut exercitationem quae, similique totam doloremque? Officiis ex ad fuga voluptate? Quas quos delectus, velit vero autem?</div>

自定义指令还可传参和加修饰，具体见代码：
js：

// 自定义一个指令，在标签中使用时，如同一个自定义属性，需要以"v-"开头，但是在定义指令时去掉v，
// 匿名函数中的el代表定义指令所在的标签元素，bingding代表自定义指令的值，如bingding.value就是
// v-pin=“abc”中的abc。
// 自定义指令的功能就是在函数中通过逻辑判断操作css，操作元素本身，简化设计。
Vue.directive("pin",function(el,binging){
    var pinned = binging.value;
    var position = binging.modifiers;//修饰
    var warning = binging.arg;//传参
    console.log(position);
    // console.log(val);
    if(pinned){
        el.style.position="fixed";
        for(var pos in position){
            if(position[pos])
            {
                //pos相当于bottom或left，为什么不需要点.直接方括号就可以操作了？？？
                el.style[pos]= '10px';
            }
        }    
        if(warning === 'true'){//注意加引号！！！
            el.style.background="yellow";
        }
        // el.style.top='10px';
        // el.style.left='10px';
    }
    else
    {
        el.style.position="static";
    }
});


new Vue({
    el:"#app",
    data:{
        card1:{
            pinned:false,
        },
        card2:{
            pinned:false,
        }
    }
});

html：

<div id="app">
    <!-- v-pin:true是指令传参;v-pin.bottom.left是指令修饰符。 -->
    <div v-pin:true.bottom.right="card1.pinned" class="card">
        <button @click="card1.pinned = !card1.pinned">定住/取消</button>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

    </div>
    <div v-pin="card2.pinned" class="card">
        <a @click="card2.pinned = !card2.pinned">pin it</a>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    </div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        
    </div>