目录
如何创建vue对象实例
因为Vue是需要作用在标签上的,根本上还是js的代码
el属性是和使用该Vue对象的id属性绑定的
data属性是用来存放数据的
<script>
new Vue({
el:'需要绑定的id属性',
data:{
存放数据的地方
可以是数组、对象或者是数组对象
}
})
</script>
vue简单使用
使用el和标签中的id属性绑定,并将值替换成data里面设置的值
插值表达式{{ }},读取vue中data里面的数据,只能应用于文本范围(两个标签中间部分)
<body>
<div id="app">
<p>大家好,我是 {{person.name}} ,我今年 {{person.age}} 岁了</p>
</div>
</body>
<script>
// 创建vue 的实例
new Vue({
el:'#app',
data:{
person:{name:'曹操',age:36},
hpList:['武汉','湖南','河南','陕西']
}
})
</script>
v-for遍历数组
v-for标签属性,用来循环遍历数组,e in arr 类比增强for循环(e:arr)
e是数组arr中的每一个元素
<body>
<div id="app">
<p>
厚溥的分公司地点有:
<ul>
<li v-for="hp in hpList">
{{hp}}
</li>
</ul>
普通的for循环
<ul>
<li v-for="i in 10">
{{i}}
</li>
</ul>
</p>
</div>
</body>
<script>
// 创建vue 的实例
new Vue({
el:'#app',
data:{
hpList:['武汉','湖南','河南','陕西']
}
})
</script>
v-bind单项绑定
v-bind属性,单向绑定绑定某个属性,让属性中读取data中的数据,通常简写为(:)
<body>
<div>
<h3>单向绑定</h3>
<input type="text" v-bind:value="person.name">
<input type="number" :value="person.age"><br>
</div>
</body>
<script>
// 创建vue 的实例
new Vue({
el:'#app',
data:{
person:{name:'曹操',age:36}
}
})
</script>
v-model双向绑定
v-model属性,双向绑定,可以读取,也可以改变data中的数据,通常简写为v-model, 只适用于表单input标签
<body>
<div>
<h3>双向绑定</h3>
<input type="text" v-model:value="person.name">
<input type="number" v-model="person.age">
</p>
</div>
</body>
<script>
// 创建vue 的实例
new Vue({
el:'#app',
data:{
person:{name:'曹操',age:36}
}
})
</script>