VUE的双向绑定及局部组件的使用
Posted wqzn
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
局部组件是使用:组件是可复用的 Vue 实例，且带有一个名字
组件的组织
通常一个应用会以一棵嵌套的组件树的形式来组织：
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：Vue.component(‘my-component-name‘, {
// ... options ...
})
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
如果是实例化的vue对象,既有el,又有template,如果template中定义了模板内容,那么template的优先级大于el
三步走:声子,挂子,用子
声子:Vue中组件的名字,首字母要大写,要和标签区分,组件中的data必须是一个函数,一定要有返回值
以上是关于VUE的双向绑定及局部组件的使用的主要内容，如果未能解决你的问题，请参考以下文章