vue从入门到放弃
Posted 胡庚申—全栈工程师
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue从入门到放弃相关的知识,希望对你有一定的参考价值。
vue——filter过滤器
filterDemo.vue
<template>
<div>
<h1>过滤器</h1>
{{message | lower}}
</div>
</template>
<script>
export default {
data(){
return{
message:'Hello World'
}
},
filters:{
lower(val){
return val.toLowerCase()
}
},//过滤器
computed(){},//计算属性
methods: {},//普通函数
props: {},//接收参数
created(){},//创建后
mounted(){},//挂载后
beforeDestroy() {},//销毁前
components: {}//注册组件
}
</script>
App.vue
<template>
<div id="app">
<filterDemo/>
</div>
</template>
<script>
import filterDemo from './components/advanceDemo/filterDemo.vue'
export default {
name: 'App',
components: {
filterDemo
}
}
</script>
结果:
vue——watch
watchDemo.vue
<template>
<div>
<h1>watch监听</h1>
<p>{{message}}</p>
<p><input type="text" v-model="message"></p>
<p>{{obj.name}}</p>
<p><input type="text" v-model="obj.name"></p>
</div>
</template>
<script>
export default {
data(){
return{
message:'Hello World',
obj:{
name:'张三',
job:{
jobName:'前端工程师'
}
}
}
},
// 写法一:
// watch:{
// message:(newMsg,oldMsg)=>{
// console.log('oldMsg='+oldMsg);
// console.log('newMsg='+newMsg);
// }
// }
// 写法二:
watch:{
message:{
'handler':'watchMessage',
deep:true, // 深度监听
immediate:true // 首次先执行一次
},
obj:{
'handler':'watchObj',
deep:true, // 深度监听
immediate:true // 首次先执行一次
}
},
methods: {
watchMessage(newMsg,oldMsg) {
console.log('oldMsg='+oldMsg);
console.log('newMsg='+newMsg);
},
watchObj(newMsg,oldMsg) {
console.log('oldMsg='+oldMsg);
console.log('newMsg='+newMsg);
}
}
}
</script>
App.vue
<template>
<div id="app">
<watchDemo/>
</div>
</template>
<script>
import watchDemo from './components/advanceDemo/watchDemo.vue'
export default {
name: 'App',
components: {
watchDemo
}
}
</script>
vue——自定义指令
directiveDemo.vue
<template>
<div>
<h1>全局自定义指令</h1>
<input type="text" v-foc>
<h1>局部自定义指令</h1>
<input type="text" v-foc2>
</div>
</template>
<script>
export default {
directives:{
foc2:{ // 局部自定义指令
inserted:(el)=>{
el.focus()
}
}
},
data(){
return{
}
}
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 全局自定义指令
Vue.directive('foc',{ // 自定义指令v-foc
inserted:el=>{
el.focus() // 聚焦
}
});
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div id="app">
<directiveDemo/>
</div>
</template>
<script>
import directiveDemo from './components/advanceDemo/directiveDemo.vue'
export default {
name: 'App',
components: {
directiveDemo
}
}
</script>
vue——自定义双向绑定(v-model)
modelDemo.vue
<template>
<div>
<h1>双向数据绑定</h1>
<p>{{message}}</p>
<input type="text" :value="message" @change="changeMsg"/>
</div>
</template>
<script>
// 自定义v-model,是用在组件上
// 内置v-model是用在表单上 【它就是通过:value绑定值,change事件来绑定一个函数】
export default {
model:{ // 双向数据绑定,替换
prop:'message',
event:'changeMsg'
},
props: {
message:String
},
// data: () => ({
// message:'默认值'
// }),
methods: {
changeMsg(event) {
// console.log(event);
// this.message = event.target.value
this.$emit('changeMsg',event.target.value)
}
}
}
</script>
parentModel.vue
<template>
<div>
<!-- <modelDemo :message="message" @changeMsg="changeMsg"/> -->
<modelDemo v-model='message'/>
</div>
</template>
<script>
import modelDemo from './modelDemo.vue'
export default {
components: {
modelDemo
},
data(){
return{
message:'父组件传递默认值'
}
},
methods: {
changeMsg(val) {
this.message = val
}
}
}
</script>
<style lang="scss" scoped>
</style>
App.vue
<template>
<div id="app">
<modelDemo/>
<parentModel/>
</div>
</template>
<script>
import modelDemo from './components/advanceDemo/modelDemo.vue'
import parentModel from './components/advanceDemo/parentModel.vue'
export default {
name: 'App',
components: {
modelDemo,
parentModel
}
}
</script>
vue——nextTick
nextTickDemo.vue
<template>
<div>
<h1>nextTick</h1>
<ul ref="mydom" v-if="isshow">
<li v-for="(item,index) in arr" :key="index">
{{item}}
</li>
</ul>
<button type="button" @click="addFun">添加</button>
</div>
</template>
<script>
export default {
name: "",
data: () => ({
arr:['a','b','c','d'],
isshow:false
}),
methods: {
addFun() {
this.arr.push('k')
this.isshow = true
console.log(this.$refs.mydom);// 获取不到dom节点,因为是异步问题
// 使用$nextTick,可以在数据更新之后,获取到最新的dom节点
this.$nextTick(()=>{
// 在dom渲染完成之后就会调用$nextTick
console.log(this.$refs.mydom);
})
}
}
}
</script>
App.vue
<template>
<div id="app">
<nextTickDemo/>
</div>
</template>
<script>
import modelDemo from './components/advanceDemo/nextTickDemo.vue'
export default {
name: 'App',
components: {
nextTickDemo
}
}
</script>
结果:
vue——provide和inject跨级通信
provideAndInjectDemo.vue
<template>
<div>
<h1>provid和inject组件通信</h1>
<p>{{msg}}</p>
<son/>
</div>
</template>
<script>
// provide 和 inject 主要在跨级通信
// 场景:全局样式、全局字体、中英文转换,全局布局
import son from './son.vue'
export default {
components: {
son
},
provide(){
return{
lhq:this.mony, // 传递单个
commProvide:this // 传递当前组件
}
},
data: () => ({
msg:'爷爷辈组件',
mony:'零花钱'
})
}
</script>
son.vue
<template>
<div>
<p>{{sonMsg}}</p>
<grandson/>
</div>
</template>
<script>
import grandson from './grandson.vue'
export default {
components: {
grandson
},
data: () => ({
sonMsg:'儿子辈组件'
})
}
</script>
<style lang="scss" scoped>
</style>
grandson.vue
<template>
<div>
<p>{{sunMsg}}</p>
<p>展示爷爷给的{{lhq}} - {{commProvide.mony}}</p>
</div>
</template>
<script>
export default {
inject: ['lhq','commProvide'],
data: () => ({
sunMsg:'孙子辈组件'
})
}
</script>
<style lang="scss" scoped>
</style>
App.vue
<template>
<div id="app">
<provideAndInjectDemo/>
</div>
</template>
<script>
import provideAndInjectDemo from './components/advanceDemo/provideAndInjectDemo.vue'
export default {
name: 'App',
components: {
provideAndInjectDemo
}
}
</script>
结果:
vue——插槽slot
slotDemo.vue
父组件 给萝卜坑填萝卜,父给子传递萝卜
<template>
<div>
<h1>slot插槽——基本使用</h1>
<childSlot>
<div>
<a href="#">我是一个萝卜</a>
</div>
</childSlot/>
</div>
</template>
<script>
// 父组件 给萝卜坑填萝卜,父给子传递萝卜
import childSlot from './childSlot.vue'
export default {
name: "",
components: {
childSlot
},
data: () => ({
})
}
</script>
<style lang="scss" scoped>
</style>
childSlot.vue
<template>
<div>
<p>这里是子组件</p>
<slot>
这里有一个萝卜坑
</slot>
</div>
</template>
<script>
export default {
name: "",
data: () => ({
})
}
</script>
App.vue
<template>
<div id="app">
<slotDemo/>
</div>
</template>
<script>
import slotDemo from './components/advanceDemo/slotDemo.vue'
export default {
name: 'App',
components: {
slotDemo
}
}
</script>
结果:
slotDemo2.vue
父组件 拿子组件中 slot中的数据
<template>
<div>
<h1>作用域插槽</h1>
<childSlot2>
<!--
写法一:
<template v-slot="myData">
{{myData.slotData[0].name}}
<ul>
<li v-for="item in myData.slotData" :key="item.id">
{{item.name}}
</li>
</ul>
</template> -->
<!-- 写法二: 多个插槽的写法-->
<template v-slot:luobo>
<p>胡萝卜</p>
</template>
<template v-slot:wosun>
<p>莴笋</p>
</template>
</childSlot2>
</div>
</template>
<script>
// 父组件 拿子组件中 slot中的数据
import childSlot2 from './childSlot2.vue'
export default {
name: "",
components: {
childSlot2
},
data: () => ({
})
}
</script>
childSlot2.vue
<template>
<div>
<p>子组件</p>
<slot :slotData="arr" name="luobo">
萝卜坑
</slot>
<slot name="wosun">
莴笋坑
</slot>
</div>
</template>
<script>
export default {
name: "",
data: () => ({
arr:[
{id:1,name:'hhh1'},
{id:2,name:'hhh2'},
{id:3,name:'hhh3'},
]
})
}
</script>
App.vue
<template>
<div id="app">
<slotDemo2/>
</div>
</template>
<script>
import slotDemo2 from './components/advanceDemo/slotDemo2.vue'
export default {
name: 'App',
components: {
slotDemo2
}
}
</script>
结果:
更多文章
vue从入门到放弃(五)
vue从入门到放弃(三)
vue从入门到放弃(二)
vue从入门到放弃(一)
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
以上是关于vue从入门到放弃的主要内容,如果未能解决你的问题,请参考以下文章