Vue（一）初识

时间  2019-11-09
标签 vue 繁體版
原文   原文链接 
Vue的意义：将开发者的精力从dom操做解脱，更加专一于数据的操做，
数据驱动，界面的渲染 随着数据的变化自动变化
    1.将开发者的精力从dom中解除， 极少作dom操做
    2.经过指令（directive）将元素和数据进行绑定  
    3.数据变化元素界面变化
    4.开发者关注数据的变化

配置：Vue官网下载；或npm install vuejavascript

js引入包后，实例化Vue对象；

var vm = new Vue({//实例化
             el: '#btn',//选择标签（做用区域）
             data: {//变量（数据），关联页面的标签
                    bool: true
                }，
            methods:{//写方法的对象
                Fn1(){//方法
                        },
                Fn2(){
                        }
                }

            });

渲染数据：

<div id='app'>{{name}}</div>//用插值的方式{{}}来放置data的变量

Vue的数据是双向数据的绑定，数据相互依赖，缺点是源头很难找到，可是提高了数据的感知css

指令：

v-if（条件渲染）html

<p v-if='bool'></p>//条件知足时显示元素
<p v-else></p>//不然显示元素
<p v-else-if='bool'></p>//条件知足时显示元素

v-for（列表渲染）用for in和for of都行（注意：若遍历数组的时候有重复项，要用一个bind绑定数据不然会出错，如<li v-for='(item,index) in list' v-bind : key=index>{{item}}--{{index}}</li>）vue

//数组
<li v-for='item in list'>{{item}}</li>//item是每一项，list是操做的数组（根据list的长度新建li）

<li v-for='(item,index) in list'>{{item}}--{{index}}</li>//item是每一项，index是数组索引，list是操做的数组（根据list的长度新建li）

<li v-for='item in 20'>{{item}}</li>//直接创造20个li

//字符串
<li v-for='item in "hello vue"'>{{item}}</li>//遍历字符串，输出9个li分别是字符每一项

//对象
<li v-for="(val,key,index) in obj">{{key}}:{{val}}---{{index}}</li>//val,key,index分别是对象的每项的属性，属性名，索引

v-click（事件指令）java

<button v-on:click="test">点我</button>//相似于onclick，test是Vue实例化中的函数
//v-on:click至关于@click
<a v-on:click.stop="doThis"></a>//取消冒泡事件
<div v-on:click.self="doThat">...</div>//只有点击这个元素自身才会触发

v-bind（属性设置）npm

<div v-bind:class='state?"red":"green"'>//v-bind：'属性名'='属性值'
//能够写成<div v-bind:class='state?"red":"green"'>

过滤器：（对数据进行处理的函数）

全局过滤器：和局部过滤的区别（局部过滤器只能在当前的组件中使用）数组

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>

        </style>
        <script src="./vue.js"></script>
    </head>

    <body>
        <div id="box">
            {{nowTime|getTime}}
            <!--  这是参数   这是过滤，中间用|隔开-->
        </div>
        <script>
            //全局过滤
            Vue.filter('getTime', function (value) {
                //中间能够写对数据的处理
                return value;
            });
            var vm = new Vue({
                el: '#box',
                data: {
                    nowTime: Date.now()
                }
            });
        </script>
    </body>

</html>

局部过滤：app

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>

        </style>
        <script src="./vue.js"></script>
    </head>

    <body>
        <div id="box">
            {{nowTime|getTime}}
            <!--  这是参数   这是过滤，中间用|隔开-->
        </div>
        <script>
            //局部过滤
            var vm = new Vue({
                el: '#box',
                data: {
                    nowTime: Date.now()
                },
                filters: {
                    getTime: function (value) {
                        //中间能够写对数据的处理
                        return value;
                    }
                }
            });
        </script>
    </body>

</html>

组件：就是vue的一个拓展实例

全局组件：（整个页面都能使用）dom

<template id="tp1">
            <!-- 组件建立 -->
            <div></div>
</template>
var mod = {//组件配置
                template: '#tp1',//选中组件
                data() {
                    return {
                    //写变量
                }
                },
                methods: {
                    //写函数
                }
            }
Vue.component('mod', mod);//注册组件
//直接在页面中输入
<mod></mod>
//便可使用

局部组件：（只能在当前选中做用范围中使用）函数

let box = new Vue({
                el: '#box',//当前做用范围是id为box的标签内
                data: {
                    
                },
                methods: {
                   
                },
                components: {//新建局部组件
                    mod: ({
                        template: '#tp1',
                        data() {
                            return {}
                        },
                        methods: {

                        }
                    })
                }
            });

组件间数据的传输：（相似事件抛发和监听）

父组件传给子组件：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./vue.js"></script>
    </head>

    <body>
        <div id="box">
            <fat></fat>
        </div>
        <!-- 子组件 -->
        <template id="son">
            <div>{{callson}}</div>
        </template>
        <!-- 父组件，父组件中包含子组件 -->
        <template id="fat">
            <div>
                <!-- 当父组件数据改变时，经过将数据保存在自身属性的方法传输 -->
                <div>{{fbool}}</div>
                <button @click='change'>Change</button>
                <!-- 将callson做为属性，附带数据传输给子元素 -->
                <son :callson='fbool'></son>
            </div>
        </template>
        <script>
            Vue.component('son', {
                template: '#son',
                data: function () {
                    return {

                    }
                },
                props: ['callson'] //子组件在该处接收数据
            });
            Vue.component('fat', {
                template: '#fat',
                data: function () {
                    return {
                        fbool: false
                    }
                },
                methods: { //点击父组件的按钮时，父组件内数据改变
                    change() {
                        this.fbool = !this.fbool;
                    }
                }
            });
            var box = new Vue({
                el: '#box'
            });
        </script>
    </body>

</html>

子组件传给父组件：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./vue.js"></script>
    </head>

    <body>
        <div id="box">
            <fat></fat>
        </div>
        <template id="son">
            <div>
                <button @click='change'>Change</button>
                <!-- <div>{{sbool}}</div> -->
            </div>

        </template>
        <template id="fat">
            <div>
                <div>{{fbool}}</div>
                <!-- 新建自定义事件，绑定父元素中的函数，传参数写在后面用逗号隔开 -->
                <son @callfat='changeF'></son>
                <!-- 当子元素被点击时触发父元素的方法 -->
            </div>
        </template>
        <script>
            Vue.component('son', {//点击子组件的按钮时，子组件内数据改变
                template: '#son',
                data: function () {
                    return {
                        sbool: false
                    }
                },
                methods: {
                    change() {
                        this.$emit('callfat');
                        this.sbool = !this.sbool;
                    }
                }
            });
            Vue.component('fat', { 
                template: '#fat',
                data: function () {
                    return {
                        fbool: false
                    }
                },
                methods: {
                    changeF() {
                        this.fbool = !this.fbool;
                    }
                }
            });
            var box = new Vue({
                el: '#box'
            });
        </script>
    </body>

</html>

兄弟组件：（结合子传父，父再传子）：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./vue.js"></script>
    </head>

    <body>
        <div id="box">
            <fat></fat>
        </div>
        <template id="sonf">
            <div>
                <button @click='change'>Change</button>
                <div>First <br>{{sfbool}}</div>
            </div>

        </template>
        <template id="sons">
            <div>Second <br>{{callson}}</div>
        </template>
        <template id="fat">
            <div>
                <sonf @callfat='changeF'></sonf>
                <sons :callson='fbool'></sons>
            </div>
        </template>
        <script>
            Vue.component('sonf', {
                template: '#sonf',
                data: function () {
                    return {
                        sfbool: false
                    }
                },
                methods: {
                    change() {
                        this.$emit('callfat');
                        this.sfbool = !this.sfbool;
                    }
                }
            });

            Vue.component('sons', {
                template: '#sons',
                data: function () {
                    return {

                    }
                },
                props: ['callson']
            });

            Vue.component('fat', {
                template: '#fat',
                data: function () {
                    return {
                        fbool: false
                    }
                },
                methods: {
                    changeF() {
                        this.fbool = !this.fbool;
                    }
                }
            });
            var box = new Vue({
                el: '#box'
            });
        </script>
    </body>

</html>

不相邻兄弟组件：

let angel=new Vue();//引入一个Vue实例
angel.$emit('test','Hello')//传送方在函数中抛出事件及数据
angel.$on('test',this.change)//接收方接收事件及数据

动画：

<transition name='aaa'>css中用name值进行动画
若中间有1个以上元素，须要在外面嵌套一个元素，再给该元素加
  	<div v-if='show'>
  		<p>Hello</p>
  	    <p>World</p>
  	</div>
</transition>
.aaa-enter{进入前
			opacity: 0;
		}
		.aaa-enter-to{进入后
			opacity: 1;
		}
		.aaa-enter-active{过渡时间
			transition: all 3s;
		}

		.aaa-leave{离开前
			opacity: 1;
		}
		.aaa-leave-to{离开后
			opacity: 0;
		}
		.aaa-leave-active{过渡时间
			transition: all 3s;
		}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程