为了2019年,重新学一遍vue
个人理解,如有错误请指出
vue 里面以 v- 开的属性叫做指令。
v-model 双向绑定 && v-bind 绑定
拿个实例来说引入吧:
有一个文本框,同步显示并计算输入字符串的长度
<body>
<div id='app'>
<input type="text" v-model="info"/><br/>
输入的内容: {{info}}<br/>
输入的长度: {{info.length}}
</div>
<script>
new Vue({
el: '#app', // el: 需要添加到的dom节点
data: { // data: 存放数据
info: ''
}
})
</script>
</body>
v-model 能够和 data 数据同步的的一个指令
v-bind 和 v-model 的区别在于能够显示 data 里面的值,但是却不会同步(一般说可控和不可控,不知道这个说法对不对)
<body>
<div id='app'>
<div v-bind:title='info'>鼠标滑过试试</div>
</div>
<script>
new Vue({
el: '#app',
data: {
info: '显示提示信息'
}
})
</script>
</body>
v-bind 绑定 data里面的值 可以省略为 :
v-if 和 v-show 控制元素显示和不显示
<div id='app'>
<div class="v-if">
<div style="width: 100px;height: 100px;background: red;" v-if='info'>if有没空间</div><hr/>
<div style="width: 100px;height: 100px;background: red;" v-if='!info'>if有没空间</div>
</div><hr/>
<div class="v-show">
<div style="width: 100px;height: 100px;background: red;" v-show='info'>show有没空间</div><hr/>
<div style="width: 100px;height: 100px;background: red;" v-show='!info'>show有没空间</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
info: false
}
})
</script>
仔细看输出的两个红框部分:
v-if: 当为false的时候节点直接不渲染
v-show: 当为false的时候节点会多出一个样式 display:none
v-for 循环
一个固定的循环次数
<div id='app'>
<ul>
<li v-for="item in 9">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
简单的循环数组
<div id='app'>
<ul>
<li v-for="(item, index) in info" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
info: ['你好', '世界', '!']
}
})
</script>
在复杂一点的双重的循环
<div id='app'>
<ul>
<li v-for="(item, index) in info" :key="index">
<ul>
<li v-for='i in item.arr' :key='i.id'>name:{{i.name}}</li>
</ul>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
info: [{
text: '你好',
arr: [
{name: '笨', id: 1},
{name: '蛋', id: 2},
{name: '呆', id: 3}
]
},{
text: '世界',
arr: [
{name: '木', id: 1},
{name: '呆', id: 2}
]
}]
}
})
</script>
v-for 可以嵌套循环,固定循环
v-on 监听事件
一个简单的显示隐藏
<div id='app'>
<button v-on:click='toggle'>切换状态</button>
<div v-show='flag'>我被控制显示还是隐藏</div>
</div>
<script>
new Vue({
el: '#app',
data: {
flag: false,
},
methods: { // 所有的事件都要写在 methods下面
toggle() {
this.flag = !this.flag;
}
}
})
</script>
v-on 可以省略为 @ 符号
等等等… 夜深了,今天就到这里吧!
临走前再来一个:
绑定样式
<div id='app'>
<div :style="{'width': wid + 'px'}">
我被控制
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
wid: 200,
}
})
</script>