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