vue 前端框架

時間 2019-12-04

標籤 vue 前端框架简体版

原文原文鏈接

什麼是vue.jshtml

　　1.vue是目前最火的一個前端框架,react 是最流行的前端框架(react除了開發網站,還能夠開發手機APP,vue語法也是能夠進行手機app開發的,須要藉助於weex)前端

　　2.vue.js 是前端的主流框架之一,和angular.js react.js 一塊兒併成爲前端三大主流框架vue

　　3.vue.js是一套構建用戶界面的框架,值關注視圖層,不只易於上手,還可便於第三方庫或既有項目整合.(vue有配套的第三方庫,能夠整合起來作帶向項目的開發)node

　　4.前端的主要工做?主要負責MVC 的v這一層主要工做就是和界面交道react

爲何要學習流行框架jquery

　　企業爲了提升開發效率,在企業中,事件就是效率,效率就是金錢程序員

　　提升開發的發展歷程,原生js -> jquery類的類庫 -> 前端模板引擎 -> angular/vue/express

　　在vue中,一個核心的概念,就是讓用戶不在操做DOM操做元素,解放了用戶的雙手,讓程序員能夠更多的時間去關注業務邏輯後端

　　加強本身就業時候的競爭力前端框架

框架和庫的卻別:

　　框架:是一臺完整的解決方案,對項目的侵入性較大,項目若是須要更換框架,則須要從新架構整個項目

　　node 中的 express

　　庫(插件):提供某一個小功能,對項目的侵入性小,若是某個庫完成某些需求,能夠很容易切換到其餘庫的實現要求.

node(後端) 中的MVC 與前端 MVVM 之間的區別:

　　MVC (後端概念)

　　MVVM 前端概念:

　小結:

vue 第一話: 實例化 vue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue firstone</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{{ msg }}</p>
        </div>
        
        
        <script>
            var vm = new Vue({
                el:    '#app',
                data:{
                    msg:'hello world!',
                },
            })
        </script>
    </body>
</html>

須要引入vue.js

vue第二話:　　v-cloak v-text v-html v-on v-bind

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 文件顯示以及解決閃爍問題 cloak/text/html的應用方式 -->
            <p v-cloak>00000{{ msg }}0000</p>
            <h3 v-text="msg">00000000</h3>
            <p v-text="msg"></p>
            <p v-html="msg"></p>
            <!-- -------------------------------- -->
            <!-- 事件綁定 v-bind 綁定js表達式-->
            <p>
                <input type="button" value="按鈕" v-bind:title="msg2" />
                <input type="button" value="按鈕" v-bind:title="msg2 + '添加字符'" />
                <input type="button" value="按鈕" :title="msg2 + '簡寫方式!'" />
            </p>
            <!-- 事件綁定v-on 綁定methods 事件-->
            <p>
                <input type="button" value="v-on綁定methods" v-on:click="show" />
                <input type="button" value="v-on綁定methods 簡寫方式" @click="show" />
                <input type="button" value="v-on綁定methods 其餘事件" v-on:mouseover="show" />
            </p>
        </div>
        
        
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'<h1>hello</h1>',
                    msg2:'(v-bind屬性!)this button!'
                },
                methods:{
                    show:function(){
                        alert("OK")
                    }, 
                }
            })
        </script>
    </body>
</html>

vue第三話: 跑馬燈練習

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="啓動" @click="start" />
            <input type="button"  value="中止"@click="stop" />
            <input type="text" :value="info" />
            
            <h1>{{ info }}</h1>
        </div>
        
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    info:'hello world !',
                    Intervalid:null,
                    
                },
                methods:{
                    start(){
//                         var _this = this
//                         setInterval(function(){
//                             // console.log(this.info)
//                             var start0 = _this.info.substring(0,1)
//                             var end0 = _this.info.substring(1)
//                             _this.info = end0 + start0
//                         },400)

                        // => 說明函數體外部的this 參數 傳遞至函數體內部!
                        if(this.Intervalid != null) return;
                        this.Intervalid = setInterval( () => {
                            // console.log(this.info)
                            var start0 = this.info.substring(0,1)
                            var end0 = this.info.substring(1)
                            this.info = end0 + start0
                        },400)

                    },
                    stop(){
                        clearInterval(this.Intervalid);
                        this.Intervalid = null;
                    },
                }
            })
            
        </script>
    </body>
</html>

vue第四話 v-on 事件修飾符

.stop 阻止冒泡

.prevent 阻止默認時間

.capture 添加時間偵聽器使用事件模式

.self 只當前事件在該元素自己(好比不是子元素)觸發時觸發回調

.once 事件只觸發一次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script></script>
        <script src="vue.js"></script>
        <style>
            .inner{
                height: 200px;
                width: 200px;
                background-color: aqua;
            }
            .inner2{
                height: 200px;
                width: 200px;
                background-color: firebrick;
            }
            .inner3{
                height: 200px;
                width: 200px;
                background-color:greenyellow;
            }
            .inner4{
                height: 200px;
                width: 200px;
                background-color:gray;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 此時點擊按鈕,同時也會觸發div的點擊事件. -->
            <div class="inner" @click="div0">
                <input type="button" value="點擊" @click="inp0"/>
                <!-- .stop -->
                <input type="button" value="點擊(.stop)" @click.stop="inp0"/>
                <!-- .prevent 阻止默認行爲 -->
                <p><a href="http://www.baidu.com" @click.prevent="bdclick">百度連接</a></p>
            </div>
            
            <!-- .capture 捕獲機制-->
            <div class="inner2" @click.capture="div0">
                <input type="button" value="點擊" @click="inp0"/>
            </div>
            <!-- .self 點擊當前元素時觸發-->
            <div class="inner3" @click.self="div0">
                <input type="button" value="點擊" @click.self="inp0"/>
            </div>
            <!-- .once只觸發一次 -->
            <div class="inner4" @click.once="div0">
                <input type="button" value="點擊" @click.once="inp0"/>
            </div>
        
        <!-- 方法之間能夠相互疊加調用! -->
        <!-- 
        .self .stop 區別:
        .self只阻止 本身元素上的冒泡,並不阻止本身外層的元素冒泡
        .stop阻止除自已之外的其餘元素冒泡 
        -->
        </div>
        
        <script>
            var ve = new Vue({
                el:'#app',
                data:{ 
                },
                methods:{
                    div0(){
                        console.log('this div0!')
                    },
                    inp0(){
                        console.log("this inp0!")
                    },
                    bdclick(){
                        console.log('baidu 連接事件!')
                    }
                },
            })
        </script>
        
    </body>
</html>

vue 第五話雙向數據綁定 v-model

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script></script>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 
            使用v-model 能夠是先,表單元素和model中數據的雙向書綁定
            可是注意!
            v-model 只能運用在 表單元素中 
            -->
            <input type="text" v-model="msg" />
            <h3>{{ msg }}</h3>
        </div>
        
        <script>
            var ve = new Vue({
                el:'#app',
                data:{
                    msg:'hello world ! '
                },
                methods:{
                    
                },
            })
            
        </script>
        
    </body>
</html>

vue第6話簡易計算器練習

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script></script>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text"  v-model="num1" />
            <select v-model="opt">
                <option value ="+">+</option>
                <option value ="-">-</option>
                <option value ="*">*</option>
                <option value ="/">/</option>
            </select>
            <input type="text"  v-model="num2" />
            <input type="button" value="=" @click='jisuan' />
            <input type="text"  v-model="result" />
        </div>
        
        <script>
            var ve = new Vue({
                el:'#app',
                data:{
                    num1:0,
                    opt:'+',
                    num2:0,
                    result:0,
                },
                methods:{
                    jisuan(){
//                         switch(this.opt){
//                             case '+':
//                                 this.result = parseInt(this.num1) + parseInt(this.num2)
//                             break;
//                             case '-':
//                                 this.result = parseInt(this.num1) - parseInt(this.num2)
//                             break;
//                             case '*':
//                                 this.result = parseInt(this.num1) * parseInt(this.num2)
//                             break;
//                             case '/':
//                                 this.result = parseInt(this.num1) / parseInt(this.num2)
//                             break;
//                         }
                        
                        this.result = eval(this.num1 + this.opt + this.num2)
                        
                        
                    },
                },
            })
            
        </script>
        
    </body>
</html>

vue 第七話樣式選擇

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
        <style>
            .st1{
                    width: 200px;
                    height: 200px;
            }
            .st2{
                background-color: #ADFF2F;
            }
            .active{
                display: none;
            }
            
        </style>
        
    </head>
    <body>
        <div id="app">
            <input type="button" value="顯示" @click='a'/>
            <input type="button" value="隱藏" @click='b' />
            
            <p><h1 :class="['st1','st2']">aaaaaaaaaaaa !!!</h1></p>
            
            <p><h1 :class="['st1','st2',dis?'active':'']">bbbbbbbbbbbb !!!</h1></p>
        
            <p><h1 :class="['st1','st2',{'active':dis}]">cccccccccccc !!!</h1></p>

            <p><h1 :class="{st1:true,st2:true,active:dis}">dddddddddd !!!</h1></p>

            <p><h1 :class="sobj">EEEEEEEEEEEEE !!!</h1></p>

        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    dis:false,
                    sobj:{st1:true,st2:true,active:false},
                },
                methods: {
                    a(){
                        this.dis = false
                    },
                    b(){
                        this.dis = true
                    },
                }
            })
        </script>
    </body>
</html>

vue 第八話內聯樣式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
        
    </head>
    <body>
        <div id="app">
            <h1 :style="{color:'red','font-weight':200}">asdadsada</h1>
            <h1 :style="sty1">asdadsada</h1>        
            <h1 :style="[sty1 , sty2]">asdadsada</h1>        
            
        
        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    sty1:{color:'green','font-weight':100},
                    sty2:{'font-style':'italic'},
                },
                methods: {
                }
            })
        </script>
    </body>
</html>

vue 第九話 v-for循環

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
        
    </head>
    <body>
        <div id="app">
            <p>{{ list[0] }}</p>
            <p>{{ list[1] }}</p>
            <p>{{ list }}</p>
            
            <!-- 循環列表 -->
            <p v-for='i in list'>{{ i }}</p>
            
            <!-- 循環列表,以及列表索引 -->
            <p v-for='i,index in list'>{{ i }} - {{ index }}</p>
            
            <!-- 循環列表對象 -->
            <p v-for='i,j in list2'>{{ i.id }} - {{ i.name }} - {{ j }}</p>

            <!-- 循環對象 -->
            <p v-for='i,j,l in user'>{{ i }}- {{ j }} - {{ l }}</p>
            
            <!-- 循環數據 -->
            <p v-for='count in 15'>{{ count }}</p>

        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    list:[1,2,3,4,5,6,7,8,9],
                    list2:[
                        {id:1,name:'a1'},
                        {id:2,name:'a2'},
                        {id:3,name:'a3'},
                        {id:4,name:'a4'},
                        {id:5,name:'a5'},
                        {id:6,name:'a6'},
                    ],
                    user:{
                        id:1,
                        name:'alex',
                        gender:'男',
                    },
                },
                methods: {
                }
            })
        </script>
    </body>
</html>

vue 第十話 v-for key 值數據綁定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
        
    </head>
    <body>
        <div id="app">
            <p>
                <label>id </label><input type="text" v-model="id"/>
                <label>name</label> <input type="text" v-model="name"/>
                <input type="button" value="add" @click="add" />
            </p>
            
            <label>序號</label>    -    <label>姓名</label>
            <p v-for='i in info' :key='i.id'><input type="checkbox" />{{ i.id }} ------- {{ i.name }}</p>
            
            <!--             
            注意:!!!
            v-for 循環的時候 key屬性只能使用num 或 str 數據類型綁定
            key在使用的時候,必需要使用v-bind屬性綁定的形式,指定key的值
            在組件中 使用v-for 循環的時候 或者在一些特殊的狀況中 
            若是v-for有問題 必須在使用v-for的是同時指定惟一的字符串/數字 類型:key值 
            -->
        
        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    id:'',
                    name:'',
                    info:[
                        {id:1,name:'a1'},
                        {id:2,name:'a2'},
                        {id:3,name:'a3'},
                        {id:4,name:'a4'},
                        {id:5,name:'a5'},
                        {id:6,name:'a6'},
                    ],
                },
                methods: {
                    add(){
                        // this.info.push({id:this.id,name:this.name})
                        this.info.unshift({id:this.id,name:this.name})
                    },
                }
            })
        </script>
    </body>
</html>

vue第十一話 v-if 以及 v-show

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"></script>
        
    </head>
    <body>
        <div id="app">
            <input type="button" value="切換" @click="qiehuan"/>
            <h3 v-if="flag">v-if 語句</h3>
            <h3 v-show="flag">v-show 語句</h3>
        </div>

        <!-- 
        v-if 特色:每次都會從新刪除或建立元素
        有較高的切換性能消耗
        若是元素設計到頻繁的切換,最好不要使用v-if而推薦使用v-show
    
        v-show 特色:只是切換了元素的display:none的樣式
        有較高的初始渲染消耗
        若是元素可能永遠也不會被顯示出來被用戶看到,則推薦使用
        v-if -->

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    flag:true,
                },
                methods: {
                    qiehuan(){
                        this.flag = !this.flag
                    }
                }
            })
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

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