Vue學習筆記（一）

1 Vue目錄結構

• build：項目構建webpack的相關代碼
• config：配置目錄，包括端口號等
• node_modules：npm加載的項目依賴模塊
• src：開發的目錄模塊，包含assets（資源文件），components（組件文件），App.vue項目入口文件，main.js項目核心文件
• static：靜態資源文件，如圖片，字體等
• test：初始測試目錄
• .xxx：配置文件，好比語法配置，git配置等等
• index.html：首頁入口文件
• package.json：項目配置文件
• README.md：項目說明文件

2 Vue對象

Vue對象的基本參數有：

• el：DOM元素的id
• data：用於定義屬性
• methods：用於定義函數
• {{}}輸出對象屬性和函數返回值

一個Vue實例被建立時，會向Vue的響應式系統加入了data中能找到的全部屬性，當這些屬性的值改變時HTML視圖也會發生相應變化。

3 Vue模板語法

Vue.js使用了基於HTML的模板語法，容許開發者聲明式地將DOM綁定至底層Vue實例數據。
Vue.js的核心是一個容許你採用簡潔的模板語法來聲明式的將數據渲染進DOM的系統，結合響應系統，在應用狀態改變時，Vue可以智能地計算出從新渲染組建的最小代價並應用到DOM操做上。

3.1 插值

插值分爲兩種方式：

• 純文本
• HTML

純文本能夠使用{{}}插值，好比：

<div id="app">{{message}}</div>

<script>
new Vue({
    el:'#app',
    data:{
        message:'text'
    }
})
</script>

HTML使用v-html指令：

<div id="app" v-html="message"></div>

<script>
new Vue({
    el:'#app',
    data:{
        message:'<h1>h1標題</h1>'
    }
})
</script>

3.2 屬性

屬性綁定使用v-bind指令，好比：

<div v-bind:class="{'class1':use}"></div>

<script>
new Vue({
    el:'#app',
    data:{
        use:false
    }
})
</script>

3.3 表達式

能夠在{{}}直接嵌入JS表達式，包括計算以及函數調用等等，好比：

<div id="app">
    {{5.222-1.2345}}
    <br>
    {{ok ? 'YES' : 'NO'}}
    <br>
    {{message.reverse()}}
</div>

<script>    
new Vue({
    el:'#app',
    data:{
        ok:true,
        message:'Reverse',
    }
})
</scirpt>

3.4 指令

指令是帶有v-前綴的特殊屬性，指令用於在表達式的值改變時，將某些行爲應用到DOM上，好比：

<div id="app">
    <p v-if="seen">看到了</p>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        seen:true
    }
})
</script>

3.5 參數

參數在指令後面以冒號代表，好比v-bind指令用於響應地更新HTML：

<div id="app">
    <a v-bind:href="url">某個網站</a>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        url:'https://www.xxx.com'
    }
})
</script>

href是參數，告知v-bind指令將該元素的href屬性與表達式url的值綁定。

3.6 修飾符

修飾符是以.指明的特殊後綴，用於指出一個指令應該以特殊的方式綁定，例如.prevent修飾符告知v-on指令對於出發事件調用event.preventDefault()：

<form v-on:sbumit.prevent="onSubmit"></form>

3.7 v-model

v-model用來在input，select，textarea，chekcbox，radio等表單控件元素上建立雙向的數據綁定，根據表單上的值更新綁定元素的值。好比：

<div id="app">
    <p>{{message}}</p>
    <input v-model="message">
</div>

<script>
new Vue({
    el:'#app',
    data:{
        message:'text'
    }
})
</script>

3.8 按鈕事件

能夠使用v-on:click監聽按鈕事件，好比：

<div id="app">
    <p>{{message}}</p>
    <button v-on:click="reverse">反轉字符串</button>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        message:'reverseeeeee'
    },
    methods:{
        reverse:function(){
            this.message=this.messaage.split('').reverse().join('')
        }
    }
})
</script>

3.9 過濾器

容許定義過濾器用做一些常見文本的格式化，好比：

<div id="app">{{message | f}}</div>

<script>
new Vue({
    el:'#app',
    data:{
        message:'text'
    },
    filters:{
        f:function(value){
            if(!value) return ''
            value = value.toString
            return value.charAt(0).toUpperCase()+value.slice(1)
        }
    }
})
</script>

另外，過濾器能夠串聯以及接受參數：

{{message | filterA | filterB}}
{{message | filterA('arg1','arg2')}} // message做爲filterA的第一個參數，'arg1','arg2'分別爲第二個，第三個參數

將上面的過濾器改動一下：

<div id="app">{{message | f(10)}}</di>

<script>
new Vue({
    el:'#app',
    data:{
    },
    filter:{
        f:function(value,times){
            if(!value) return ''
            value = value.toString()
            value = value.charAt(0).toUpperCase()+value.slice(1)
            return value.repeat(times)
        }
    }
})
</script>

3.10 縮寫

• v-bind:href能夠縮寫爲:href
• v-on:click能夠縮寫爲@click