vue-exercise
不定期的vue学习动态
第一天
hello world
关于一个最小的vue项目的结构
导入vue
创建vue实例
使用插值表达式调用数据
vue基础及事件修饰符
- 使用v-cloak可以解决闪烁问题，或者使用v-text也可以
<p v-cloak> {{ msg }} </p>
<h4 v-text='msg'></h4>
如何定义一个基本的Vue代码结构
插值表达式 和 v-text 是用来数据的绑定的
v-html
v-bind Vue提供的属性绑定机制 缩写是:
v-on Vue提供的事件绑定机制 缩写是@
事件修饰符
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(比如不是子元素)触发式触发回调
.once 事件只触发一次
跑马灯
步骤:
- 弄一个时间
- 截取字符串
- 定时循环截取
v-model
v-bind 只能实现数据的单向绑定,而v-model能够实现数据双向绑定
v-model只能运用在表单元素中
简易计算器
- HTML代码结构
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
- vue实例结构
var vm = new Vue({
el: "#app",
data: {
n1:0,
n2:0,
result:0,
opt: "-",
},
methods: {
calc() {
switch (this.opt) {
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2);
break;
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2);
break;
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2);
break;
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2);
break;
}
}
},
})
vue里面使用样式
通过属性绑定为元素设置class类样式
通过通过属性绑定为元素绑定style行内样式
vue指令v-for
- v-for循环普通数组
<div id="app">
<p v-for="(item , i) in list">索引值: {{i}} , 内容: {{item}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
list:[1,2,3,4,5,6]
},
methods: {}
})
</script>
- v-for循环对象数组
<div id="app">
<p v-for="(user , i) in list">Id: {{ user.id }}, 姓名: {{ user.name }}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
list:[
{ id: 1, name: 'ls1' },
{ id: 2, name: 'ls2' },
{ id: 3, name: 'ls3' },
{ id: 4, name: 'ls4' },
{ id: 5, name: 'ls5' },
]
},
methods: {}
})
</script>
- v-for循环对象
<div id="app">
<p v-for="(val, key, i) in user">值是: {{ val }}, 键是: {{ key }}, 索引是: {{i}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
user: {
id: 5,
name: "hui",
gender: "male",
}
},
methods: {}
})
</script>
- v-for迭代数字
注意:是从1开始的
<div id="app">
<p v-for="count in 10000">我们来迭代数字吧: {{ count }}</p>
</div>
vue指令之v-for和v-show
一般来说,v-if有更高的切换消耗而v-show有更高的初始渲染消耗.因此,如果需要频繁切换,应使用v-show, 而运行时不大可能改变的,用v-if更好
参考内容
niracler wechat
本文作者：niracler
本文链接： www.niracler.com/2019/03/25/vue-js学习-一/
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
