Vue模板語法（二）

時間  2019-11-26
標籤 vue 模板 語法 简体版
原文   原文鏈接

## demo3.html
1. 樣式綁定
1.1 class綁定
使用方式：v-bind:class="expression"
expression的類型：字符串、數組、對象

1.2 style綁定
v-bind:style="expression"
expression的類型：字符串、數組、對象javascript

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>樣式綁定和事件處理</title>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <style type="text/css">
            .a{
                color:red;
            }
            .b{
                color:blue;
            }
            .c{
                font-size: 60px;
            }
            /*div{
                padding: 50px;
            }*/
        </style>
    </head>
    <body>
        <div id="app">
            <ul>
                <li>
                    <h3>樣式綁定</h3>
                    <span :class="aClz">犯我華夏</span>
                    <span :class="bClz">雖遠必誅</span>
                    <span :class="cClz">犯我華夏  雖遠必誅</span>
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        //做用將Vue實例掛載到具體的邊界，那麼這個邊界就會被Vue這個漸進式的框架所管理
        //注意：邊界不能有兄弟標籤，邊界必定是跟標籤
        new Vue({
            el:'#app',
            data:{
                aClz:'a',
                bClz:'b',
                cClz:['b','c'],
            }
            
        })
        
    </script>
</html>

 


2. 事件處理器
事件監聽可使用v-on 指令css

## 以前已學習
2.1 事件修飾符
Vue經過由點(.)表示的指令後綴來調用修飾符，
.stop
.prevent
.capture
.self
.oncehtml

 


<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素自己（而不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能點擊一次 -->
<a v-on:click.once="doThis"></a>vue


注1：什麼是事件冒泡?
見「事件冒泡模型.png」 java

## demo3.1.html
2.2 按鍵修飾符
Vue容許爲v-on在監聽鍵盤事件時添加按鍵修飾符：node

<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">express

Vue爲最經常使用的按鍵提供了別名
<!-- 同上 -->
<input v-on:keyup.enter="submit">json

所有的按鍵別名：
.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta 數組

-- demo3.2.html
3. vue表單
用v-model指令在表單控件元素上建立雙向數據綁定瀏覽器

3.1 經常使用控件
文本框/密碼框/文本域/隱藏域

單選複選框/多選複選框

單選按鈕

下拉框


3.2 修飾符
.lazy
默認狀況下， v-model在input事件中同步輸入框的值與數據，但你能夠添加一個修飾符lazy，從而轉變爲在change事件中同步

.number
將用戶的輸入值轉爲 Number 類型

.trim
自動過濾用戶輸入的首尾空格


注1：H5提供的新方法
JSON.parse():只能解析json形式的字符串變成json，安全性高一些
JSON.stringify():json轉換爲字符串，解析的時候會自動加上引號

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>樣式綁定和事件處理</title>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <style type="text/css">
            .a{
                color:red;
            }
            .b{
                color:blue;
            }
            .c{
                font-size: 60px;
            }
            /*div{
                padding: 50px;
            }*/
        </style>
    </head>
    <body>
        <div id="app">
            <ul>
                <li>
                    <h3>樣式綁定</h3>
                    <span :class="aClz">犯我華夏</span>
                    <span :class="bClz">雖遠必誅</span>
                    <span :class="cClz">犯我華夏  雖遠必誅</span>
                </li>
                <li>
                    <h3>事件處理-阻止冒泡</h3>
                    <div style="background-color: #FF0000;width: 200px;height: 200px;" @click="a">
                        <div style="background-color: blue;width: 150px;height: 150px;" @click="b">
                            <div style="background-color: pink;width: 100px;height: 100px;" @click="c">
                                <div style="background-color: greenyellow;width: 60px;height: 60px;" @click="d">
                                
                                </div>
                            </div>
                        </div>
                    </div>
                    <li>
                        <h3>事件處理-按鈕只能點擊一次</h3>
                        {{info}}<input type="text" v-model="msg" />
                        <button @click="e">無限次點擊</button>
                        <button @click.once="e">發送一次</button>
                    </li>
                    <li>
                        <h3>按鍵修飾符</h3>
                        {{info}}<input type="text" v-model="msg" v-on:keyup.enter="e" />
                        <button @click="e">無限次點擊</button>
                        <button @click.once="e">發送一次</button>
                    </li>
                    <li>
                        <h3>select標籤</h3>
                        <select name="hobby" v-model="selectedIds">
                            <option v-for="d in datas" :value="d.id">{{d.name}}</option>
                        </select>
                        選中的值:{{selectedIds}}
                    </li> 
                    <li>
                        <h3>複選框標籤</h3>
                        <div v-for="d in datas">
                            <input type="checkbox" :value="d.id" name="likes" v-model="selectedIdArr" />{{d.name}}
                        </div>
                        選中的值:{{selectedIdArr}}
                        
                    </li>
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        //做用將Vue實例掛載到具體的邊界，那麼這個邊界就會被Vue這個漸進式的框架所管理
        //注意：邊界不能有兄弟標籤，邊界必定是跟標籤
        new Vue({
            el:'#app',
            data:{
                aClz:'a',
                bClz:'b',
                cClz:['b','c'],
                msg:'',
                info:'',
                datas:[{
                    id:1,
                    name:'象棋'
                },{
                    id:2,
                    name:'象棋2'
                },{
                    id:3,
                    name:'象棋3'
                }],
                selectedIds:'',
                selectedIdArr:[]
            },
            methods:{
                a(){
                    alert('a事件觸發');
                },
                b(){
                    alert('b事件觸發');
                },
                c(){
                    alert('c事件觸發');
                },
                d(){
                    alert('d事件觸發');
                },    
                 e(){
                    this.info=this.msg;
                    this.msg="";
                }    
            }
            
        })
        
    </script>
</html>

 


-- demo3.3.html
4. 自定義指令
除了Vue自帶的指令(v-on|v-model)等, Vue也容許註冊自定義指令，根據做用範圍又分爲：全局指令/局部指令

Vue.directive("focus",{});//全局指令

new Vue({
el:"#d1",
directives:{//局部指令
focus:{}
}
});

## 下面的內容直接百度或查API便可
指令定義函數提供了幾個鉤子函數用來幫助實現功能(可選)
bind: 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個在綁定時執行一次的初始化動做
inserted: 被綁定元素插入父節點時調用（父節點存在便可調用，沒必要存在於 document 中）。
update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新（詳細的鉤子函數參數見下）。
componentUpdated: 被綁定元素所在模板完成一次更新週期時調用。
unbind: 只調用一次， 指令與元素解綁時調用。

鉤子函數的參數有
el: 指令所綁定的元素，能夠用來直接操做 DOM 。
binding: 一個對象，包含如下屬性：
name: 指令名，不包括 v- 前綴。
value: 指令的綁定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。
expression: 綁定值的表達式或變量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 傳給指令的參數。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 編譯生成的虛擬節點。
oldVnode: 上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。


-- demo3.4.html
5. vue組件
5.1 組件簡介
組件(Component)是Vue最強大的功能之一
組件能夠擴展HTML元素，封裝可重用的代碼
組件系統讓咱們能夠用獨立可複用的小組件來構建大型應用，幾乎任意類型的應用的界面均可以抽象爲一個組件樹

5.2 全局和局部組件
全局組件：Vue.component(tagName, options)，tagName爲組件名，options爲配置選項。
局部組件: new Vue({el:'#d1',components:{...}})

<html>
    <head>
        <meta charset="UTF-8">
        <title>組件</title>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <ul>
                <li>
                    <h3>局部組件的註冊</h3>
                    <!--侵入性-->
                    <my-button></my-button>
                    <!--<button @click="doSubmit">被點擊了n次</button>-->
                </li>
                <li>
                    <h3>全局組件的註冊</h3>
                    <my-button2></my-button2>
                </li>
　　　　　　</ul>

　　</div>
    </body>
    <script type="text/javascript">
        Vue.component('my-button2',{
            template:'<button @click="doSubmit">被點擊了{{n}}次</button>',
            data(){
                return{
                    n:0
                }
            },
            methods:{ 
                doSubmit(){
                    this.n+=1;
                }
            }
        })

 


註冊後，咱們可使用如下方式來調用組件：
<tagName></tagName>

5.3 props
props是父組件用來傳遞數據的一個自定義屬性。
父組件的數據須要經過props把數據傳給子組件，子組件須要顯式地用props選項聲明 "prop"


注1：由於組件是可複用的 Vue 實例，因此它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods
以及生命週期鉤子等。僅有的例外是像el這樣根實例特有的選項。

注2：當咱們定義這個 <button-counter> 組件時，你可能會發現它的data並非像這樣直接提供一個對象
data: {
count: 0
}

取而代之的是，一個組件的data選項必須是一個函數，所以每一個實例能夠維護一份被返回對象的獨立的拷貝：
data: function () {
return {
count: 0
}
}


注3：定義組件名的方式有兩種
短橫線分隔命名(建議使用)
Vue.component('my-component-name', { /* ... */ })，引用方式：<my-component-name>

首字母大寫命名
Vue.component('MyComponentName', { /* ... */ })，引用方式： <my-component-name>和<MyComponentName>都是可接受的

注4：HTML 中的特性名是大小寫不敏感的，因此瀏覽器會把全部大寫字符解釋爲小寫字符。這意味着當你使用 DOM 中的模板時，
camelCase (駝峯命名法) 的 prop 名須要使用其等價的 kebab-case (短橫線分隔命名) 命名：
props: ['postTitle'],<my-tag post-title="hello!"></my-tag>

注5：props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

但願每一個 prop 都有指定的值類型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}


-- demo3.5.html
6. 自定義事件
監聽事件：$on(eventName)
觸發事件：$emit(eventName)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>組件</title>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <ul>
                <li>
                    <h3>局部組件的註冊</h3>
                    <!--侵入性-->
                    <my-button></my-button>
                    <!--<button @click="doSubmit">被點擊了n次</button>-->
                </li>
                <li>
                    <h3>全局組件的註冊</h3>
                    <my-button2></my-button2>
                </li>
                <li>
                    <h3>組件的通訊（父傳子）</h3>
                    <my-button m='zs'></my-button>
                </li>
                <li>
                    <h3>組件的通訊（子傳父）</h3>
                    <my-button  m='zs' @three-click='xxx' ></my-button>
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        Vue.component('my-button2',{
            template:'<button @click="doSubmit">被點擊了{{n}}次</button>',
            data(){
                return{
                    n:0
                }
            },
            methods:{ 
                doSubmit(){
                    this.n+=1;
                }
            }
        })
        new Vue({
            el:'#app',
            data(){
                return{
                }
            },
            components:{
                'my-button':{
                    props:['m'],
                    template:'<button v-on:click="doSubmit">被{{m}}點擊了{{n}}次</button>',
                    data(){
                        return{
                            n:0,
                            zedie:'摺疊效果'
                        }
                    },
                    methods:{ 
                        doSubmit(){
                            this.n+=1;
//                            註冊一個事件,讓外部調用,而後順便接受內部的值
                            if(this.n % 3==0){
                                this.$emit('three-click',this.zedie);
                            }
                        }
                    }
                }
            },
            methods:{
                xxx(v){
                        alert(v);
                }
            }
        })
    </script>
</html>

 

 

注1：Vue自定義事件是爲組件間通訊設計
vue中父組件經過prop傳遞數據給子組件，而想要將子組件的數據傳遞給父組件，則能夠經過自定義事件的綁定

父Vue實例->Vue實例，經過prop傳遞數據
子Vue實例->父Vue實例，經過事件傳遞數據

注2：事件名
不一樣於組件和prop，事件名不存在任何自動化的大小寫轉換。而是觸發的事件名須要徹底匹配監聽這個事件所用的名稱
建議使用「短橫線分隔命名」，例如：three-click

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程