Vue基础学习笔记

最新推荐文章于 2024-09-10 11:56:39 发布

渴求sspOffer的小周同学

最新推荐文章于 2024-09-10 11:56:39 发布

阅读量669

点赞数 24

分类专栏：大二下暑期集训文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/ngczx/article/details/140936638

版权

大二下暑期集训专栏收录该内容

44 篇文章 0 订阅

订阅专栏

Vue基础

一、Vue

1. 简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的 JavaScript 框架
它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型
由个人维护：尤雨溪，华人
官网 https://cn.vuejs.org/

2. 基本使用

Vue的页面使用方式：

在页面中直接引入Vue核心库的js文件
该方式只是为了让开发者在学习Vue语法时可以快速掌握
实际上Vue并不适合直接使用页面方式进行语法定义，更推荐使用模块化方式

使用步骤：

获取Vue核心库的js文件

通过地址 https://cdn.jsdelivr.net/npm/vue/dist/vue.js 下载
在页面中引入Vue
```
<script src="js/vue.js"></script>
```
创建Vue实例并应用

3. 调试工具

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

步骤：

打开Chrome浏览器的扩展程序——>更多扩展程序
将vue_devtools_6.5.0.crx拖放到扩展程序中

在VSCode中安装Vue相关插件：Vue-Official、vue-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）是用来监视数据的变化，对数据进行监控

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实例，可以将项目中重复出现的页面结构定义为组件

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

2. 定义组件

通过选项 components:{} 来定义

用法：

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