Vue基础（Vue实例）

最新推荐文章于 2023-10-16 12:32:14 发布

weixin_45368324

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量814

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45368324/article/details/105542909

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Vue官网：https://cn.vuejs.org/

Vue初步了解

• Vue我们现在学习和使用的是第二代版本
• Vue是渐进式框架
• Vue是一个类
• 每当创建一个实例，就相当于创建一个viewModel监听器:可以监听对应视图和对应数据的相互改变
• 在框架中，框架没有直接操作真正的DOM,而是操作了虚拟的DOM（js对象），
更改数据以后，就会更改虚拟的DOM,然后进行DOM-diff的对比，只需要把发生变化的那个地方进行替换，大大地提高了页面的性能
• 指令：以v-开头，放在行间属性上，有着特殊意义的一些词；就是指令；
• Vue的dom渲染是异步的
• 在Vue中，想更新视图，一定要去更新数据；
• VUE项目优化参考网址：https://www.jianshu.com/p/1896789fc8a8

Vue是渐进式框架

在这里插入图片描述

• 渐进式:类库或者框架都是重量级的，里面包含很多方法，但是实际项目开发中，我们用不到这么多东西，所以在开发他们的时候，会把功能按照模块进行单独开发，使用者可根据自身情况选择一个模块三个模块的导入使用
• vue:基础模块(基础语法、核心实现、组件开发、相关指令等都在这里)
• vue-router:构建SPA单页面应用的路由
• vuex:公共状态管理
• vue-cli: vue脚手架
• components: vue element、 iview、 vux. . .
• 这些东西就是vue全家桶

Vue是MVVM双向数据绑定的框架

• 双向数据绑定的框架:Vue本身实现了数据和视图的相互监听影响
• MVC是单向数据绑定，数据更改可以渲染视图，但是视图更改没有更改数据，需要我们自己在控制层基于change事件实现数据的更改( REACT)
• m: model 数据层
• v: view 视图层（视图：浏览器打开页面）
• vm:viewModel 实际上，数据层和视图层不能直接通信，需要通过vm进行数据传递，vm中有一个观察者，当model中数据发生改变以后，会通知视图进行对应的视图更新；当视图发生改变，vm也能监听到视图的变化，通过元素的DOM事件进行监听视图是否发生改变，如果改变，通知数据进行更改；

• 数据影响视图；当vue中的data数据发生改变，视图也会发生改变；
• 视图层改变: vm也会帮我们把数据重新更改
• 参考网址：https://www.jianshu.com/p/ea201ccc9ba9
在这里插入图片描述

写在Vue实例参数对象里的属性

• el : element 当前监听器监听的视图(基于querySelector获取),代表Vue的语法的范围,相当于获取dom元素
• data : 当前监听器监听的数据 (这些监听的数据会挂载到vm实例上，也就是vm.msg=xxx来操作了),
data可以传一个对象，或者传一个函数return一个对象，如果是函数，函数中的this指向vue实例
• data中的数据如果数组中某一项发生改变，不能引起视图的更新；
如果是对象的属性名对应的属性值更新，会引发视图的更新；
• 数组内置的方法，能够引发原数组发生变化，可以引发视图的更新
• methods : 这里面存储的是键值对。给元素绑定的事件的方法，需要放在methods中，methods中的方法名不能和data中属性重名(因为vue会先到data中查找属性，data没有才会来methods查找，如果data中有这个属性，那么就会采用data的属性值)，事件函数中的this指向当前vue的实例，事件函数可以传参

Vue 核心

    - 声明式渲染

    - 组件

引入

    我们还是先通过 \ 的方式来引入 vue

在这里插入图片描述

组件

vue 的核心功能之一就是组件

在这里插入图片描述

组件基本分类

根组件
可复用的功能组件

根组件的创建

通过 vue 提供的构造函数可以实例化出来一个根组件实例对象

let app = new Vue(创建组件所需要的一些配置选项);

可复用的功能组件

通过 Vue 提供的静态方法 component 窗口可复用的功能组件

let component1 = Vue.component(创建组件所需要的一些配置选项);

组件配置选项：
https://cn.vuejs.org/v2/api/

组件内容渲染

渲染一个组件的内容可以通过两种方式来进行

template 选项
render 选项（函数）

template（模板）

• template 模板 : 如果有template属性，当初始化实例时，会把template的属性值编译并替换掉el属性里的App元素
• template中只能有一个根元素，如果有两个，会默认取第一个作为根元素（会报错）
• template中可以获取到data中数据和methods中的方法
• template有两种写法
• 第一种可以直接在vue实例中以字符串格式写出模板内容
• 第二种在vue实例中以字符串写出标签的id名，并在html中在标签中，写出模板的内容

在这里插入图片描述
type : string

组件的模板结构（HTML），模板内容会被 vue 进行渲染，生成最终的 HTML 内容，并替换占位（挂载）元素
在这里插入图片描述

el

在这里插入图片描述

type : string | Element

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例，

该选择只对 new 创建的实例有效
如果提供 el ，但是没有提供 template ，则 el 的内容讲作为 template

使用 $mount 方法延迟 `Vue` 实例的挂载

当 Vue 实例没有 el 选项的时候，它会处于一种未挂载的状态，我们可以通过组件 Vue 实例对象的 $mount 方法来手动挂载，通过该方式，我们也可以达到延迟 Vue 实例的挂载的目的
在这里插入图片描述

render

type : (createElement: () => VNode) => VNode

发挥 JavaScript 最大的编程能力，直接创建 VNode （虚拟dom对象），优先级高于 el 和 template

有更强大的编程能力
有更高的性能

详细看文档：
https://cn.vuejs.org/v2/guide/render-function.html

组件中的数据（状态）

data

组件内部使用的数据，data 是一个对象，data 中的值可以中模板中直接访问

Vue 实例组件（根组件）的 data 是一个对象
可复用功能组件的 data 必须是一个函数，且该函数必须返回一个对象（因为复用性，避免多个组件实例引用同一个对象。换句话说，组件中使用的数据必须是一个对象，但是可复用组件的这个数据对象必须通过函数返回

data 的访问

data 数据可以直接通过组件实例对象访问，也可以通过实例对象下的 $data 属性进行访问

组件实例对象下有很多的以 $ 开头的属性，这些都是实例对象内置的一些属性和方法，vue 为了区分数据与内置属性方法，内置的属性和方法默认都是以 $ 开始的，所以我们中数据中应该避免使用 $ 开头的数据

在这里插入图片描述

模板语法

vue 使用了基于 html 的模板语法，使用声明式的方式把实例中的数据（data）与 DOM 进行绑定，data 中的数据在模板中可以直接使用

Mustache（双大括号，大胡子）语法

在 vue 中，我们是通过一对双大括号把实例中的数据渲染到模板内容中

• {{ }} ：小胡子语法，写在标签中的语法，小胡子语法可以将data中数据放入元素中。
• 小胡子语法支持表达式
• null 和undefined不能被解析
• 支持三元运算符

插值表达式

在 {{ }} 中，我们可以放置表达式值

在这里插入图片描述

数据到视图的更新

vue 会把 data 中的数据挂载到实例属性下，同时对它们进行主动的监听拦截，当数据发生变化的时候，重新渲染模板。我们可以通过实例对象对数据进行修改
在这里插入图片描述

app.title = '开课吧';
// or
app.$data.title = '开课吧';

在这里插入图片描述

数据劫持

手动更新视图：

在这里插入图片描述

Vue更新视图原理：

在这里插入图片描述

视图更新问题：

//问题：无法对新增的属性进行监听(只能监听一个)
//解决办法：对新增属性就加一个数挥劫持

在这里插入图片描述

检测变化的注意事项

在 vue3 之前，数据的监听是通过 Object.defineProperty 方法来实现的，但是该方法只能监听拦截单个数据，对于对象新增属性无法监听拦截。所以，对于数据对象中新增的属性，我们需要调用 vue 提供的方法来进行处理

扩展

通过 Object.defineProperty 监听拦截中存在一些问题

对象新增属性
数组方法：push、pop、shift、unshift、splice、sort、reverse
数组新增值：[]
数组 length 属性

以上的操作中并不会触发监听拦截

vue 对数组中的 push、pop 等方法进行重新包装，所以在 vue 中调用这些方法，可以对数组的修改进行监听拦截

https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95-mutation-method

使用 Vue.set 方法添加新数据

    <div id="app">
        <p>title: {{title}}</p>
        <p>user.username: {{user.username}}</p>
        <p>user.gender: {{user.gender}}</p>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                title: 'vue 框架',
                user: {
                    username: 'zMouse'
                },
                arr:[1,2,3,4,5]
            }
        });
    </script>

在模板中，我们使用了一个不存在的数据 user.gender

如果我们通过 app.user.gender = '男'的方式来新增，是不会被 vue 拦截监听处理的，我们需要使用

Vue.set(app.user, 'gender', '男');
// 实例.$set 是 Vue.set 的别名
app.$set(app.user, 'gender', '男');

这样的方式，set 方法给 app.user 添加 gender 属性的同时，对它进行了 defineProperty

weixin_45368324

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
Vue基础（Vue实例）

组件vue 的核心功能之一就是组件组件基本分类根组件可复用的功能组件根组件的创建通过 vue 提供的构造函数可以实例化出来一个跟组件实例对象let app = new Vue(创建组件所需要的一些配置选项);组件配置选项：https://cn.vuejs.org/v2/api/组件内容渲染渲染一个组件的内容可以通过两种方式来进行template 选项ren...
复制链接

扫一扫