前端框架開始學習Vue(一)

時間 2020-08-04

標籤前端框架開始學習 vue 简体版

原文原文鏈接

MVVM開發思想圖(圖片可能會被縮小，請右鍵另存查看，圖片來源於網絡)

定義基本Vue代碼結構

1 v-text,v-cloak,v-html命令

默認 v-text沒有閃爍問題，可是會覆蓋元素中本來的內容，插值表達式只會替換本身的佔位符,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="vue.js">
    </script>
    <style type="text/css"> [v-cloak]{ display: none;
        }
    </style>
    <body>
        <div id="app">
            <p v-cloak="">{{msg}}</p>
        </div>
        <script type="text/javascript">
            var vm = new Vue({ el:'#app', data:{ msg:"123" } }) </script>
    </body>
</html>

View Code--使用v-cloak解決插值表達式閃爍的問題

以上兩種方法會默認轉義成文本輸出javascript

若是須要輸出成網頁元素就須要 v-htmlcss

<div v-html="msg2"></div>

2 v-bind 使用【Vue中提供了 v-on:事件綁定機制】縮寫是【:】html

v-bind ： 是vue中，提供的用於綁定屬性的指令
<input type="button" name="" id="" value="按鈕" v-bind:title="msg3" />
<input type="button" name="" id="" value="按鈕" v-bind:title="msg3+'123'" />\
注意： 
　　v-bind:指令能夠被簡寫爲 : 要綁定的屬性
　　v-bind中，能夠寫合法的js表達式

<input type="button" name="" id="" value="按鈕" :title="msg3" /> #這樣也是能夠的

3 v-on指令【Vue中提供了 v-on:事件綁定機制】縮寫是【@】vue

<body>
        <div id="app">
            <input type="button" value="按鈕2" v-on:click="show" />
            <input type="button" value="按鈕2" v-on:mouseover="show" />            
        </div>
        <script type="text/javascript">
            var vm = new Vue({ el:'#app', data:{ msg3:'你們都是好學生' }, methods:{ //這個methods屬性中定義了當前Vue實例全部可用的方法
 show:function(){alert('hello')} } }) </script>
    </body>

View Code--使用v-on:綁定事件，此綁定了點擊事件和鼠標覆蓋事件

事件修飾符：java

　　.stop 阻止冒泡網絡

<body>
        <div id="app">
            <div class="inner" @click="div1Handler">
                <input type="button" value="唯他" @click.stop="btnHandler"/>
            </div>
        </div>
        <script type="text/javascript">
            var vm = new Vue({ el:'#app', data:{ }, methods:{ div1Handler(){ console.log('inner div 事件') }, btnHandler(){ console.log('按鈕事件') } } }) </script>
    </body>

View Code--阻止冒泡

　　.prevent 阻止默認事件app

<body>
        <div id="app">
            <a href="http://www.baidu.com" @click.prevent="linkClick">有問題，去百度</a>
        </div>
        <script type="text/javascript">
            var vm = new Vue({ el:'#app', data:{ }, methods:{ linkClick(){ console.log('觸發鏈接點擊事件') } } }) </script>
    </body>

View Code--阻止事件

　　.capture 添加事件偵聽器時使用事件捕獲模式 ide

<body>
        <div id="app">
            <div class="inner" @click.capture="divHandler">
                <input type="button" name="" id="" value="按鈕" @click="btnHandler" />
                
            </div>
        </div>
        <script type="text/javascript">
            var vm = new Vue({ el:'#app', data:{ }, methods:{ divHandler(){ console.log('class觸發') }, btnHandler(){ console.log('按鈕觸發') } } }) </script>
    </body>

View Code--從外到裏，進行捕獲事件

　　.self 只當事件在該元素自己（好比不是子元素）觸發時觸發回調函數

<body>
        <div id="app">
            <div class="inner" @click.self="divHandler">
                <input type="button" name="" id="" value="按鈕" @click="btnHandler" />
                
            </div>
        </div>
        <script type="text/javascript">
            var vm = new Vue({ el:'#app', data:{ }, methods:{ divHandler(){ console.log('class觸發') }, btnHandler(){ console.log('按鈕觸發') } } }) </script>
    </body>

View Code--實現只有點擊當前元素時候纔會觸發事件處理函數

　　.once 事件只觸發一次this

<body>
        <div id="app">
            <div class="inner" @click.self.once="divHandler">
                <input type="button" name="" id="" value="按鈕" @click.once="btnHandler" />
                
            </div>
        </div>
        <script type="text/javascript">
            var vm = new Vue({ el:'#app', data:{ }, methods:{ divHandler(){ console.log('class觸發') }, btnHandler(){ console.log('按鈕觸發') } } }) </script>
    </body>

View Code-- .once只觸發一次事件處理函數

.self 只會阻止本身身上冒泡行爲的觸發，並不會真正阻止冒泡的行爲

4 使用Vue完成一個跑馬燈效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="vue.js">
    </script>
    <body>
        <div id="app">
            <input type="button" name="" id="" value="浪起來" v-on:click="lang"/>
            <input type="button" name="" id="" value="低調" @click="stop"/>
            <h4>{{msg}}</h4>
        </div>
        <script type="text/javascript">
            // 注意：在vm 實例中，若是想要獲取data上的數據 或者想要調用
            // methods中的方法 ，必須經過this.數據屬性名 或this.方法名 來進行訪問
            // 這裏的this表示 咱們new 出來 的 vm 實例對象
                
            var vm = new Vue({ el:'#app', data:{ msg:'猥瑣發育，別浪~~!', intervalId:null }, methods:{ lang(){ if (this.intervalId!=null)return; // 箭頭函數是解決this指向的問題
                        this.intervalId=setInterval(()=>{ //console.log(_this.msg)
                        // 獲取到頭的第一個字符
                        var start = this.msg.substring(0,1) // 獲取到後面的全部字符
                        var end = this.msg.substring(1) // 從新拼接獲得新的字符串，並賦值給this.msg
                        this.msg=end +start },400) }, stop(){ //中止定時器
 clearInterval(this.intervalId) this.intervalId=null; } } }) // 分析:
            // 1 給浪起來按鈕綁定點擊事件 用 v-on 
            // 2 在按鈕事件處理函數中，寫相關的業務邏輯代碼:拿到
            // msg 而後調用字符串的 substring來進行字符串截取操做
            // 3 爲了實現點擊下按鈕，自動截取的功能，須要實現定時功能
        </script>
    </body>
</html>

View Code

5 v-model雙向綁定

v-bind 只能實現數據的單向綁定,從M 自動綁定到 V,沒法實現雙向綁定
<input type="text" name="" id="" v-bind:value="msg3" />

使用 v-model指令，能夠實現表單元素和Model中數據雙向數據綁定
注意：v-model 只能運用在表單元素中
input(radio,text,address,email...) select checkbox
<input type="text" name="" id="" v-model="msg3" />

<body>
        <div id="app">
            <input type="text" v-model="n1" />
            
            <select name="" id="" v-model="opt">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>                
                <option value="/">/</option>                
            </select>
            <input type="text" v-model="n2" />
            <input type="button" value="=" @click="calc"/>
            <input type="text" name="" id="" v-model="result" />
        </div>
        <script type="text/javascript">
            var vm = new Vue({ el:'#app', data:{ n1:0, n2:0, result:0, opt:'+' }, methods:{ calc(){ //計算器算數方法 // switch(this.opt){ // case "+": // this.result = parseInt(this.n1)+parseInt(this.n2) // break; // case "-": // this.result = parseInt(this.n1)-parseInt(this.n2) // break; // case "*": // this.result = parseInt(this.n1)*parseInt(this.n2) // break; // case "/": // this.result = parseInt(this.n1)+parseInt(this.n2) // break; // }
                        // 投機取巧法，正式開發中，儘可能少用
                        var codeStr = 'parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
                        this.result=eval(codeStr) }, } }) </script>
    </body>