vue入門筆記（新手入門必看）

時間 2019-11-07

標籤 vue 入門筆記新手简体版

原文原文鏈接

　　1、什麼是Vue？

　　　　　　1. vue爲咱們提供了構建用戶界面的漸進式框架，讓咱們再也不去操做dom元素，直接對數據進行操做，讓程序員再也不浪費時間和精力在操做dom元素上，解放了雙手，程序員只須要關心業務，提升了開發效率。css

　　　　　　2. 框架和庫的區別html

　　　　　　　　　框架是一整套解決方案，對項目的侵入性較大，項目若是須要更換框架的話，則須要從新架構整個項目vue

　　　　　　　　　庫（至關因而一個插件）提供了某一個功能，對項目入侵性小，若是當前這個庫沒法知足某些功能的話，能夠很容易的切換到其餘庫，完成該需求node

　　　　　　3. vue的基本語句：程序員

　　　　　var vm = new Vue({/* 根實例 */
            el : '#app',
            // 指向的哪一個元素（實例的掛載目標）
            data : {
                msg:"你好"
            },
            // 全部根實例下的數據
            methods : {}    
            // 全部根實例下的方法區別
        });

　　　　　此時咱們若是想要把msg中的數據渲染到頁面上須要用到如下方法：　　數組

　　　　<div id="app">
        　　<div>{{msg}}</div>
        　　<div v-text="msg"></div>
　　　　　　　<div v-html="msg"></div>
    　　</div>

　　　　　　4. {{}} 和 v-text v-html 三者之間的區別：瀏覽器

　　　　　　　　用{{}}取值的話會產生閃爍問題，可是不會覆蓋元素中原來的內容架構

　　　　　　　　用v-text取值的話沒有閃爍問題，可是會覆蓋元素中原來的內容app

　　　　　　　　用v-html取值沒有閃爍問題，與前二者不一樣之處在於v-html能夠將數據裏面的內容按照html的格式去進行解析框架

 　　　　　　　　　　msg:"<h3>你好</h3>"  //這種數據的話就得用v-html進行解析了   其餘二者不會將h3轉換爲標籤

　　　　　　　　頁面最終的輸出結果　　　　　　　

　　　　　　5. 下面來講一說如何解決閃爍問題

　　　　　　　　這裏又用到了一個新的指令：v-cloak

　　　　　　　　<div id="app" v-cloak>  //這個指令通常建議添加到掛載vue元素上  這樣它裏面的元素也不會有閃爍問題了

　　　　　　css代碼：

　　　　　　　　<style>
        　　　　　　[v-cloak]{display: none;}  //在樣式裏面用屬性選擇器選擇咱們的v-cloak指令 而後寫個隱藏樣式
    　　　　　　</style>

　　　　　　下面來講一說v-for的使用：

<!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>
        [v-cloak]{display: none;}
    </style>
</head>
<body>
    <!-- 之前拼字符串innerhtml -->
    <!-- vue提供了一個指令 V-for 解決循環問題  更高效  會複用原有的格式 -->
    <div id="app" v-cloak>
             <!-- 去除閃爍 -->
        <!-- 要循環誰  就在誰的身上增長V-for屬性 -->
        <!-- 默認是value of 數組 （value,index） -->
        <ul>
            <li v-for="(fruit,index) in fruits">
                    {{fruit.name}} {{index+1}}
                <ul>
                    <li v-for="(c,chlidindex) in fruit.color">
                        {{c}}{{index+1}}.{{chlidindex+1}}

                    </li>
                </ul>
            </li>
            
        </ul>
        <div v-for="c in 'aaaa'">{{c}}</div>
        <div v-for="c in 30">{{c}}</div>
        <div v-for="(value,key,index) in obj">{{value}}:{{key}}:{{index}}</div>
        <div @click="show">aaaaa</div>
    </div>
    <script src="../node_modules\vue\dist\vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",

　　　　　　// methods和data中的數據會所有放到vm上，並且名字不能衝突，否則會報錯

            data:{
                obj:{name:'zfpx',age:9,address:"xxx"},
                fruits:[
                    {name:"香蕉",color:['green','yellow']},
                    {name:"蘋果",color:['red','green']},
                    {name:"西瓜",color:['pink']}]
            },
            methods:{
                show:function () {
                    alert("123");
                }
            }
        })
    </script>
</body>
</html>

　　　　　　下面說一說v-model 實現雙向的數據綁定：

<!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>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- v-bind 只能實現數據的單向綁定 從 M 自動綁定到 V中去 沒法實現數據的雙向綁定 -->
        <!-- 使用v-model指令 能夠實現表單元素和model中數據的雙向數據綁定 -->
        <!-- v-model 只能用在表單元素中 -->
        <!-- input text address  -->
        <input type="text" v-model='msg'>
    </div>
    <script src='../node_modules/vue/dist/vue.js'></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:'你好啊'
            },
        })
    </script>
</body>
</html>

　　這個是剛打開瀏覽器時的狀態

而後去控制檯修改數據，就實現了雙向的數據綁定

　　　　　　下面說一說vue中行內樣式的設置

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .red{
            color: red;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 0.5em;
        }
        .then{
            font-weight: 220;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 這是第一種使用方式 直接傳遞一個數組 注意 這裏的class須要使用v-bind作數據綁定 -->
        <!-- <h1 :class="['italic','then']">這是一個很大很大的h1,大到你沒法想象</h1> -->
        
        <!-- 在數組中使用三元表達式 -->
        <!-- <h1 :class="['italic','then',flag? 'active':'']">這是一個很大很大的h1,大到你沒法想象</h1> -->
        
        <!-- 在數組中使用對象來代替三元表達式 提升代碼的可讀性 -->
        <!-- <h1 :class="['italic','then',{'active':flag}]">這是一個很大很大的h1,大到你沒法想象</h1> -->
        
        <!-- 在爲class使用 v-bind綁定對象的時候 對象的屬性是類名 因爲對象的屬性可帶引號可不帶，屬性的值是一個標識符 -->
        <h1 :class="classobj">這是一個很大很大的h1,大到你沒法想象</h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
         var vm = new Vue({
            el : '#app',
            data : {
                flag:true,
                classobj:{red:true,then:true,italic:false,active:false}
            },
            methods : {}    
        });
    </script>
</body>

</html>

　　　　　　　　下面說一說vue中的事件修飾符

<!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>
</head>
<body>
    <div id="app">
        <div @click="one">
            <!-- 使用.stop來進行阻止冒泡 -->
            <button @click.stop="two">第二個按鈕</button>
        </div>
         <!-- 使用.prevent來進行阻止冒泡 -->
        <a href="https://www.baidu.com" @click.prevent='linkc'>我要去百度</a>
        <!-- 使用.capture 實現捕獲觸發事件的機智-->
        <div @click.capture="one">
            <button @click="two">第二個按鈕</button>
        </div>
        <!-- 使用.self 只會阻止本身身上冒泡行爲的觸發 並不會真正阻止別的事件中-->
        <div @click.self="one">
            <button @click="two">第二個按鈕</button>
        </div>
    </div>
    <script src='../node_modules/vue/dist/vue.js'></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{

            },
            methods:{
                one(){
                    alert(1)
                },
                two(){
                    alert(2)
                },
                linkc(){
                    console.log('觸發了連接的事件');
                }
            }
        })
    </script>
</body>
</html>

相關標籤/搜索

每日一句

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