Vue_2.0
循环
v-for
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>name</td>
<td>hp</td>
</tr>
<!--这里的迭代不一定是hero 随意一个能表示意思的就可以-->
<tr v-for="hero in heros">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</table>
</div>
<script>
//搞个数组
var data = [
{name:"盖伦",hp:341},
{name:"提莫",hp:225},
];
new Vue({
el: '#div1',
data: {
heros:data//这里不能加;的
}
})
</script>
<!--这里迭代的过程还可以加个下标inddex(不一定是index,i也可以-->
<tr v-for="hero,index in heros">
<td>{{index}}</td>
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
纯数字遍历
<div id="div1">
<div v-for="i in 10">
{{i}}
</div>
</div>
<script>
new Vue({
el: '#div1'
})
</script>
属性绑定
<!-- 完整语法 --><v-bind:href >
<!-- 缩写 -->< :href >
<!-- v-blind: 用于绑定属性 可以使后面属性中的js表达式合法 -->
<!-- 通俗的说 就是如果不绑定这个属性 鼠标放到这个按钮上提示的就是mytitle这个字符串 而不是js中的mytitle的值hhh -->
<div id="div1">
<input type="button" value="按钮" v-bind:title="mytitle">
</div>
<script>
new Vue({
el: '#div1',
data:{
mytitle:'hhh'
}
})
</script>
button标签显示的内容可以使图片等非文字元素,但type=button元素不行,因为type=button本身就是标签中元素的一个值,不可以像button标签一样嵌套类似img的标签(奇怪的知识增加了↑
双向绑定
之前绑定属性,把Vue对象数据显示在视图上,那我们想把视图上的数据放到Vue对象上就可以用到这个(比如input)
<div id="div1">
hero name: <input v-model="name">
<button @click="Click">提交数据</button>
</div>
<script>
new Vue({
el: '#div1',
data:{
name:"hhh"
},
methods:{
Click:function(){
alert(this.name);
}
}
})
</script>
<!--灵活运用-->
<div id="div1">
<table align="center">
<tr>
<td>
<input v-model="input" placeholder="输入数据">
</td>
<td>
<p>{{ input }}</p>
</td>
</tr>
<tr>
<td>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>AD</option>
<option>ADC</option>
</select>
</td>
<td>
<p>{{ selected }}</p>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
input:'',
selected:''
}
})
</script>
.lazy
上述的这种v-model绑定是同步绑定 一旦数据变化就绑定,我们可以加一手.lazy 监听这个改变 当失去焦点才绑定数据
<input v-model.lazy="input" placeholder="输入数据">
<p>{{ input }}</p>
这样的话 只有离开输入框 绑定的地方数据才会改变
.number
有时候,拿到了数据需要进行数学运算, 为了保证运算结果,必须先把类型转换为number类型,而v-model默认是string类型,所以就可以通过.number方式确保绑定到的是数字类型了。
<input v-model="input1" type="number" placeholder="输入数据">
<input v-model.number="input" type="number" placeholder="输入数据">
//首先type=“number”保证输入的一定是数字
再来看区别:
第一个绑定的数据是string类型的 第二个是number类型的
.trim
去掉绑定数据前后的空白
计算属性
computed
进行运算时,我们的常规做法是
¥: <input type="number" v-model.number = "rmb"/>
<td align="center">
$: {{ rmb/exchange }}
</td>
<script>
new Vue({
el: '#div1',
data: {
exchange:6.4,
rmb:0
}
})
</script>
当运算过程复杂以后,我们可以用method方法来封装调用
¥: <input type="number" v-model.number = "rmb" />
<td align="center">
$: {{ getDollar() }}
</td>
<script>
new Vue({
el: '#div1',
data: {
exchange:6.4,
rmb:0
},
methods:{
getDollar:function() {
return this.rmb / this.exchange;
}
}
})
</script>
但是我们还可以把运算过程放到computed里面去(调用的时候不用加() 它不是一个方法 而是把计算好的东西赋给dollar)
¥: <input type="number" v-model.number = "rmb" />
<td align="center">
$: {{ dollar }}
</td>
<script>
new Vue({
el: '#div1',
data: {
exchange:6.4,
rmb:0
},
computed:{
dollar:function() {
return this.rmb / this.exchange;
}
}
})
</script>
区别
computed 是有缓存的,只要rmb没有变化,dollar 会直接返回以前计算出来的值,而不会再次计算。 这样如果是复杂计算,就会节约不少时间。
而methods每次都会重新调用
监听属性
watch
监听某个值,当其发生变化执行相应的操作
(和computed的区别是:watch更适用于监听某一个值的变化并作出操作,比如请求后台接口,而computed适用于计算已有的值并返回结果—还有种说法就是watch适合处理一个数据影响多个数据 computed适用于 一个数据受多个数据影响)
<td align="center">
¥: <input type="number" v-model.number = "rmb" />
</td>
<td align="center">
$: <input type="number" v-model.number = "dollar" />
</td>
<script>
new Vue({
el: '#div1',
data: {
exchange:6.4,
rmb:0,
dollar:0
},
watch:{
rmb:function(val) {
this.rmb = val;//val是输入的值
this.dollar = this.rmb / this.exchange;
},
dollar:function(val) {
this.dollar = val;
this.rmb = this.dollar * this.exchange;
},
}
})
</script>
过滤器
<script>
new Vue({
el: '#div1',
data: {
data:''
},
filters:{
//首尾字母大写
capitalize:function(value) {
if (!value) return '' //如果为空,则返回空字符串
value = value.toString()
return value.charAt(0).toUpperCase() + value.substring(1,value.length-1)+value.charAt(value.length-1).toUpperCase()
}
}
})
</script>
这里过滤器是定义在Vue对象里的。 但是有时候,很多不同的页面都会用到相同的过滤器,如果每个Vue对象里都重复开发相同的过滤器,开发维护都不方便。
我们还可以通过全局过滤器的方式,只定义一次过滤器,然后就可以在不同的Vue对象里使用了。
<script>
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
</script>