----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
vue——v-for
forDemo.vue
<template >
<div>
<p>遍历数组</p>
<ul>
<li v-for="(item,index) in listArr" :key="item.id">
{{index}} - {{item.id}} - {{item.title}}
</li>
</ul>
<p>遍历对象</p>
<ul>
<li v-for="(val, key, index) in listObj" :key="key">
{{index}} - {{key}} - {{val}}
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
flag:false,
listArr:[
{id:'a',title:'标题1'},
{id:'b',title:'标题2'},
{id:'c',title:'标题3'},
],
listObj:{
name:'张三',
age:18,
sex:'男'
}
}
}
}
</script>
App.vue
<template>
<div id="app">
<forDemo/>
</div>
</template>
<script>
import forDemo from './components/baseDemo/forDemo.vue'
export default {
name: 'App',
components: {
forDemo
}
}
</script>
结果:
vue —— event
eventDemo.vue
<template>
<div>
<h1>事件</h1>
<ul>
<li v-for="(item,index) in arr" :key="index">
ID:{{item.id}}-------姓名:{{item.name}}
</li>
</ul>
<button @click="addFun">添加</button>
</div>
</template>
<script>
// 1.@click.stop:阻止事件
// 2.@click.prevent:阻止form重载
// 3.@click.capture:捕获html、body
// 4.@click.self:当前元素
// 5.@click.ctrl、shift、alt:键盘修饰符
export default {
data(){
return{
arr:[
{id:1,name:'张三'},
{id:2,name:'李四'},
]
}
},
methods:{
addFun(event){
this.arr.push({
id:`${Date.now()}`,
name:'老王'
})
}
}
}
</script>
App.vue
<template>
<div id="app">
<eventDemo/>
</div>
</template>
<script>
import eventDemo from './components/baseDemo/eventDemo.vue'
export default {
name: 'App',
components: {
eventDemo
}
}
</script>
结果:
vue——表单
formDemo.vue
<template>
<div>
<h1>表单 v-model</h1>
<p>{{num}}</p>
<p>{{str}}</p>
<p><input type="text" v-model="num"></p>
<!-- lazy触发场景,失去焦点,触发change -->
<p><input type="text" v-model.lazy="num"></p>
<!-- 只能输入数字 -->
<p><input type="number" v-model.number="num"></p>
<!-- 去除收尾空格 -->
<p><input type="text" v-model.trim="str"></p>
<p><textarea v-model="area"></textarea></p>
<p>checkbox:{{class1}}</p>
<p><input type="checkbox" value="一阶段" v-model="class1">一阶段</p>
<p><input type="checkbox" value="二阶段" v-model="class1">二阶段</p>
<p><input type="checkbox" value="三阶段" v-model="class1">三阶段</p>
<p>radio:{{radio1}}</p>
<p><input type="radio" id = "1" value="男" v-model="radio1">
<label for="1">男</label>
</p>
<p><input type="radio" id = "2" value="女" v-model="radio1">
<label for="2">女</label>
</p>
<p>select:{{selected}}</p>
<p><select v-model="selected">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select></p>
</div>
</template>
<script>
export default {
data(){
return{
num:0,
str:'',
area:'哈哈哈',
class1:[],
radio1:'',
selected:'北京'
}
}
}
</script>
App.vue
<template>
<div id="app">
<eventDemo/>
</div>
</template>
<script>
import formDemo from './components/baseDemo/formDemo.vue'
export default {
name: 'App',
components: {
formDemo
}
}
</script>
结果:
vue——父组件传递数据到子组件&&子组件传递数据到父组件&&Bus通信
parentComDemo.vue
<template>
<div>
<h1>父组件</h1>
<List :list="arr"/>
<Button @myAddFun="parentFun"/>
</div>
</template>
<script>
// 1.父 -- 子 通信,解释:就把父组件的数据传递给子组件
// 2.子 -- 父 通信,解释:子触发函数调用父组件的函数,并传递参数
import List from './list.vue'
import Button from './button.vue'
export default {
components:{
List,
Button
},
data(){
return{
arr:[
{id:1,name:'a'},
{id:2,name:'b'},
{id:3,name:'c'}
]
}
},
methods:{
parentFun(val){
console.log('父组件的函数触发了:'+val)
this.arr.push({
id:`${Date.now()}`,
name:'d'
})
}
}
}
</script>
list.vue
<template>
<div>
<p>子组件</p>
<ul>
<li v-for="(item,index) in list" :key="index">
id:{{item.id}}-----name:{{item.name}}
</li>
</ul>
</div>
</template>
<script>
import eventBus from './eventBus'
export default {
props:{
list:Array()
},
mounted(){ // 挂载,即把下面代码挂载在dom上,注意执行事件
eventBus.$on('sendNum',this.listFun)
// 总结:
// 1.addEventListener $on 添加自定义事件,切记要写销毁事件
// 2.定时器
// 3.自定义
},
destroyed(){
eventBus.$off('sendNum',this.listFun)
},
methods:{
listFun(val){
console.log('接收button通过事件总线传递过来的事件,val = '+val);
}
},
data(){
return{
// arr:[
// {id:1,name:'a'},
// {id:2,name:'b'},
// {id:3,name:'c'}
// ]
}
}
}
</script>
button.vue
<template>
<div>
<button @click="addFun">添加</button>
<button @click="sendFun">传递</button>
</div>
</template>
<script>
// 2.事件总线通信
import eventBus from './eventBus'
export default {
methods:{
addFun(){
console.log('click addFun')
// 子组件,传递函数到父组件【参数可以传对象、数组】
this.$emit('myAddFun',10)
// this.$emit('myAddFun',{id:100,name:'kkk'})
// this.$emit('myAddFun',[1,2,3,4,5,6])
},
sendFun(){
eventBus.$emit('sendNum',100)
}
}
}
</script>
App.vue
<template>
<div id="app">
<parentComDemo/>
</div>
</template>
<script>
import parentComDemo from './components/baseDemo/parentComDemo.vue'
export default {
name: 'App',
components: {
parentComDemo
}
}
</script>
结果:
vue——生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM,在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,目的是给予用户在一些特定的场景下添加他们自己代码的机会。
单个组件生命周期
挂载阶段-更新阶段-销毁阶段
1、beforeCreate
在实例初始化之后,数据观测和event/watcher时间配置之前被调用。
2、created
实例已经创建完成之后被调用。在这一步,实例已经完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
3、beforeMount
在挂载开始之前被调用:相关的render函数首次被调用。
该钩子在服务器端渲染期间不被调用。
4、mounted
el被新创建的vm.$el替换,并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内。
该钩子在服务端渲染期间不被调用。
5、beforeUpdate
数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。
你可以在这个钩子中进一步第更改状态,这不会触发附加的重渲染过程。
该钩子在服务端渲染期间不被调用。
6、updated
由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
该钩子在服务端渲染期间不被调用。
7、activated
keep-alive组件激活时调用。类似v-show
该钩子在服务器端渲染期间不被调用。
8、deactivated
keep-alive组件停用时调用。
该钩子在服务端渲染期间不被调用。
9、beforeDestroy 【类似于React生命周期的componentWillUnmount】
实例销毁之间调用。在这一步,实例仍然完全可用。
该钩子在服务端渲染期间不被调用。
10、destroyed
Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
该钩子在服务端渲染不会被调用。
单组件声明周期图
挂载: beforeCreate => created => beforeMount => mounted
更新: beforeUpdate => updated
销毁: beforeDestroy => destroyed
created和mounted有什么区别?
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID); 通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。
父子组件生命周期
index组件-input组件-list组件
父子组件生命周期图
挂载: parent beforeCreate => parent created => parent beforeMount => child beforeCreate => child created => child beforeMount => child mounted => parent mounted
更新: parent beforeUpdate => child beforeUpdate => child updated => parent updated
销毁: parent beforeDestroy => child beforeDestroy => child destroyed => parent destroyed
从以上能够看出:
挂载时,子组件是在父组件before mount后开始挂载,并且子组件先mounted,父组件随后
更新时,子组件是在父组件before update后开始更新,子组件先于父组件更新
销毁时,子组件是在父组件before destroy后开始销毁,并且是子组件先销毁,父组件随后。
mountedDemo.vue
<template>
<div>
{{num}}
<button @click="updateFun">修改</button>
</div>
</template>
<script>
export default {
data(){
return{
num:100
}
},
methods:{
updateFun(){
this.num = 200
}
},
beforeCreate(){
console.log("创建前");
},
created(){
console.log("创建后");
// 创建后,数据观测,event 没有挂载
},
beforeMount(){
console.log("挂载之前");
},
mounted(){
console.log("挂载后");
// ajax最好放在mounted中,可以保证dom已经渲染,再更新数据
},
beforeUpdate(){
console.log("更新前");
},
updated(){
console.log("更新后");
},
beforeDestroy(){
console.log("销毁前");
},
destroy(){
console.log("销毁后");
}
}
</script>
App.vue
<template>
<div id="app">
<mountedDemo/>
</div>
</template>
<script>
import mountedDemo from './components/baseDemo/mountedDemo.vue'
export default {
name: 'App',
components: {
mountedDemo
}
}
</script>
结果:
更多文章
vue从入门到放弃(四)
vue从入门到放弃(二)
vue从入门到放弃(一)
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------