Vue.js -- 基础部分

最新推荐文章于 2023-08-31 07:47:52 发布

CSDN_GMC

最新推荐文章于 2023-08-31 07:47:52 发布

阅读量293

点赞数

本文链接：https://blog.csdn.net/CSDN_GMC/article/details/105538052

版权

Vue.js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

Vue.js

1. vue.js

vue.js 是一套用于构建用户界面的渐进式框架

1.模板引擎：
1.得到一批数据(用户产生的，后端提供的…)
2.将数据动态的组装
3.将组装好的内容添加到页面的指定元素(位置)

2. el：挂载点
template：模板(最终形成ui的原始结构)
data：数据

3. vue 帮助我们做的事情：将data和template相结合，最后添加到挂载点上

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

template 选项
render 选项（函数）

1.1 vue 核心

声明式渲染
组件

2. 引入

我们还是先通过 <script> 的方式来引入 vue
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者保存到本地来引入js文件
<script src="js/vue.js"></script>

3. 组件

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

3.1 组件基本分类

根组件
可复用的功能组件

3.2 根组件的创建

通过 vue 提供的构造函数可以实例化出来一个根组件实例对象
let app = new Vue(创建组件所需要的一些配置选项);

3.3 可复用的功能组件

通过 Vue 提供的静态方法 component 窗口可复用的功能组件
let component1 = Vue.component(创建组件所需要的一些配置选项)
组件配置选项：https://cn.vuejs.org/v2/api/

4. 组件内容渲染

1.模板引擎：
1.得到一批数据(用户产生的，后端提供的…)
2.将数据动态地组装
3.将组装好的内容添加到页面的指定元素(位置)

2. el：挂载点
template：模板(最终形成ui的原始结构)
data：数据

3. vue 帮助我们做的事情：将data和template相结合，最后添加到挂载点上

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

template 选项
render 选项（函数）

4.1 el：挂载点

type : string | Element

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

该选择只对 new 创建的实例有效
如果提供 el ，但是没有提供 template ，则 el 的内容 (中的outerHTML) 将作为 template
如果有template的话，优先选择template中的内容

注意：

el 挂载点不能是body 和 html
当实例被挂载以后，实例对象上就会有一个$el的属性，这个属性中存的内容，就是挂载的元素
vue实例上的内置属性都是以 $ 或者 _ 开头的

4.2 template：模板(最终形成ui的原始结构)

type : string

组件的模板结构（HTML），模板内容会被 vue 进行渲染，生成最终的 HTML 内容，并替换占位（挂载）元素

1.模板生成后，会替换掉挂载点指定的元素
2.每一个独立的模板有且只能有一个顶级的根节点，比如template: `` 里只能有一个<div id="app"></div>
3.如果指定el，且没有template，那么el中的outerHTML将作为template
如果有的话，优先选择template中的内容

vue 渲染
template => VDOM(虚拟dom) => html

4.3 render

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

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

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

https://cn.vuejs.org/v2/guide/render-function.html

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

当 Vue 实例没有 el 选项的时候，它会处于一种未挂载的状态，我们可以通过组件 Vue 实例对象的 $mount 方法来手动挂载，通过该方式，我们也可以达到延迟 Vue 实例的挂载的目的
代码示例：

<body>

    <div id="app"></div>
    
    <script>
        // new Vue({
        //     el:"#app",
        //     template:`
        //         <div id='app'>
        //             <h1>为了明天</h1>
        //         </div>
        //     `,
        // });
        // console.log(app);//是一个对象object <div id="app">...</div>

        // 延迟挂载----------------------------------------------
        let app = new Vue({
            // el:"#app",
            template:`
                <div id='app'>
                    <h1>为了明天</h1>
                </div>
            `,
        });
        
        console.log(app);//是一个vue对象 Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
        app.$mount("#app");//不写这行则不会调用，页面不显示内容
        //指定挂载点 谁调用，指定谁

        // 1.el 挂载点 不能是body 和 html
        // 2.当实例被挂载以后，实例对象上就会有一个$el的属性，
        // 3.vue实例上的内置属性都是以 $ 或者 _ 开头的

    </script>

</body>

5. 组件中的数据（状态）

5.1 data 数据

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

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

5.2 data 的访问

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

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

5.3 data 注意点

在当前模板中可以直接使用(不需要去使用this一类的关键字)
data中的数据命名不要使用 $ _ 开头（因为Vue 解析 data 以后，会把当前data中的数据加载到实例对象）中

6. 模板语法

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

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

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

6.1.1 插值表达式

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

{{表达式}}

<script>
new Vue({
  el: '#app',
  data: {
    title: 'vue 框架'
  },
  template: `<div>{{title}}</div>`
});
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

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

    <script>
        let app = new Vue({
            el: '#app',
            data: {
              title: 'vue 框架'
            }
        });
    </script>
</body>
</html>

6.2 数据到视图的更新

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

响应数据的变化（数据驱动视图）
数据的变化会自动更新视图（自动重新渲染模板）原理：数据劫持
写法1：app.name = ’ ’
写法2：app.$data.name = ’ ’

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

6.3 检测变化的注意事项

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

6.4 扩展

通过 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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <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'
                }
            }
        });
    </script>
</body>
</html>

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

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

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

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

CSDN_GMC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js -- 基础部分

Vue.js基础Vue.js1. vue.js1.1 vue 核心2. 引入3. 组件3.1 组件基本分类3.2 根组件的创建3.3 可复用的功能组件4. 组件内容渲染4.1 el：挂载点4.2 template：模板(最终形成ui的原始结构)4.3 render4.4 使用 $mount 方法延迟 `Vue` 实例的挂载5. 组件中的数据（状态）5.1 data：数据5.2 data 的访问6...
复制链接

扫一扫