vue基础知识点

一、Vue

1. 简介

  • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的 JavaScript 框架

  • 它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型

  • 由个人维护:尤雨溪,华人

  • 官网 Vue.js - 渐进式 JavaScript 框架 | Vue.js

2. 基本使用

Vue的页面使用方式:

  • 在页面中直接引入Vue核心库的js文件

  • 该方式只是为了让开发者在学习Vue语法时可以快速掌握

  • 实际上Vue并不适合直接使用 页面方式进行语法定义,更推荐使用模块化方式

使用步骤:

  1. 获取Vue核心库的js文件

    通过地址 https://cdn.jsdelivr.net/npm/vue/dist/vue.js 下载

  2. 在页面中引入Vue

    复制代码
    <script src="js/vue.js"></script>
  1. 创建Vue实例并应用

3. 调试工具

安装vue-devtools插件,便于在Chrome浏览器中调试vue

步骤:

  1. 打开Chrome浏览器的扩展程序------>更多扩展程序

  2. vue_devtools_6.5.0.crx拖放到扩展程序中

在VSCode中安装Vue相关插件:Vue Language Featuresvue-helper

二、基本交互

1. 插值表达式

语法: {``{ }} 由两对大括号组成,称为"Mustache"语法

作用:用于在页面标签中插入值,进行数据的绑定显示,且当值发生变化时标签会重新渲染加载,称为响应式特性,即数据状态同步操作

用法:<标签>{``{ Vue对象数据仓库变量|JS表达式|JS内置对象 }}</标签> 只能用在标签中间的内容位置

2. 指令

2.1 简介

指令 (Directives)是用来扩展html标签的功能,以v-作为前缀

2.2 常用指令
指令 取值 作用
v-text string 更新元素的textContent
v-html string 更新元素的innerHTML
v-on Function | Object | Array | 行内表达式 绑定事件监听器,用于事件绑定
v-show any 根据表达式的boolean结果,切换元素的 display CSS 属性,控制元素的显示隐藏
v-if、v-else-if、v-else any 根据表达式的boolean结果,执行元素的创建和删除操作,控制元素的显示隐藏
v-for Array | Object | number | string 基于数据多次渲染元素或模板块,用于循环数据
v-bind any 动态的为标签绑定属性,用于属性绑定

3. 双向数据绑定

v-model双向数据绑定指令

  • 取值:随表单控件类型不同而不同

  • 限制:仅限于表单中可输入或者可选择的元素,如<input><select><textarea>

四、数据控制

1. 计算属性

计算属性(computed)也是用来存储属性数据的,但具有以下特点:

  • 可以对数据进行逻辑处理操作,实现数据包装

  • 计算属性通常依赖于当前Vue对象中的普通属性

  • 当依赖的普通属性发生变化时计算属性也会变化,实现数据监控

2. 监视器

监视器(watch)是用来监视数据的变化,对数据进行监控

XML 复制代码
new Vue({
    watch: {
        变量:function(newValue, oldValue){}, // 监控方法
        变量:{
            handler: function(newValue, oldValue){}, // 监控方法
            deep: true // 开启深度监视
        }
    },
})

五、实例属性和方法

1. 简介

通过Vue实例对象可以直接访问的属性和方法,称为实例属性和实例方法

实例属性和方法都以 $ 开头

2. 实例属性

  • vm.$el:当前Vue实例使用的根 DOM 元素

  • vm.$refs:当前Vue实例容器中定义了ref属性的所有 DOM 元素

3. 实例方法

  • vm.$mount:手动挂载Vue实例

  • vm.$destroy:销毁Vue实例,只会销毁vue的实例对象,不会销毁与其关联的页面容器

  • vm.$nextTick:在DOM更新完成后再执行回调函数,一般在修改数据之后使用该方法,以便获取更新后的DOM并操作

六、模板

模板(template)就是定义Vue时指定的页面结构构成

  • 默认使用el选项指定的挂载元素的内容来构成页面模板,同时指定挂载位置

  • 可以使用 template 选项独立定义页面模板,此时el挂载元素的内容将被忽略

七、生命周期

Vue实例从创建到销毁的过程,称为生命周期,共有八个阶段:

  • beforeCreate、created

  • beforeMount 、mounted

  • beforeUpdate、updated

  • beforeDestroy、destroyed

在生命周期的每个阶段都提供了相应的钩子函数,可以在钩子函数中执行操作,控制生命周期的各个阶段

八、组件

1. 简介

Component 组件是可复用的Vue实例,可以将项目中重复出现的页面结构定义为组件

组件会带有一个名称,可以把组件作为自定义元素来使用,相当于是自定义了一个标签

组件分类:

  • 全局组件,在所有Vue实例中都可以使用

  • 局部组件,只能在构建组件的 Vue实例的容器范围内使用

2. 定义组件

通过选项 components:{} 来定义

用法:

XML 复制代码
new Vue({
        el: '#app',
    components: {
        'comp-a': {
            template: '<h3>{{ msg }}</h3>',
            data() {
                return {
                    msg: "aaa"
                }
            }
        }
    }
})

九、组件间数据传递

1. 组件间的关系

页面组件的关系结构,是一个由许多组件构成的树状结构,组件间存在着两种关系:父子关系、非父子关系

默认情况下,每个组件实例都是独立的,组件间无法直接访问数据,因此需要进行组件间的数据传递,也称为组件间的通信

2. 父子组件间的数据传递

2.1 父向子传递数据

技术:属性绑定+数据拦截

步骤:

  1. 父组件在调用子组件时,以属性绑定的方式将要传递的数据绑定在子组件标签上

  2. 在子组件对象中,使用props选项声明获取的数据,进行绑定属性的拦截,即接收来自父组件的数据

2.2 子向父传递数据

技术:事件监听+事件触发

步骤:

  1. 父组件在调用子组件时,监听子组件触发的自定义事件,并在父组件中定义回调方法,用来接收数据

  2. 在子组件中使用vm.$emit(事件名,数据)触发自定义事件

相关推荐
庸俗今天不摸鱼12 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX1873012 分钟前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下19 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox29 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞32 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行32 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581033 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周36 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯