VUE的雙向繫結及區域性元件的使用

Bound_w發表於2018-11-28
Vue元件

vue的雙向繫結,使用v-model,v-model只能使用在input  textare    select中

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <label for="username">使用者名稱：</label>
    <input type="text" v-model="msg" id="username">
    <p>{{ msg }}</p>
    <textarea placeholder="add multiple lines" v-model='msg'></textarea>

    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    <br>
    <!--多個核取方塊 使用列表儲存-->
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
    <br>
    <select v-model="selected">
        <option disabled value="">請選擇</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
    <!--懶監聽-->
    <input v-model.lazy="msg" >
    <!--數字顯示-->
    <input v-model.number="age" type="number">
    <!--清除前後空格-->
    <input v-model.trim="msg">

</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                msg: 'alex',
                checked: false,
                checkedNames: [],
                selected:'',
                age:0
            }

        }
    })

</script>
</body>
</html>
v-model的用法

區域性元件是使用:元件是可複用的 Vue 例項，且帶有一個名字

元件的組織

通常一個應用會以一棵巢狀的元件樹的形式來組織：

Component Tree

例如，你可能會有頁頭、側邊欄、內容區等元件，每個元件又包含了其它的像導航連結、博文之類的元件。

為了能在模板中使用，這些元件必須先註冊以便 Vue 能夠識別。這裡有兩種元件的註冊型別：全域性註冊和區域性註冊。至此，我們的元件都只是通過 Vue.component 全域性註冊的：Vue.component('my-component-name', {

  // ... options ...
})
全域性註冊的元件可以用在其被註冊之後的任何 (通過 new Vue) 新建立的 Vue 根例項，也包括其元件樹中的所有子元件的模板中。

 

如果是例項化的vue物件,既有el,又有template,如果template中定義了模板內容,那麼template的優先順序大於el

三步走:聲子,掛子,用子

　　聲子:Vue中元件的名字,首字母要大寫,要和標籤區分,元件中的data必須是一個函式,一定要有返回值

　　

相關文章