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必须是一个函数,一定要有返回值

VUE的双向绑定及局部组件的使用

组件的组织

猜你喜欢