VUE初级入门实践

VUE概述

生命周期

<script>
    new Vue({
        el:"#demo",
        data:{
            name:"Hello"
        },
        template:`
            <div>
                <p>{{name}}</p>
                <input v-model="name" />
            </div>
        `,
        beforeCreate:function(){
            console.log("创建之前")
            console.log(this.$el)//undefined
            console.log(this.$data)//undefined
        },
        // created 读取数据
        created:function(){
            console.log("创建之后")
            console.log(this.$el)//undefined
            console.log(this.$data)//有
        },
        //beforeCompile  
        beforeMount:function(){
            console.log("挂载之前")
            console.log(this.$el)//有
            console.log(this.$data)//有
            console.log(document.querySelector("#demo"))//只有节点,无数据
        },
        //ready
        mounted:function(){
            console.log("挂载之后")
            console.log(this.$el)//有
            console.log(this.$data)//有
        },
        beforeUpdate:function(){
            console.log("更新之前")
            console.log(this.$el)//有
            console.log(this.$data)//有
            console.log(document.querySelector("body"))
        },
        updated:function(){
            console.log("更新之后")
            console.log(this.$el)//有
            console.log(this.$data)//有
            console.log(document.querySelector("body"))
        }
    })
</script>

指令

内置指令

    <!--1.v-text/ng-bind  -->
    <p v-text="name"></p>

    <!-- 2.v-html/ng-bind-html -->
    <p v-html="html"></p>

    <!-- 3.v-if/ng-if -->
    <p v-if="bool">v-if 真</p>

    <!-- 4.v-else !bool / ng-hide -->
    <p v-else>v-else 假</p>

    <!-- 5.v-show/ng-show -->
    <p v-show="bool">v-show 真</p>

    <!-- 6.v-for/ng-repeat -->
    <ul>
        <li v-for="a in arr" track-by="$index" id="{{$index}}">{{a}}</li>
    </ul>

    <!-- 7.v-on:click/ng-click -->
    <button v-on:click="ok()">ok1</button>
    <button @click="ok()">ok2(简写)</button>

    <!-- 8.v-bind:class && v-bind:style /ng-class&&ng-style -->
    <p v-bind:class="{blue:bool}">class类名1</p>
    <p :class="{blue:bool}">class类名2(简写)</p>

    <!-- 9.v-model -->
    <input type="range" v-model="size" />
    <p v-bind:style="{fontSize:size + 'px'}">字体大小</p>
    <p :style="{fontSize:size + 'px'}">字体大小2(简写)</p>

    <!-- 10 给id起名字,注意:1)'name'是字符串,name是变量; 2): 冒号可以省略{{}}(表达式) -->
    <p :id="'name'+name" class="yellow">属性值</p>

自定义指令

// 指令的简单写法 vue 2.0 // 这里将会被 `bind` 和 `update` 调用
Vue.directive('color', function(ele, attr) {
    //1.获取指令中的属性值;
    ele.style.color = attr.expression
    console.log(attr)

    //2.获取非标准属性的属性值;
    var skill = ele.getAttribute("skill")
    console.log(skill);
});

过滤器

内置过滤器

  • VUE1.0版本
<div id="demo">
        <p style="color: red;">1.currency</p>
        <p>{{num|currency "¥" 5}}</p>
        <p style="color: red;">2.lowercase</p>
        <p>{{name|lowercase}}</p>
        <p style="color: red;">3.uppercase</p>
        <p>{{name|uppercase}}</p>
        <p style="color: red;">4.pluralize(复数) 特有</p>
        <p>{{date}}{{date|pluralize 'st' 'nd' 'rd' 'th'}}</p>
        <p style="color: red;">5.json</p>
        <p>{{obj|json 10}}</p>
        <p style="color: red;">6.debounce(延迟器) 特有</p>
        <button @click="ok()|debounce 2000">ok</button>
        <p style="color: red;">7.capitalize(首字母大写) 特有</p>
        <p>{{name|capitalize}}</p>
        <p style="color: red;">8.orderBy</p>
        <ul>
            <li v-for="arr in arrs|orderBy 'age' -1">{{arr.name}} {{arr.age}}</li>
        </ul>
        <p style="color: red;">9.filterBy</p>
        <input v-model="search" />
        <ul>
            <li v-for="arr in arrs|filterBy search in 'name'">{{arr.name}} {{arr.age}}</li>
        </ul>
        <p style="color: red;">9.limitBy</p>
        <input v-model="search" />
        <ul>
            <li v-for="arr in arrs|limitBy 2 1">{{arr.name}} {{arr.age}}</li>
        </ul>
        <p>{{name|limitBy 2 2}}</p>
    </div>
  • VUE2.0版本(无内置过滤器)

自定义过滤器

<script>
        Vue.filter("ed",function(input){
            return input + "ed";
        });
        new Vue({
            el:"#demo",
            template:`
            <p>{{name|ed}}</p>
            `,
            data:{
                name:"heightzhang"
            }
        })
</script>

组件

DEMO 完整的组件模版(prop,filters,directives,components)

Vue.component('xheader', {
            props:["message"], //主组件向子组件传递数据; 
            template: `
                <div style="border:1px solid green">
                    <p v-color="'red'">{{name|ed}}</p>
                    <button @click="ok()">ok</button>
                    <p v-if="message=='1'">1</p>
                </div>
            `,
            data: function() { 注意://组件中的data 必须是一个函数;
                return {
                    name: "第一个组件"
                }
            },
            methods: {  //组件中的方法;
                ok: function() {
                    console.log("ok")
                }
            }, 
            filters: { //组件中的过滤器
                ed: function(input) {
                    return input + "ed";
                }
            },
            directives: { //组件中的的指令
                color: function(el, binding, vnode) {
                    console.log(el)
                    el.style.color = binding.value
                }
            },
            mounted:function(){ //组件中的JS逻辑
                console.log(this.message)  //桥梁props ,接收message;
            },
            components: { 组件中的嵌套;
                xcontentheader: {
                    props: ["imgUrl"],
                    template: `
                        <div class="weui-media-box__hd"  >
                             ![](imgUrl)
                         </div>
                     `,
                     methods:{
                         setImg(imgUrl){
                        this.$store.dispatch('setImg',[imgUrl,true])
                    }
                }
             }
        })

通信

父组件向子组件(props)

<script>
//----------子组件
        Vue.component('xheader', {
            props: ["message"], //接收父组件的非标准属性
            template: `
                <div style="border:1px solid green">
                    <p>{{message}}</p>  //打印出来 =>变量name =>laoyao 
                </div>
            `,
            data: function() {
                return {
                    name: "第一个组件"
                }
            }
        })
//---------父组件-----------
        new Vue({
            el: "#demo",
            data: {
                name: "laoyao"
            },
            computed: {
                named: function() {
                    this.ok()
                    return this.name + "ed"
                }
            },
            template: `
                <div>
                    <input v-model="name" />
                    <xheader :message="name"></xheader> //父组件的非标准属性(传递变量name)
                    <p>{{named}}</p>
                </div>
            `,
            methods: {
                ok: function() {
                    console.log("ok")
                }
            }
        })
    </script>

子组件向父组件 / 兄弟组件之间

VUEX

DEMO(子组件xlist向xgallery传递数据)


index中心

<script>
// 新建一个状态管理:
var store = new Vuex.Store({
    state:{  //全局数据的集中栈
        imgUrl:null,
        isShowGallery:null,
    },
    getters:{   //处理state中的数据 类似过滤器的作用;
        getImgurl(state){
            return state.imgUrl
        },
        getBool(state){
            return state.isShowGallery
        }

    },
    //分发状态 改变state.imgUrl原先的值
    mutations:{
        setImg:function(state,data){
            state.imgUrl = data[0];
            state.isShowGallery=data[1];
        }
    },
    //action触发
    actions:{
        setImg(context,data){
            context.commit("setImg",data)
        }
    }
});

var vue = new Vue({
    el: "#demo",
    template: `
        <div>
            <xlist></xlist>
            <xgallery></xgallery>
        </div>
        `,
        store//第一步将Soter注入构造器中;  这个一定要写
})
</script>

上传数据部分

<xlist>
    methods:{
        setImg(imgUrl){
           this.$store.dispatch('setImg',[imgUrl,true])
         }
    }
</xlist>

接收数据部分

<xgallery>
    computed:{
            isShowGallery(){
                return this.$store.getters.getBool
            },
            imgUrl(){
                return this.$store.getters.getImgurl
            }
    }
 //  数据显示 => {{imgUrl}}  / {{isShowGallery}}
</xgallery>

路由

标准写法

<script>
        //1.1定义但是没注册
        var page1 = {
            template: `
                <div>第一页</div>
            `
        }

        var page2 = {
            template: `
                <div>第二页</div>
            `
        }
        //1.2注册;
        var router = new VueRouter({
            routes: [{
                    path: '/index',
                    component: page1
                }, {
                    path: '/home',
                    component: page2
                },
                { 
                    path: '/', redirect: 'index'   //2重定向
                }]  
        })
        new Vue({
            el:"#app",
            router,// (缩写)相当于 routes: routes
            template:`
                <router-view></router-view>
            `
        })
        //3.路由传参数;
    </script>

嵌套路由(三层)

<script>
    var router = new VueRouter({
        routes: [{
                path: '/index',
                component: {
                    template: `
                        <div>
                            这是index的页面
                            <a href="#/index/a">a</a>
                            <a href="#/index/b">b</a>
                            <router-view></router-view>
                        </div>
                    `
                },
                children: [{
                    //子路由没有/
                    path: 'a',
                    component: {
                        template: `
                            <div>
                                <p>a</p>
                                <a href="#/index/a/aa">aa</a>
                                <a href="#/index/a/bb">bb</a>
                                <router-view></router-view>
                            </div>
                        `
                    },
                    children: [{
                        path: 'aa',
                        component: {
                            template: "<p>aa</p>"
                        }
                    }, {
                        path: 'bb',
                        component: {
                            template: "<p>bb</p>"
                        }
                    }]
                }, {
                    //子路由没有/
                    path: 'b',
                    component: {
                        template: "<p>b</p>"
                    }
                }]
            }, {
                path: '/detail',
                component: {
                    template: `
                        <div>
                            这是detail的页面
                        </div>
                    `
                }
            }, {
                path: '/',
                redirect: '/index'
            }]
            // (缩写)相当于 routes: routes
        });
        new Vue({
        el: "#demo",
        template: `
            <div>
                <a href="#/index">index</a>
                <a href="#/detail">detail</a>
                <router-view></router-view>
            </div>
        `,
        router,
        mounted() {
            console.log(this)
        }
    })
</script>

补充:

定义全局属性与方法

/*
    // 一个页面用一个构造器即可;不建议用多个构造器;  
    //可以将构造器理解为一个组件;组件最大;  组件与组件之间的通信 ; 
     var(全局属性) => angular中的$rootScope
     var  test(全局方法) => angular中的server;
*/
    var exchange = 1;
    var test = function(log){
        console.log(log)
    }
    //构造器 组件的一种呈现
    new Vue({
        //element节点 querySelector
        el:"#demo",
        //HTML CSS
        template:`
        <div>
            <p>{{name}} {{exchange}}</p>
            <button @click="test('abc')">Ok</button>
        </div>`,
        //需要绑定的数据 $scope
        data:{
            name:"Hello",
            exchange
        },
        methods:{
            test
        }
    })

如何获取$index索引值?

DEMO

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="demo">
            <p v-for="(arr,index) in arrs" track-by="$index" :id="index">{{arr}}</p>
        </div>
    </body>
    <script src="../js/vue2.js"></script>
    <script>
        //构造器
        new Vue({
            //element节点 querySelector
            el:"#demo",
            //需要绑定的数据 $scope
            data:{
                name:"Hello World",
                arrs:["a","b","c","a","d"]
            }
        })
    </script>
</html>

表单控件

DEMO

<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 双向数据绑定而已; -->
    <div id="demo">
        <p style="color: red;">Radio</p>
        A:
        <input type="radio" value="A" v-model="radio" /> B:
        <input type="radio" value="B" v-model="radio" /> C:
        <input type="radio" value="C" v-model="radio" />
        <p>{{radio}}</p>
        <p style="color: red;">CheckBox</p>
        A:
        <input type="checkbox" value="A" v-model="checkbox" /> B:
        <input type="checkbox" value="B" v-model="checkbox" /> C:
        <input type="checkbox" value="C" v-model="checkbox" />
        <p>{{checkbox}}</p>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
//构造器
new Vue({
    //element节点 querySelector
    el: "#demo",
    //需要绑定的数据 $scope
    data: {
        radio: "B",
        name: "Hello World",
        checkbox: ["A", "C"]
    }
})
</script>

</html>

render(高级玩法:可用来替换template)

<script>
new Vue({
    el: "#demo",
    data: {
        name: "laoyao"
    },
    //template: "<div>{{name}}</div>",
    render: function(createElement) {
        return createElement(
            //标签
            'div', // tag name 标签名称
            {
                attrs: {
                    id: 'foo'
                },
            }, // 子组件中的阵列
            [createElement(
                'p',
                {
                    style:{
                        color: 'red',
                    }
                }
            ),["Hello"]]
        )
    },
})
</script>

过渡效果

内置的组件transition

参考: 过渡:进入,离开和列表

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,118评论 0 6
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,048评论 18 139
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 10,894评论 4 129
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 4,971评论 0 29
  • 同步UDP客户端 UDP是面向无连接的,使用起来比较简单,打开socke之后,指定目标端口,直接进行接收和发送: ...
    长不胖的Garfield阅读 2,522评论 0 1