Vue知识点

于 2022-11-24 20:39:06 发布
阅读量325 收藏
点赞数
分类专栏： vue 前端学习 javascript 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50280292/article/details/127999628
版权
前端学习 同时被 3 个专栏收录
9 篇文章 1 订阅
订阅专栏
vue
7 篇文章 0 订阅
订阅专栏
javascript
7 篇文章 0 订阅
订阅专栏

1.slot插槽

1.1 默认插槽

src/App.vue

<template>

    <div class="container">
        <Category title='美食' :listData="foods">
            <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
        </Category>
        <Category title='游戏' :listData="games">
            <ul>
                <li v-for="(g, index) in games" :key="index">{{ g }}</li>

            </ul>
        </Category>
        <Category title='电影' :listData="films">
            <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
        </Category>
    </div>

</template>
<script>
import Category from './components/Category.vue';

export default {
    name: "App",
    components: { Category },
    data() {
        return {
            foods: ['火锅', '烧烤', '小龙虾', '鸡公煲'],
            games: ['王者荣耀', '吃鸡', 'QQ飞车', '超级玛丽'],
            films: ['教父', '海上钢琴师', '肖申克的救赎', '拆弹专家']
        }
    }
}
</script>
<style>
.container {
    display: flex;
    justify-content: space-around;
}
</style>

src/components/Category.vue

<template>
    <div class="category">
        <h3>{{ title }}列表</h3>
        <slot></slot>
       
    </div>
</template>
<script>
export default {
    name: 'Category',
    props: ['listData', 'title']
}
</script>
<style>
.category {
    background-color: skyblue;
    width: 200px;
    height: 300px;

}

h3 {
    text-align: center;
    background-color: orange;
}

img {
    width: 100%
}

video {
    width: 100%;
}
</style>

效果如下：

 1.2 具名插槽

src/App.vue

<template>
    <div class="container">
        <Category title="美食">
            <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
            <a slot="footer" href="http://www.atguigu.com">更多美食</a>
        </Category>

        <Category title="游戏">
            <ul slot="center">
                <li v-for="(g, index) in games" :key="index">{{ g }}</li>
            </ul>
            <div class="foot" slot="footer">
                <a href="http://www.atguigu.com">单机游戏</a>
                <a href="http://www.atguigu.com">网络游戏</a>
            </div>
        </Category>

        <Category title="电影">
            <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
            <template v-slot:footer>
                <div class="foot">
                    <a href="http://www.atguigu.com">经典</a>
                    <a href="http://www.atguigu.com">热门</a>
                    <a href="http://www.atguigu.com">推荐</a>
                </div>
                <h4>欢迎前来观影</h4>
            </template>
        </Category>
    </div>
</template>

<script>
import Category from './components/Category'
export default {
    name: 'App',
    components: { Category },
    data() {
        return {
            games: ['植物大战僵尸', '红色警戒', '空洞骑士', '王国']
        }
    },
}
</script>

<style>
.container,
.foot {
    display: flex;
    justify-content: space-around;
}

h4 {
    text-align: center;
}
</style>

src/components/Category.vue

<template>
    <div class="category">
        <h3>{{ title }}分类</h3>
        <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
        <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
        <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
    </div>
</template>

<script>
export default {
    name: 'Category',
    props: ['title']
}
</script>

<style scoped>
.category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
}

h3 {
    text-align: center;
    background-color: orange;
}

video {
    width: 100%;
}

img {
    width: 100%;
}
</style>

效果如下：

 1.3 作用域插槽

src/App.vue

<template>
    <div class="container">
        <Category title="游戏">
            <template scope="jojo">
                <ul>
                    <li v-for="(g, index) in jojo.games" :key="index">{{ g }}</li>
                </ul>
            </template>
        </Category>

        <Category title="游戏">
            <template scope="jojo">
                <ol>
                    <li v-for="(g, index) in jojo.games" :key="index">{{ g }}</li>
                </ol>
            </template>
        </Category>

        <Category title="游戏">
            <template scope="jojo">
                <h4 v-for="(g, index) in jojo.games" :key="index">{{ g }}</h4>
            </template>
        </Category>
    </div>
</template>

<script>
import Category from './components/Category'
export default {
    name: 'App',
    components: { Category }
}
</script>

<style>
.container,
.foot {
    display: flex;
    justify-content: space-around;
}

h4 {
    text-align: center;
}
</style>

src/components/Category.vue

<template>
    <div class="category">
        <h3>{{ title }}分类</h3>
        <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
        <slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
    </div>
</template>

<script>
export default {
    name: 'Category',
    props: ['title'],
    data() {
        return {
            games: ['植物大战僵尸', '红色警戒', '空洞骑士', '王国']
        }
    },
}
</script>

<style scoped>
.category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
}

h3 {
    text-align: center;
    background-color: orange;
}

video {
    width: 100%;
}

img {
    width: 100%;
}
</style>

效果如下：

 总结：

插槽：

  1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于==父组件 > 子组件

  2. 分类：默认插槽、具名插槽、作用域插槽

  3. 使用方式

2.Vuex

2.1 什么是Vuex

  1. 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
  2. Vuex Github地址

 2.2 什么时候用Vuex

  1. 多个组件依赖同一种状态
  2. 来自不同组件的行为需要变更为同一状态

2.3 Vuex工作原理图

 

 2.4 求和案例

使用纯vue编写：

src/App.vue

<template>
	<div class="container">
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count}
	}
</script>

src/components/Count.vue

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
				sum:0 //当前的和
			}
		},
		methods: {
			increment(){
				this.sum += this.n
			},
			decrement(){
				this.sum -= this.n
			},
			incrementOdd(){
				if(this.sum % 2){
					this.sum += this.n
				}
			},
			incrementWait(){
				setTimeout(()=>{
					this.sum += this.n
				},500)
			},
		},
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

效果如下：

 下面我们使用Vuex重现这个例子

src/store/index.js：

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作、处理业务逻辑
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
   
//创建并暴露store
export default new Vuex.Store({
   	actions,
   	mutations,
   	state
})

在src/main.js中创建vm时传入store配置项：

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'

Vue.config.productionTip = false

Vue.use(Vuex)

new Vue({
    el:"#app",
    render: h => h(App),
    store
})

src/components/Count.vue

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.commit('ADD',this.n)
			},
			decrement(){
				this.$store.commit('SUBTRACT',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('addOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('addWait',this.n)
			},
		},
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

src/store/index.js:

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {
    addOdd(context,value){
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{
			context.commit('ADD',value)
		},500)
    },
}
//准备mutations对象——修改state中的数据
const mutations = {
    ADD(state,value){
        state.sum += value
    },
    SUBTRACT(state,value){
        state.sum -= value
    }
}
//准备state对象——保存具体的数据
const state = {
    sum:0 //当前的和
}
   
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

总结：

Vuex的基本使用：

  1. 初始化数据state，配置actions、mutations，操作文件store.js

  2. 组件中读取vuex中的数据：$store.state.sum

  3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

qq_50280292
关注
专栏目录
Vue知识点汇总【持更】
qq_45605043的博客
09-14 6001
一个前端小白的自学之路，完结之日即成为大白之日。
Vue技巧
qq_44845659的博客
01-20 506
1、将一个 prop 限制在一个类型的列表中 我们在使用 prop 时，可能会有时候需要判断该 prop 是否在我们规定的范围内（或者说规定的值内），此时可以使用 prop 定义中的 validator 选项，将一个 prop 类型限制在一组特定的值中。 export default { name: 'Test', props: { name: { type: String, }, size: { type: String, validat
Vue组件间传参（1）---父子
大香蕉的博客
08-09 851
一、父组件向子组件传递数据 1、在子组件中使用props声明需要从父组件接收到的数据（props和methods、watch等同级） 两种方式： 方式一：字符串数组，每一项都是父组件传递的名称 例：props:['name','list'] 父组件引用的子组件：<子组件 :list = " 父组件组件中的变量 "><子组件> 方式二：对象，可以控制传递数据时...
vue组件传值props的使用
xiaoququ的博客
05-09 2228
1、父组件向子组件传递静态值（死值） 定义一个公共组件tabbar 当在页面中使用公共组件时，title会不同，因此需要将title传递给公共组件 采用props接收父组件传递过来的值 props: ['title','rightText'], 父组件中引入公共组件，并通过自定义属性传递值 <tabbar title="首页" rightText="查看更多"></tabb...
巧妙运用vue的props写TodoList
MOAN.小M.的博客
03-31 1114
在学习了JS基础、JQuery后都各位都接触过TodoList吧。巧妙运用vue的props写TodoList
vue组件之通过 props 给子组件传数组数据
wanglingli95的博客
03-13 7971
上机训练——移动端标题栏 需求说明 完成移动端标题子组件，在子组件中接收标题和两张修饰图片； 在父组件中调用子组件，并传递给子组件对应的内容； 图片以import的方式进行导入，页面效果如图所示。 实现过程： 父组件示例代码（App.vue)： <template> <div id="app"> <TitleItem :list="listdata"></TitleItem> </div> </templat
vue知识点汇集 总结 回顾
10-27
下面将根据标题和描述，结合压缩包内的文件名称，对Vue的知识点进行详细梳理。 1. **基础概念** - **虚拟DOM**：Vue使用虚拟DOM作为数据和实际DOM之间的中间层，以提高性能和效率。 - **组件化**：Vue中的组件是...
Vue知识点串讲.md
07-10
Vue知识点串讲.md
vue知识点总结.md
03-01
vue知识点总结.md
vue知识点思维导图.png
02-04
vue知识点
「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
北
11-15 743
自己拍的小云彩 源码在文末。 前言 上篇文章写了个V利用Props进行组件之间的通信，这不立马就安排上这个案例拉丫。光学不敲等于没学哈（资深大佬除外哈） 目标就是实现如下的样子： 能够进行增删改查，并且是在各个组件之间。 一、环境准备 针对这个页面，我们将他们划分为下面四个组件哈。其实也不是固定的，只是为了更好的展示组件之间的通信。 项目结构： 准备静态页面 MyTodoHeader头部组件： <template> <div class="todo-header-box"&gt.
Vue自定义组件Props中接收数组
m0_49714202的博客
06-07 4031
解释这个什么意思具体如下: props: { content: { type: Array, // default: function () { return [] } default: () => [] }, } 父组件给子组件的传值: 父组件 里面的返回空，意思就是template里面的div循环每个盒子返回为空盒子， 传给子组件，子组件通过this.$ajax.get({}), 获取数据子组件就能够显示内容在 子组件显示出来了， 这是因为父
vue框架（全家桶）：一个小案例-todoList入门版本（props数据传递+浏览器本地存储）
lalala_dxf的博客
06-04 224
todoList添加webStorage优化
Vue页面加载时，发送axios请求后端List数据，赋值data属性
qq_43657722的博客
09-19 2667
Vue页面加载时，发送axios请求后端List数据，赋值data属性
props传递（父子传递）
m0_57108418的博客
07-05 441
形象的说，这是一个微信发红包，需要发送和缺人收款。在app.vue组件里面的student组件中，传入数据如下 想里面传入名字为（list），值为name的数据在student.vue里面中，接收数据，里面就包含了name的值......
Vue中的 props 属性
所行皆坦途
08-11 7357
vue props 的定义的多种方法与注意事项，限制类型、限制默认值、限制不可为空、常见的警告以及解决方案。
vue中props的用法
程文英
09-11 8453
vue使用props的用法 日常编程中都会用到父组件用子组件、子用父的情况，下面先介绍一种子传父的情况 1、在父组件中 (1)、首先是在其定义一个list属性以存储其数据值 (2)、定义一个绑定属性“mlist”，以为后续props做铺垫, <template> <div class="hello"> <h2>我是父组件,我需要建立一些参数</h2> <span><mHome :mlist="list"/></
vue3.0中props父子传值的改动
Jack, what else can you do besides holding your little darling?
09-14 1294
前言： 对vue3.0的学习以及对技术更新升级内容的整理与使用，这里分析下他的props父子传值的改动。 vue官方入口 目录 一、vue2.0中props的用法 1、父组件中 a.vue中 2、子组件中 b.vue中 3、孙子组件中 c.vue中 二、vue3.0中props的用法 1、父组件中 a.vue中 2、子组件中 b.vue中 3、孙子组件中 c.vue中 三、vue.2.0的props和vue3.0的props的对比 个人理解： 解决了...
vue知识点pdf分享
最新发布
10-25
综上所述，一个完整的Vue知识点的PDF分享应当包括Vue的基本概念、响应式数据绑定、组件化开发模式、路由管理、状态管理和动画效果等方面的内容。通过学习这些知识点，开发者可以更好地掌握Vue的使用方法，提高前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值