vue基础知识大全

Posted iameyama

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue基础知识大全相关的知识,希望对你有一定的参考价值。

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.名称
1Props

响应式组件,但是解构的话会失去响应性,请使用props.xxx的形式访问

props'

title;String

,

setup(props)

console.log(props.title)

2context

上下文

有如下内容(attrs,slots,emit,expose)

3,expose

控制该组件可以暴露那些属性

expose();让组件处于关闭状态,不向父组件暴露任何对象

expose({count;publiccount});有选择的向父组件暴露局部状态

4

可以和渲染函数一起使用

return () => h(div,count.value)

5,vue的生命周期

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

     构成(最常用): 

调用顺序名称被调用阶段作用其他

1

beforeCreate组件实例初始化后data和computed处理之前
2created响应式数据,计算属性,方法,侦听器设置完成后挂在未开始,$el不可用
3beforeMount组件被挂载之前wei创建DOM节点
mounted挂载之后被调用

・所有同步子组件被挂载

・dom树创建完成并插入父容器

5beforeupdate响应式状态影变更,但未更新dom树之前在更新dom树之前访问dom树状态
6updated组件更新dom树后禁止在这个函数中更新组件状态,易早成无限更新循环
7beforeUnmount组件被卸载前调用被调用时候,组件实例还具有全部功能
8unmounted组件实例被卸载后

・所有子组件被卸载

・所有响应式作用停止

6,响应式核心API函数

         6.1 响应式函数工具

No函数名作用
1ref()

响应式,可以更改

这个对象只有一个属性值value

2computed()返回一个只读的响应式ref对象
3reactive()返回一个对象的响应式代理
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

都一个访问

2props需要显示声明
3computed组件实例上暴露的计算属性
4methond声明要混入到组件实例中的方法。避免使用箭头函数,因为不可以通过this访问实例
5watch设定数据在变更时调用的侦听回调避免使用箭头函数,因为不可以通过this访问实例
6emits声明有组件触发的时间
1渲染选项template声明组件的字符串模板
2render用编程式组件虚拟dom树的函数
3compileroptions用于配置模板运行时候的编译器选项
1组合选项provide被后代组件注入的值
2inject声明通过从上层提供方匹配并注入当前组件的属性
3mixins一个包含组件选项对象的数组,这些选项都将被混入到当前组件的实例中
4extends要继承的基类组件。
1其他项目name组件展示时候的名称
2components注册在当前组件实例中可以使用的组件
3directives哪些实例中可以使用哪些指令
1组件实例也就是使用this可以访问的属性和方法除了$data以外,其他均为readonly
2$data从data选项函数中返回的对象响应式
3props已经解析的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-textstring元素文本内容
2v-htmlstring元素的innerHTML
3v-showany依据表达式的结果,来改变元素的可见性
4v-ifany元素和模板片段
5v-else-上一个兄弟元素必须由v-if或者v-if-else
6v-else-ifany上一个兄弟元素必须由v-if或者v-if-else
7v-for

Array

object

number

string

Iterable 

基于数据 多次渲染元素或者模板
8v-on

Function

object

Inline statement

给元素绑定监听事件
9v-bind

any

Object

动态绑定一个或多个attributeattrorprop
10v-mode

根据输入元素或者组件输出的值变化

表单输入元素或组件上创建双向绑定

只可以绑定下面四个元素

input

select

textarea

components

#11

v-slot

插槽名

只用于

template

components

12v-pre-跳过该元素和所有子元素的编译
13v-once-仅仅渲染一次,跳过之后的更新
14v-memoany[ ]
15v-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项目地址链接

以上是关于vue基础知识大全的主要内容,如果未能解决你的问题,请参考以下文章

7G Vue.js 教程,55集从基础到2.0,简单灵活易上手,项目开发实用款!

初识Vue,简单的todolist

Vue.js是如何做到数据响应的?

译Vue.js是如何做到数据响应的?

Vue.js 上传文件(后台使用.net)

vue组件传值大全详细版