vue从入门到放弃
Posted 胡金水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue从入门到放弃相关的知识，希望对你有一定的参考价值。
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
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从入门到放弃（一）
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
以上是关于vue从入门到放弃的主要内容，如果未能解决你的问题，请参考以下文章