vue基础知识大全

Posted 2023-03-29 iameyama

1，指令作用(根据条件更新DOM)

      以v-开头，由vue提供的attribute，为渲染DOM应用提供特殊的响应式行为，也即是在表达式的值发生变化的时候响应式的更新DOM。其内容为可以被求值的js代码，可以写在return后面被返回的表达式。

指令的简写

指令	简写	全写	简写
v-bind	：id	<div v-bind:id="a"></div>	<div id:_"a"></div>
v-on	@	<div v-on:click="a"></div>	<div @:click="a"></div>
v-slot	#

2，组件是UI重用和组合的基本单位

3，DOM内嵌模板使用时候，名字用小写，即时写为大写，浏览器也会强制为小写，。

4，要在组件中使用响应式，需要使用setup（）函数中定义并返回，返回的值在模板中可以使用

     setup是一个专门用于组合式api的特殊的钩子函数。在选项式中没有。

　这个函数是组合式API的入口。

    4.1创建响应式的方法

                使用reactive（）函数来创建响应式对象或者数组

    4.2 使用相应式的方法

                使用setup（）函数，setup函数没有对组件实例的访问权限，也即是说使用this会报错

   4.3 可以使用标签属setup来简化代码

    4.4有三种不同的响应式的编程方法。使用标签setup最简单。

   4.5 使用场景

          4.5.1 非单文件组件中使用组合式api

          4.5.2 基于选相识api中调用组合式api

4.6 setup函数的两个参数

No.	名称
1	Props	响应式组件，但是解构的话会失去响应性，请使用props.xxx的形式访问 props' title;String , setup(props) console.log(props.title)
2	context	上下文 有如下内容（attrs，slots，emit，expose）
3，	expose	控制该组件可以暴露那些属性 expose（）；让组件处于关闭状态，不向父组件暴露任何对象 expose（｛count；publiccount｝）；有选择的向父组件暴露局部状态
4		可以和渲染函数一起使用 return （） ＝＞　h(div,count.value)

５，vue的生命周期

     作用：可以在特定阶段运行自己写的代码

     构成（最常用）： 

调用顺序	名称	被调用阶段	作用	其他
1	beforeCreate	组件实例初始化后		data和computed处理之前
2	created	响应式数据，计算属性，方法，侦听器设置完成后		挂在未开始，＄el不可用
3	beforeMount	组件被挂载之前		wei创建DOM节点
4	mounted	挂载之后被调用		・所有同步子组件被挂载 ・dom树创建完成并插入父容器
5	beforeupdate	响应式状态影变更，但未更新dom树之前	在更新dom树之前访问dom树状态
6	updated	组件更新dom树后		禁止在这个函数中更新组件状态，易早成无限更新循环
7	beforeUnmount	组件被卸载前调用		被调用时候，组件实例还具有全部功能
8	unmounted	组件实例被卸载后		・所有子组件被卸载 ・所有响应式作用停止

6，响应式核心API函数

         6.1 响应式函数工具

No	函数名	作用
1	ref（）	响应式，可以更改 这个对象只有一个属性值value
2	computed（）	返回一个只读的响应式ref对象
3	reactive（）	返回一个对象的响应式代理
4，	watch（）	侦听一个或者多个响应式数据源 参数1；一个函数，一个返回值             一个ref 参数2；回调函数 参数3；对象

         6.2 工具函数

                ifref，unref，toRef，isreactive

       6.3 组合式的依赖注入

               6.3.1 provide 提供一个值可以被后代组件注入（在setup阶段同步调用）

                     参数1   注入的key

                   参宿2     要注入的值

               6.3.2  inject（）

                      注入一个父组件提供的值

                     参数1   注入的key ，在父组件中去寻找key，匹配相应的值。

                     参数2    可选  

                    参数3     如果2为一个函数，那么参数3必须设定未false

7，选项式api

No	类型	名称	作用	返回		其他
1	状态类型	data	声明组件初始相应状态	js对象		this.$data.a this.a 都一个访问
2		props	需要显示声明
3		computed	组件实例上暴露的计算属性
4		methond	声明要混入到组件实例中的方法。			避免使用箭头函数，因为不可以通过this访问实例
5		watch	设定数据在变更时调用的侦听回调			避免使用箭头函数，因为不可以通过this访问实例
6		emits	声明有组件触发的时间
1	渲染选项	template	声明组件的字符串模板
2		render	用编程式组件虚拟dom树的函数
3		compileroptions	用于配置模板运行时候的编译器选项
1	组合选项	provide	被后代组件注入的值
2		inject	声明通过从上层提供方匹配并注入当前组件的属性
3		mixins	一个包含组件选项对象的数组，这些选项都将被混入到当前组件的实例中
4		extends	要继承的基类组件。
1	其他项目	name	组件展示时候的名称
2		components	注册在当前组件实例中可以使用的组件
3		directives	哪些实例中可以使用哪些指令
1	组件实例	也就是使用this可以访问的属性和方法	除了$data以外，其他均为readonly
2		$data	从data选项函数中返回的对象	响应式
3		props	已经解析的props对象
4		$el	该组件实例管理的DOM根节点
5		$optioon	实例化当前组件的组件选项
6		$parent	当前组件的父亲组件
7		$root	当前组件的根组件
8		$slots	父组件所传入的插槽对象，			通常用于检测是否存在插槽
9		$refs	一个包含DOM元素和组件实例的对象			通过模板注册使用
10		$attrs	包含attributes对象，			这个attributes由父组件传入，
11		$watch	用于命令式第创建侦听器的api			参数1 表达式 参数2 回调函数
12		$emit()	触发一个自定义事件			任何额外的参数都会传递给事件监听器的回调函数

8，指令

缩写	No	名字	类型	更新位置
	1	v-text	string	元素文本内容
	2	v-html	string	元素的innerHTML
	3	v-show	any	依据表达式的结果，来改变元素的可见性
	4	v-if	any	元素和模板片段
	5	v-else	-	上一个兄弟元素必须由v-if或者v-if-else
	6	v-else-if	any	上一个兄弟元素必须由v-if或者v-if-else
	7	v-for	Array object number string Iterable	基于数据 多次渲染元素或者模板
	8	v-on	Function object Inline statement	给元素绑定监听事件
	9	v-bind	any Object	动态绑定一个或多个attribute	attrorprop
	10	v-mode	根据输入元素或者组件输出的值变化	表单输入元素或组件上创建双向绑定	只可以绑定下面四个元素 input select textarea components
#	11	v-slot	插槽名		只用于 template components

	12	v-pre	-	跳过该元素和所有子元素的编译
	13	v-once	-	仅仅渲染一次，跳过之后的更新
	14	v-memo	any[ ]
	15	v-clock	-	隐藏为完成编译的DOM模板

vuejs入门小demo-搜索大全

这个demo非常适合入门的同学，不再是简单的todolist。用到的知识点有组件通信，过渡效果，vue-rsource，还有一些基本的vue指令。

 

先放一张截图:

 

是不是感觉高端大气上档次呢，演示地址

 

如何运行：

将项目下载到本地

 

1. 安装git
2. 安装nodejs
3. 配置node环境变量(百度一下)
4. 命令行进入本案例目录
5. 输入命令npm install(最好使用cnpm淘宝镜像)
6. 输入命令npm run dev

 

如果感觉本demo对你有用的话，就给棵星星吧github项目地址链接