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——声明周期
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从入门到放弃的主要内容，如果未能解决你的问题，请参考以下文章