vue 前端框架 (三)

時間 2019-12-13

標籤 vue 前端框架简体版

原文原文鏈接

VUE 生命週期javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js"></script>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    </head>
    <body>
        <div id="app"></div>
        
        
        
        
        <script>
            var vm = Vue({
                el:'#app',
                data:{},
                methods:{},
                filters:{},
                directives:{},
                
                // 什麼是生命週期:VUE 實例建立/運行/銷燬 ,老是伴隨着各類各樣的事件,
                // 這些事件,統稱爲生命週期
                
                // 生命週期鉤子:就是生命週期事件的別名,
                
                // 主要的生命週期函數分爲:
                
                // 建立期間的生命週期函數:
                // vue第一個生命週期函數
                beforeCreate(){}
                // 實例剛在內存中被建立出來,此時,尚未初始化data和methods屬性
                
                // vue 第二個生命週期函數
                created(){}
                // 實例已經在內存中建立,此時data和mothods 已經建立好了,此時尚未開始編譯模板
                
                // vue 第三個生命週期函數
                beforeMount() {}
                // 此時已經完成了模板的編譯,可是尚未掛載到頁面中
                
                // vue 第四個生命週期函數
                mounted(){}
                // 此時,已經編譯好了模板,掛載到頁面指定容器中顯示了
                
                // 運行期間的生命週期函數:
                // vue 第五個生命週期函數
                beforeUpdate(){}
                // 狀態更新以前執行此函數,此時data中的狀態值是最新的,可是界面上顯示的數據仍是舊的,由於此時尚未開始從新渲染DOM 節點
                
                // vue 第六個生命週期函數
                updated(){}
                // 實例更新完畢以後調用此函數,此時data中的狀態值和界面上顯示的數據,都已經完成了更新,界面已經被從新渲染好了.
                
                // 銷燬期間的生命週期函數:
                // vue 第七個生命週期函數
                beforeDestroy(){}
                // 實例銷燬以前調用,這一步,實例乃然可用
                
                // vue 第八個生命週期函數
                destroyed(){}
                // Vue實例銷燬後調用,調用後,vue實例指示的全部東西都會解綁定,全部的事件監聽器都會被移除,全部的子實例也會被銷燬.__constructor__()
                
                
            })
        </script>
    </body>
</html>

vue-resource 獲取後端數據css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js"></script>
        <script src="js/vue-resource.js"></script>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    </head>
    <body>
        <div id="app">
            <input type="button" value="get點擊" @click="getinfo" />
            <input type="button" value="post點擊" @click="postinfo" />
            <input type="button" value="jsonp點擊" @click="jsonpinfo" />
        </div>
        
        <script>
            var vm = new Vue({
                el:'#app',
                data:{},
                methods:{
                    getinfo(){
                        this.$http.get('http://127.0.0.1:5000/infoapi').then(function(result){
                            console.log(result.body.msg)
                        })
                    },
                    postinfo(){
                        var data = {'zhuangtai':'OK'}
                        this.$http.post('http://127.0.0.1:5000/infoapi',{data},{emulateJSON:true}).then(result =>{
                            console.log(result.body.msg)
                            console.log(typeof(result))
                        })
                    },
                    jsonpinfo(){
                        this.$http.jsonp('http://127.0.0.1:5000/infoapi').then(result => {
                            console.log(result.body)
                        })
                    },
                },
            })
        </script>
    </body>
</html>

獲取後端數據練習html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script src="js/vue-resource.js"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body>
        <div id='app'>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="pannel-title">添加品牌</h3>
                </div>
                <div class="panel-body form-inline">
                    <label>
                        Name:
                        <input type="text" class="form-control" v-model="name" @keyup.enter="add">
            
                    </label>
                    <input type="button" value="添加" class="btn btn-primary" @click="add">
                </div>
            </div>
            <br>
            <table class="table table-bordered table-hover table-striped" >
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>操做</th>
                </tr>
                <tr v-for='i in info' :key='i.id'>
                    <td>{{ i.id }}</td>
                    <td>{{ i.name }}</td>
                    <td><a href="#" @click.prevent='delinfo(i.id)'>刪除</a></td>
                </tr>
            </table>
            
        </div>
        <script>
            Vue.http.options.emulateJSON = true;
            Vue.http.options.root = 'http://172.16.3.104:5000/';
        
            var vm = new Vue({
                el:'#app',
                data:{
                    name:'',
                    searchname:'',
                    info:[],
                },
                methods:{
                    getinfo(){
                        this.$http.get('infoapi').then( data => {
                            this.info = data.body
                        })
                    },
                    add(){
                        this.$http.post('addinfoapi',{name:this.name},{}).then( data => {
                            if(data.body.status == 'OK'){
                                this.name = ''
                                this.getinfo()
                            }else{
                                alert('添加失敗')
                            }
                        })
                    },
                    delinfo(id){
                        this.$http.post('delinfoapi',{id:id},{}).then( data => {
                            if(data.body.status == 'OK'){
                                this.getinfo()
                            }else{
                                alert('刪除失敗')
                            }
                        })
                    },
                },
                created(){
                    this.getinfo()
                },

            });
        </script>
    </body>
</html>

VUE 動畫效果前端

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script src="js/vue-resource.js"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        
        <style>
            .v-enter,.v-leave-to{
                opacity: 0;
                transform: translateX(150px);
            }
            .v-enter-active,.v-leave-active{
                transition: all 2s ease
            }
            .my-enter,.my-leave-to{
                opacity: 0;
                transform: translateX(300px) translateY(150px);
            }
            .my-enter-active,.my-leave-active{
                transition: all 1s ease
            }
            
            
        </style>
    </head>
    <body>
        <div id='app'>
            <input type="button" @click="istrue=!istrue" value="點擊">
            <transition>
                <p v-show="istrue">啊啊啊啊啊啊啊啊啊啊</p>
            </transition>
            <br>
            <input type="button" @click="istrue2 =!istrue2" value="點擊">
            <transition name='my'>
                <p v-show="istrue2">啊啊啊啊啊啊啊啊啊啊</p>
            </transition>
<!--         點擊按鈕,顯示p標籤 再次點擊隱藏皮標籤
            1.transition元素將p標籤包裹
            2.經過修改transition 所提供的樣式修改
            .v-enter,.v-enter-to  入場前,入場後
            .v-leave,.v-leave-to  離場前,離場後
            .v-enter-active,    入場動做
            .v-leave-active,    離場動做 -->
            
            
        </div>
        
        <script>
            Vue.http.options.emulateJSON = true;
            Vue.http.options.root = 'http://172.16.3.104:5000/';
        
            var vm = new Vue({
                el:'#app',
                data:{
                    istrue:false,
                    istrue2:false,
                },
                methods:{},
            });
        </script>
    </body>
</html>

第三方css動畫效果vue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script src="js/vue-resource.js"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/animate.css">
    </head>
    <body>
        <div id='app'>
            <input type="button" @click="istrue=!istrue" value="點擊">
            <transition 
            enter-active-class='animated bounceIn' 
            leave-active-class='animated bounceOut'
            :duration="{ enter:200, leave:500 }">
                
                <p v-show="istrue">我來了啦!!</p>
            </transition>
        </div>
        
        <script>

        
            var vm = new Vue({
                el:'#app',
                data:{
                    istrue:false,
                },
                methods:{},
            });
        </script>
    </body>
</html>

VUE 動畫鉤子函數java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script src="js/vue-resource.js"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            .v-enter,.v-leave-to{
                opacity: 0;
                transform: translateY(400px);
            }
            
            .v-enter-active,
            .v-leave-active{
                transition: all 0.8s ease;
            }
            
            /* 這裏必須兩個屬性連用要不不起效果 */
            .v-move{
                transition: all 1s ease;
            }
            .v-leave-active{
                position: absolute;
            }

        </style>
    </head>
    <body>
        <div id='app'>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="pannel-title">添加品牌</h3>
                </div>
                <div class="panel-body form-inline">
                    <label>
                        Name:
                        <input type="text" class="form-control" v-model="name" @keyup.enter="add">
            
                    </label>
                    <input type="button" value="添加" class="btn btn-primary" @click="add">
                </div>
            </div>
            <br>
            <table class="table table-bordered table-hover table-striped" >
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>操做</th>
                    </tr>
                </thead>
                <tbody is="transition-group">
                    <tr v-for='i in info' :key='i.id'>
                        <td>{{ i.id }}</td>
                        <td>{{ i.name }}</td>
                        <td><a href="#" @click.prevent='delinfo(i.id)'>刪除</a></td>
                    </tr>
                </tbody>
            </table>
        
        </div>
        <script>
            Vue.http.options.emulateJSON = true;
            Vue.http.options.root = 'http://172.16.3.104:5000/';
        
            var vm = new Vue({
                el:'#app',
                data:{
                    name:'',
                    searchname:'',
                    info:[],
                },
                methods:{
                    getinfo(){
                        this.$http.get('infoapi').then( data => {
                            this.info = data.body
                        })
                    },
                    add(){
                        this.$http.post('addinfoapi',{name:this.name},{}).then( data => {
                            if(data.body.status == 'OK'){
                                this.name = ''
                                this.getinfo()
                            }else{
                                alert('添加失敗')
                            }
                        })
                    },
                    delinfo(id){
                        this.$http.post('delinfoapi',{id:id},{}).then( data => {
                            if(data.body.status == 'OK'){
                                this.getinfo()
                            }else{
                                alert('刪除失敗')
                            }
                        })
                    },
                },
                created(){
                    this.getinfo()
                },

            });
        </script>
    </body>
</html>

VUE全局組件ajax

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定義vue組件</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <!-- 
        什麼是組件:
        組件的組件的出現就是爲了拆分vue實例的代碼量,可以讓咱們以不一樣的組件來劃分不一樣的功能模塊,將咱們須要什麼樣的功能,就能夠去調用對應的組件便可.
        
        組件和模塊的區別:
        組件化:
        是從代碼邏輯的角度進行劃分,方便diamante分層開發,保證每一個功能模塊的職能單一;
        組件化:
        是從UI界面的角度進行劃分的,前端組件化,方便組件UI的重用 
        -->
        <div id="app">
                <!-- 第一種方式 -->
                <!-- <mycom1></mycom1> -->
                <!-- <my-com2></my-com2> -->
                
                <!-- 第二種方式 -->
                <mycom1></mycom1>
                
        </div>
    
        <template  id="muban">
            <div>
                <h1>你好 中國!</h1>
                <p>這是在app實例外定義的一個模板 id=muban</p>
            </div>
        </template>
    
        <script>
//             // 第一種建立全局組件方式
//             //使用vue.extend來建立全局的vue組件
//             var com1 = Vue.extend({
//                 template:"<h1>hello world1!!</h1>"
//             })
//             
//             //使用vue.component定義全局組件的時候,
//             //組件名稱使用了 駝峯命名,則須要把大寫的駝峯改成小寫的字母,
//             //同時兩個單詞以前 使用'-'連接
//             Vue.component('mycom1',com1)
//             Vue.component('myCom2',com1)
//             

//             // 上面的簡寫方式
//             Vue.component('mycom1',Vue.extend({
//                 template:"<h1>hello world1!!</h1>"
//             }))
            
//             //上面的再簡寫方式
//             Vue.component('mycom1',{
//                 template:"<h1>hello world1!!</h1>"
//             })
            
            // 注意 不管是哪一種方式 template屬性指向的模板內容,必須有且只能有惟一的一個根元素.
            
            // 第二種建立全局模板的方式
            // 在#app實例外建立一個template元素模板,而後引入app實例內部
            Vue.component('mycom1',{
                template:'#muban'
            })
            
            // 須要建立vue實例,獲得viewmodel 才能渲染組件
            var vm = new Vue({
                el:'#app',
            })
        
        </script>
    </body>
</html>

Vue 私有組件vue-router

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定義vue組件</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
                <muban></muban>
                <muban2></muban2>
        </div>
        
        <template id='muban2'>
            <div >
                <h1>這是私有組件!</h1>
            </div>
        </template>


        <script>
            var vm = new Vue({
                el:'#app',
                data:{},
                methods:{},
                filters:{},
                directives:{},
                
                components:{
                    muban:{
                        template:'<div><h1>你好 世界!</h1></div>'
                    },
                    muban2:{
                        template:'#muban2'
                    },
                },
                
                beforeCreate(){},
                created(){},
                beforeMount(){},
                mounted(){},
                beforeUpdate(){},
                updated(){},
                beforeDestroy(){},
                destroyed(){},
                
            })
        
        </script>
    </body>
</html>

VUe 組件應用data 屬性json

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定義vue組件</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
                <muban></muban>
                <muban></muban>
                <muban2></muban2>
                
                
        </div>
        
        <template id='muban2'>
            <div >
                <h1>這是私有組件!</h1>
            </div>
        </template>


        <script>
            var vm = new Vue({
                el:'#app',
                data:{},
                methods:{},
                filters:{},
                directives:{},
                
                components:{
                    muban:{
//                         1.組件能夠有本身data數據
//                         2.組件的data和實例data有些不同,實例中的data能夠爲一個對象,可是組件中的data必須是一個方法
//                         3.組件中data除了必須爲一個方法以外,這個方法內部,還必須返回一個對象才行;
//                         4.組件中的data數據,使用方式和實例中的data使用方式徹底同樣.
                        
                        template:'<div><input type="button" value="+1" @click="add" ><h1>{{count}}</h1></div>',
                        data(){
                            return{count:0}
                        },
                        methods:{
                            add(){
                                this.count ++
                            }
                        },
                        
                    },
                    muban2:{
                        template:'#muban2'
                    },
                },
                
                beforeCreate(){},
                created(){},
                beforeMount(){},
                mounted(){},
                beforeUpdate(){},
                updated(){},
                beforeDestroy(){},
                destroyed(){},
                
            })
        
        </script>
    </body>
</html>

Vue 組件切換bootstrap

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 第一種組件切換的方式 -->
            <a href="#" @click.prevent="flag=true">登陸</a>
            <a href="#" @click.prevent="flag=false">註冊</a>
            <login v-if='flag'></login>
            <register v-else='flag'></register>
            
            <!-- 第二種組件切換的方式 -->
            <a href="#" @click.prevent="flag2='login'">登陸</a>
            <a href="#" @click.prevent="flag2='register'">註冊</a>

            <component :is='flag2'></component>
        
<!--     vue提供的標籤 回顧!
        component,
        template,
        transition,
        transition-group -->
        
        
        
        </div>
        
        
        
        <script>
            Vue.component('login',{
                template:'<h1>登陸組件</h1>'
            })
            Vue.component('register',{
                template:'<h1>註冊組件</h1>'
            })
            
            var vm = new Vue({
                el:'#app',
                data:{
                    flag:true,
                    flag2:'login',
                }
                
                
            })
            
        </script>
    </body>
</html>

VUE 組件切換+ 動畫效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <style type="text/css">
            .v-enter,.v-leave-to{
                opacity: 0;
                transform: translateX(100px);
            }
            
            .v-enter-active,.v-leave-active{
                transition: all 1s ease;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 第一種組件切換的方式 -->
            <a href="#" @click.prevent="flag=true">登陸</a>
            <a href="#" @click.prevent="flag=false">註冊</a>
            <login v-if='flag'></login>
            <register v-else='flag'></register>
            
            <!-- 第二種組件切換的方式 -->
            <a href="#" @click.prevent="flag2='login'">登陸</a>
            <a href="#" @click.prevent="flag2='register'">註冊</a>

            <!-- 經過mode屬性 設置組件切換時候的模式 -->
            <transition mode='out-in'>
                <component :is='flag2'></component>
            </transition>
            
<!--     vue提供的標籤 回顧!
        component,
        template,
        transition,
        transition-group -->
        
        
        
        </div>
        
        
        
        <script>
            Vue.component('login',{
                template:'<h1>登陸組件</h1>'
            })
            Vue.component('register',{
                template:'<h1>註冊組件</h1>'
            })
            
            var vm = new Vue({
                el:'#app',
                data:{
                    flag:true,
                    flag2:'login',
                }
                
                
            })
            
        </script>
    </body>
</html>

VUe動畫小球

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <style type="text/css">
            #ball{
                width: 15px;
                height: 15px;
                background-color: #269ABC;
                border-radius: 50%;
            }
            
        </style>
    </head>
    <body>
        <div id="app">
            <input type="button" value="按鈕" @click="flag=!flag" />
            
            <transition
                @before-enter = "benter"
                @enter = 'enter'
                @after-enter='fenter'
            >
                <div id="ball" v-show="flag"></div>
            </transition>
            
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    flag:false,
                },
                methods:{
                    benter(el){
                        el.style.transform = 'translate(0,0)'
                    },
                    enter(el,done){
                        el.offsetWidth
                        el.style.transform = 'translate(150px,450px)'
                        el.style.transition='all 1s ease'
                        done()
                    },
                    fenter(el){
                        this.flag = !this.flag
                    },
                }
            })
            
        </script>
    </body>
</html>

VUE 組件向子組件傳值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <com1 :zzz='msg'></com1>
        </div>
        <script>
//             子組件中要訪問父類數據,
//             1.首先父類數據要綁定到模板上(傳遞數據給模板)
//             2.子組件 要引入父類數據
//             3.子組件 應用 引入的父類自定義的數據名
            
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'這是父類 數據!'
                },
                methods:{},
                components:{
                    com1:{
                        template:'<h1>{{info}}這是私有組件!-{{zzz}}</h1>',
                        // 組件中data數據 對於組件是能夠讀寫
                        data(){
                            return {
                                info:'--這是組件數據--',
                            }
                        },
                        // 組件中定義的父類數據 是隻讀的
                        props:['zzz'],
                    }
                }
            })
            
        </script>
    </body>
</html>

VUE 父組件方法傳遞給子組件/共享子組件屬性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <com1 @zzz='show'></com1>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'這是父類 數據!',
                    sonmsg:null,
                },
                methods:{
                    // **傳遞參數
//                     show(d1){
//                         console.log('this 父組件 ! OK!' + d1)
//                     },
                    show(d1){
                        console.log('this 父組件 ! OK!')
                        this.sonmsg = d1 
                    },


                },
                components:{
                    com1:{
                        template:'<h1>這是私有組件!<input type="button" value="按鈕" @click="fshow"></h1>',
                        data(){
                            return {
                                sonmsg:{name:'sonname'},
                            }
                        },
                        methods:{
                            fshow(){
                                // **傳遞參數,第二的位置傳遞參數
                                // this.$emit('zzz','123')
                                
                                // 將子組件的data傳遞至方法而後父組件能夠從方法獲取子組件數據
                                this.$emit('zzz',this.sonmsg)
                                
                            }
                        }
                    }
                }
            })
            
        </script>
    </body>
</html>

VUE 評論練習

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <muban0 @ftj='tj' ></muban0>
            <div>
                <table>
                    <tr v-for='i in list'>
                        <td>{{i.pl}}</td>
                        <td>{{i.name}}</td>
                    </tr>
                </table>
            </div>
        
        
        </div>
        
        
        <template id="muban0">
            <div>
                <input type="text" placeholder="評論人" v-model="name"/>
                <input type="text" placeholder="評論" v-model="pl"/>
                <input type="button" value="發表評論" @click="fbpl" />
            </div>
        </template>
        
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    list:[
                        {name:'a',pl:'aaaa'},
                    ]
                },
                created(){
                    this.tj()
                },
                methods:{
                    tj(){
                        var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                        this.list = list
                    },
                },
                components:{
                    muban0:{
                        data(){
                            return {
                                name:'',
                                pl:'',
                            }
                        },
                        template:'#muban0',
                        methods:{
                            fbpl(){
                                var aaa = {name:this.name,pl:this.pl}
                                var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                                list.unshift(aaa)
                                localStorage.setItem('cmts',JSON.stringify(list))
                                this.name = this.pl = ''
                                
                                this.$emit('ftj')
                            }
                        },
                    }
                }
            })
            
        </script>
    </body>
</html>

vue $ref綁定DOM元素以及元素組件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ref</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
                <muban ref='r1'></muban>
                
                <p ref='r2'>這是p標籤</p>
                
                <br>
                <input type="button" value="r1點擊獲取組件數據以及處罰組件方法" @click="r1click"/>
                <input type="button" value="r2點擊獲取r2DOM對象" @click="r2click" />
                
        </div>
        
        <script>
            var vm = new Vue({
                el:'#app',
                methods:{
                    r1click(){
                        console.log(this.$refs.r1.msg)
                        this.$refs.r1.show()
                    },
                    r2click(){
                        console.log(this.$refs.r2)
                    },
                },
                components:{
                    muban:{
                        template:'<div><h1>你好 世界!</h1></div>',
                        data(){
                            return {
                                msg:'私有組件數據!'
                            }
                        },
                        methods:{
                            show(){
                                console.log("這是私有組件,方法")
                            },
                        }
                    },
                },    
            })
        
        </script>
    </body>
</html>

VUE前端路由

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script src="js/vue-router.js"></script>
        <link href="css/bootstrap.min.css"/>
        <style type="text/css">
            
            /* router-link默認的class類名 */
            /* 能夠在router實例化中 linkActiveCLASS屬性自定義class名名 */
            .router-link-active,.mylinkactive{
                color: orangered;
                font-weight: 500;
                font-size: 80px;
                font-style: italic;
            }
            
            .v-enter,v-leave-to{
                opacity: 0;
                transform: translateX(140px);
            }
            
            .v-enter-active,v-leave-active{
                transition:all 1s ease ;
            }
            
        </style>
    </head>
    <body>
        <!-- 前端路由概念:-->
        <!-- 對於單個應用程序來講,主要經過URL中的hash來實現不一樣頁面之間的切換,同時,hash有一個特色:
        http請求中不會包含hash相關的內容,若依,單頁面程序中的頁面跳轉主要用hash實現.
        在單頁面應用程序中,這種經過hash改變來切換頁面的方式,稱爲前端路由 -->
        
        <!-- 這一節總結: -->
        <!--     
        應用vue-route步驟:
        1.建立Vue實例
        2.建立Vuerouter實例
        3.建立組件
        4.vueroute實例中,配置path路徑 將組件變量名註冊至path路徑中
        5.在vue實例中,router屬性中 註冊vuerouter實例
        6.在vue el中 router-view 展示組件內容,可選項 router-link 模擬動態切換組件
         -->

        <!-- 
        URL中的hash(#)
        1.# 的含義:#表明網頁中的一個位置，其右邊的字符，就是該位置的標識符。
        2.HTTP請求不包含#:#號是用來指導瀏覽器動做的，對服務器端徹底無用。因此，HTTP請求中不包含#。
        3.#後面的字符:在第一個#後面出現的任何字符，都會被瀏覽器解讀爲位置標識符。這意味着，這些字符都不會被髮送到服務器端。
        4.改變#不觸發網頁重載:單單改變#後的內容，瀏覽器只會滾動到相應位置，不會從新加載網頁。瀏覽器不會從新向服務器請求頁面。
        5.改變#會改變瀏覽器的訪問歷史:每一次改變#後的部分，都會在瀏覽器的訪問歷史中增長一個記錄，使用"後退"按鈕，就能夠回到上一個位置。對於ajax應用程序特別有用，能夠用不一樣的#值，表示不一樣的訪問狀態，而後向用戶給出能夠訪問某個狀態的連接。
值得注意的是，上述規則對IE 6和IE 7不成立，它們不會由於#的改變而增長曆史記錄。
        6.window.location.hash讀取#值:window.location.hash這個屬性可讀可寫。讀取時，能夠用來判斷網頁狀態是否改變；寫入時，則會在不重載網頁的前提下，創造一條訪問歷史記錄。
        7.onhashchange事件:
            這是一個HTML 5新增的事件，當#值發生變化時，就會觸發這個事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持該事件。
            它的使用方法有三種：
            1.window.onhashchange = func;
            2.<body onhashchange="func();">
            3.window.addEventListener("hashchange", func, false);
        8.Google抓取#的機制
            默認狀況下，Google的網絡蜘蛛忽視URL的#部分。
            可是，Google還規定，若是你但願Ajax生成的內容被瀏覽引擎讀取，那麼URL中可使用"#!"，Google會自動將其後面的內容轉成查詢字符串_escaped_fragment_的值。
            好比，Google發現新版twitter的URL以下：
            http://twitter.com/#!/username
            就會自動抓取另外一個URL：
            http://twitter.com/?_escaped_fragment_=/username
            經過這種機制，Google就能夠索引動態的Ajax內容。
            -->
            
            <div id="app">
                
            <!--     不推薦
                <a href="#/login">登陸</a>
                <a href="#/register">註冊</a> 
                -->
                
                <!-- router-link 默認渲染成A標籤 -->
                <router-link to='login' tag='span'>登陸</router-link>
                <router-link to='register' tag='span'>註冊</router-link>
                
                
                <!-- vue-router 提供的元素,專門用來 當作佔位符,將組件展現到router-view中 -->
                <transition mode='out-in'>
                    <router-view></router-view>
                </transition>
                
                
            </div>
            
            
            
            <script>
                var login = {
                    template:"<h1>登陸組件</h1>"
                }
                var register = {
                    template:"<h1>註冊組件</h1>"
                }
                
                
                var routerobj = new VueRouter({
                    // route表明匹配規則
                    routes:[
//                         每一個路由規則,都是一個對象,這個規則對象,身上有兩個必須的屬性
//                         屬性1 是path,表示監聽的那個路由連接地址
//                         屬性2 是component 表示若是路由前面匹配到了path,則展現componnent對應的那個組件
                        {path:'/',redirect:'/login'},
                        {path:'/login',component:login},
                        {path:'/register',component:register},
                        // 注意,component 的屬性值,逆序是一個組件的模板對象,而不能是引用組件名稱
                    ],
                    linkActiveClass:'mylinkactive',
                })
                
                var vm = new Vue({
                    el:'#app',
                    router:routerobj,
                    // 將路由規則對象,註冊到vm實例上,用來監聽URL 地址的變化,而後展現對應的組件
                })
                
                
            </script>
    </body>
</html>

vue前端路由參數傳遞

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script src="js/vue-router.js"></script>
        <link href="css/bootstrap.min.css"/>
        <style type="text/css">
        
            .router-link-active,.mylinkactive{
                color: orangered;
                font-weight: 500;
                font-size: 80px;
                font-style: italic;
            }
            .v-enter,v-leave-to{
                opacity: 0;
                transform: translateX(140px);
            }
            .v-enter-active,v-leave-active{
                transition:all 1s ease ;
            }
            
        </style>
    </head>
    <body>
        <div id="app">
            <router-link to='/login' tag='span'>登陸</router-link>
            <!-- 第一種傳遞參數方式: -->
            <router-link to='/login?id=10&name=alex' tag='span'>第一種傳遞參數方式</router-link>
            <!-- 第二種傳遞參數方式: 使用過程須要嚴格匹配路由path-->
            <router-link to='/login/12' tag='span'>第二種傳遞參數方式</router-link>
            <router-link to='/register' tag='span'>註冊</router-link>
        
            <transition mode='out-in'>
                <router-view></router-view>
            </transition>
        </div>
        <script>
            var login = {
                template:"<h1>登陸組件-{{$route.query.id}}-{{$route.params.id}}-</h1>",
                created(){
                    
                    console.log('這是$route實例'+this.$route)

                    // 第一種傳遞參數的數據獲取:
                    // 這是url?參數的方式 傳遞數據至$route.query中,多個參數值也是在query中提取.
                    console.log('這是第一種方式傳參:'+this.$route.query.id)
                    
                    // 第二種傳遞參數的數據獲取,須要匹配路由規則!!!
                    console.log('這是第二種方式傳參:'+this.$route.params.id)
                },
            }
            var register = {
                template:"<h1>註冊組件</h1>"
            }
            var routerobj = new VueRouter({
                routes:[
                    {path:'/',redirect:'/login'},
                    {path:'/login',component:login},
                    {path:'/login/:id',component:login},
                    {path:'/register',component:register},
                ],
                linkActiveClass:'mylinkactive',
            })
            var vm = new Vue({
                el:'#app',
                router:routerobj,
            })
        </script>
    </body>
</html>

vue 路由嵌套

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script src="js/vue-router.js"></script>
        <link href="css/bootstrap.min.css"/>
    </head>
    <body>
        <div id="app">
            <router-link to='/index'>首頁</router-link>
            <router-view></router-view>
        </div>
        
        <template id="shouye">
            <div>
                <h1>首頁</h1>
<!--             注意:這子路由節點,加/ 或者 不加 / 直接影響匹配的路由路徑,
                當不加的/ 時 訪問路徑爲 /父路徑/子路徑
                加了/ 時 訪問的路徑爲 /子路徑 -->
                
                <!-- 這種是不加斜線的方式 -->
                <router-link to='/index/login'>登陸</router-link>
                <router-link to='/index/register'>註冊</router-link>
                
                <!-- 這種是加斜線的方式 -->
<!--             <router-link to='/login'>登陸</router-link>
                <router-link to='/register'>註冊</router-link> -->
                
                <router-view></router-view>
            </div>
            
        </template>
        <script>
            var index = {
                template:'#shouye',
            }
            var login = {
                template:"<h1>登陸組件</h1>",
            }
            var register = {
                template:"<h1>註冊組件</h1>",
            }
            var routerobj = new VueRouter({
                routes:[
                    {
                        path:'/index',
                        component:index,
                        children:[
                            
//                             注意:這子路由節點,加/ 或者 不加 / 直接影響匹配的路由路徑,
//                             當不加的/ 時 訪問路徑爲 /父路徑/子路徑
//                             加了/ 時 訪問的路徑爲 /子路徑
                            // 推薦 子路由不加斜線
                            // 概括總結:一個是相對路徑方式,一個是絕對路徑的方式
                            
                            {path:'login',component:login},
                            {path:'register',component:register},
                            
//                             {path:'/login',component:login},
//                             {path:'/register',component:register},
                        ],
                    },
                ],
            })
            var vm = new Vue({
                el:'#app',
                router:routerobj,
            })
        </script>
    </body>
</html>

vue命名視圖實現經典佈局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script src="js/vue-router.js"></script>
        <link href="css/bootstrap.min.css"/>
        <style type="text/css">
            body{
                margin: 0 auto;
            }
            
            .header{
                height: 160px;
                width: 100%;
                background-color: #00FFFF;
            }
            .container{
                display: flex;
                height: 700px;
                
            }
            .left{
                background-color: firebrick;
                flex: 2;
            }
            .main{
                background-color: yellowgreen;
                flex: 8;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <router-view name='default'></router-view>
            <div class='container'>
                <router-view name='left'></router-view>
                <router-view name='main'></router-view>
            </div>
        </div>
        
        <script>
            var indextop = {
                template:'<div class="header">banner條</div>',
            }
            var indexlelf = {
                template:"<div class='left'><ul><li>首頁</li><li>事件1</li><li>事件2</li><li>事件3</li><li>事件4</li></ul></div>",
            }
            var indexmain = {
                template:"<div class='main'>main 內容區域 <router-view></router-view> </div>",
            }
            var routerobj = new VueRouter({
                
//                 注意!!!!
//                 指向單個路由對象使用的是:component,
//                 指向多個路由對象使用的是:components,
//                 注意是否加s
                
                routes:[
                    {
                        path:'/',
                        components:{
                            'default':indextop,
                            'left':indexlelf,
                            'main':indexmain,
                        },
                    },
                ],
            })
            var vm = new Vue({
                el:'#app',
                router:routerobj,
                
            })
        </script>
    </body>
</html>

VUe監控屬性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script src="js/vue-router.js"></script>
        <link href="css/bootstrap.min.css"/>
        
    </head>
    <body>
        <!--     
        wathch、computer 和 methods 之間的對比:
        1.computed 屬性的結果會被緩存,除非依賴的響應屬性變化纔會從新計算,主要當作屬性來使用;
        2.methods 方法表示一個具體的操做,主要書寫業務邏輯
        3.watch 一個對象,鍵是須要觀察的表達式,值是對應回調函數,主要用來監聽某些特定數據的變化,從而進行某些具體的業務邏輯操做;
        能夠看作computed 和 methods 的結合體. watch提供了新舊值的記錄
         -->
        
        
        
        <div id="app">
            <div>
                <p>第一種實現方式:(keyup + methods方式)</p>
                <input type="text" v-model="n1" @keyup='getn3' />
                +
                <input type="text" v-model="n2" @keyup='getn3' />
                =
                <input type="text" v-model="n3" />
            </div>
            
            <div>
                <p>第二種實現方式:(watch方式)</p>
                <input type="text" v-model="nn1" />
                +
                <input type="text" v-model="nn2" />
                =
                <input type="text" v-model="nn3"/>
            </div>
            
            <div>
                <!-- 在computed 中,能夠定一些屬性,這些屬性叫作 計算屬性.
                本質上是一個方法,可是在使用這些計算屬性的時候 是把它的名稱直接當作屬性來使用
                並不會把計算屬性,當作方法去調用 -->
                
                <p>第三種實現方式:(computed方式)</p>
                <p>注意這裏data屬性中沒有定義nnn3屬性,nnn3屬性是computed提供的,computed須要返回值</p>
                <input type="text" v-model="nnn1" />
                +
                <input type="text" v-model="nnn2" />
                =
                <input type="text" v-model="nnn3"/>
            </div>
            
        </div>
        
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    n1:'',
                    n2:'',
                    n3:'',
                    
                    nn1:'',
                    nn2:'',
                    nn3:'',
                    
                    nnn1:'',
                    nnn2:'',
                    
                },
                methods:{
                    getn3(){
                        this.n3 = this.n1 + '-' + this.n2
                    },
                },
                watch:{
                    nn1(){
                        this.nn3 = this.nn1 + '-' + this.nn2
                    },
                    nn2(){
                        this.nn3 = this.nn1 + '-' + this.nn2
                    },
                    // watch提供了新舊值的記錄
                    nn3(newvalue,oldvlue){
                        console.log(newvalue,'----',oldvlue)
                    },
                },
                computed:{
//                     'nnn3':function(){
//                         return this.nnn1 + '-' + this.nnn2
//                     },
                    
                    nnn3(){
                        return this.nnn1 + '-' + this.nnn2
                    },
                },
                
            })
        </script>
    </body>
</html>

VUE render函數模板渲染

<!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="js/vue.js"></script>
</head>
<body>
    <div id="app">

        

    </div>
    <script>
        var login = {
            template:'<h1>登陸組件</h1>'
        };

        var vm = new Vue({
            el:'#app',
            data:{},
            methods: {},
            components:{},
            render(h) {
                return h(login)
            },
        });
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。