v-for
data为object,例如:
{
name:"1111",
age:12
}
,那么使用v-for(value in object),输出会是"1111",12,v-for(key in object),输出会是"name","age"
v-for可以循环渲染组件、数组和对象
组件:
首先新建a.vue文件,补上具体内容,
如果app.vue要用到它,所以在app.vue的<script>下一行写上:
import componentA from './a.vue'(此处文件是相对App.vue而言的)
然后export default {
components: {theA: componentA},data:......},
然后在App.vue的<template></template>放入上面的标签,引入<theA></theA>(本来规定必须是-写法,现在vue2.0驼峰写法也是可以了)
数组类型
直接设置data里面数组类型的值,比如:
list[2]=12或者list.length=100这样子是不会引起页面更新渲染的,
对于情况1,要这么写:
Vue.set(this.list,2,12);/Vue.$set(this.list,2,12);
或者 list.splice(2,1,12)
对于修改长度,要list.splice(100);
设置class:
方法一:
<p :class="classStr"></p>
data:{classStr:'red'}//为字符串 ---------<p class="red"></p>
data:{classStr:{'red':true,'blue':false}//为对象----------<p class="red"></p>
data:{classStr:['red','blue']}//为数组--------<p class="red blue"></p>
方法二:
<p :class="[classA,classB]"></p>
data:{classA:'red',classB:'blue'}
方法三:
:class=[classA,{'red':hasError}]
data:{classA:'hello',hasError:true}//<p class="hello red"></p>
方法四:
<p :style="linkCSS"></p>
data:{linkCss:{'color':'red','font-size':'12px'}}
v-if与v-show的区别:
v-if是直接增删dom,v-show是通过设置display属性
父子组件通信:
1.通过事件:
子组件:
<button @click="emitMyEvent">emit</button>
data () {
return {
hello: 'i am component a'
}
},
methods: {
emitMyEvent () {
this.$emit('my-event', this.hello)
}
}
父组件:(my-event格式不能为驼峰式)
<componentA @my-event="deal"></componentA>
methods:{
deal (param) {
console.log(param)
}
}
2.父组件向子组件传值 :
父组件:(number格式不能为驼峰式)
<componentA :number="myval"></componentA>
data(){
myval:''
}
子组件:
<template>
{{number}}
</template>
props:['number']
props还可以写成:
props:{
'number':[Number,String]//指定number类型
}
3.slot
子组件:
<div>
<slot name="header">no header</slot>
<slot name="foooter">no footer</slot>
</div>
父组件:
<theA>
<p slot="header">xxx header</p>
<p slot="footer">xxx footer</p>
</theA>
这样子组件就会出现xxx header和xxx footer这样的显示
表单:
<input type="checkbox" v-model="myBox" value="apple1">
<input type="checkbox" v-model="myBox" value="apple2">
<input type="checkbox" v-model="myBox" value="apple3">
{{myBox}}
data(){myBox: []}
最终mybox的值会随着选择而变,例如选择apple1,apple2,那么myBox会变成:[ "apple1", "apple2" ]
<select v-model='sel'>
<option value="a">1</option>
<option value="b">2</option>
</select>
{{sel}}
data(){sel:''}
如果选了1,那么sel会变成a
vuex
main.js:
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
Vue.use(Vuex) // 注册使用vuex
let store = new Vuex.Store({
state: {
totalPrice: 0
},
getters: {
getTotal (state) {
return state.totalPrice
}
},
mutation: {
increase (state, price) {
state.total += price
},
decrease (state, price) {
state.totalPrice -= price
}
},
actions: {
incment (context, price) {
API(id, function (price) {//此处意为从后台异步获取接口数据,mutation不能异步
context.commit('increase', price)//调用mutation的方法
})
}
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
App.vue:
<template>
{{totalPrice}}
<theA></theA>
<theB></theB>
</div>
</template>
<script>
import componentA from './A.vue'
import componentB from './b.vue'
export default {
components: {theA: componentA, theB: componentB},
data () {
return {}
},
computed: {
totalPrice () {
return this.$store.getters.getTotal
}
}
}
</script>
<style>
</style>
A.vue:
<template>
<div>
<button @click="addOne">+1</button>
<button @click="delOne">+1</button>
</div>
</template>
<script>
export default{
data () {
return {
price: 5
}
},
methods: {
addOne () {
this.$store.increment('increase', this.price)//这里是dispatch了action--increment
},
delOne () {
this.$store.commit('decrease', this.price)
}
}
}
</script>
b.vue:
<template>
<div>
<button @click="addOne">+1</button>
<button @click="delOne">+1</button>
</div>
</template>
<script>
export default{
data () {
return {
price: 15
}
},
methods: {
addOne () {
this.$store.commit('increase', this.price)
},
delOne () {
this.$store.commit('decrease', this.price)
}
}
}
</script>
如此一来,达成的效果就是点击App.vue组件里A,b组件对应的按钮,App.vue组件里显示的totalPrice的值会随着点击而改变(+5或+15)