Vue(一)1.基础

最新推荐文章于 2022-08-31 23:25:05 发布

onjulythe17th

最新推荐文章于 2022-08-31 23:25:05 发布

阅读量868

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42809433/article/details/107717938

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Vue.js

vue.js

在这里插入图片描述

vue.js 是一套用于构建用户界面(模板引擎)的渐进式）框架

渐进式

在这里插入图片描述

Vue 核心

声明式渲染
组件

引入

我们还是先通过 <script> 的方式来引入 vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

组件

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

在这里插入图片描述

组件基本分类

根组件
可复用的功能组件

根组件的创建

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

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

[vue组件，配置（声明式）构建方式
React组件，命令式]

对于React
        render函数:确定组件的视图
        class MyComponent extends React.Component{

        }
        ReactDOM.render(
            <MyComponent>,
            document.querySelector('#app')
        )

对于Vue
        let app = new Vue({
            el:'#app',//挂载点
            template:`
                <div>这是vue</div>
            `          //最后组件产生的视图覆盖掉挂载点
        })

        如果不写el挂载点，只有模板。使用app对象.$mount('#app');手动挂载

可复用的功能组件

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

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

注意事项:
[React中区分原生元素和自定义组件，原生：div(小写)，自定义组件Div(首字母必须大写)
Vue中，必须小写。
Vue：注册时：驼峰MyComponent。使用：my-component。Vue在遇到的时候也会自动解析成驼峰式的MyComponent去在注册的组件中寻找。]

<body>

    <div id="app">
        <h1>这是vue</h1>
        <hr />
        <my-component></my-component>
        <my-component></my-component>
        <!--注意转换规则:驼峰变串-->
    </div>

    <script src="js/vue.js"></script>

    <script>

        Vue.component('MyComponent', {//注意转换规则:驼峰变串
            template: `
                <div>MyComponent</div>
            `
        });

        let app = new Vue({
            el: '#app'
        });

    </script>

</body>

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

组件内容渲染

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

template 选项
render 选项（函数）

template

type : string

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

el

type : string | Element

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

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

render

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

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

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

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

         /**
         * vue:  template -> vNode -> HTML
         * react:   JSX -> VDOM -> HTML
         */
        let app = new Vue({
            el: '#app', // 挂载点不能是html、body元素
            template: `<div>开课吧</div>`,
            render(createElement) {
                // render优先级高于其他视图处理
                // return `<div>开课吧</div>`;

                let vNode = createElement(
                    'div',
                    '开课吧123'
                );
                // console.log(vNode);

                /**
                 * vNode 类似原生中的 元素对象
                 */
                // let div = document.createElement('div');
                // let text = document.createTextNode('开课吧');
                // div.appendChild(text);
                // console.dir(div);

                return vNode;

            }
        });

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

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

渲染的3个注意事项

        /**
         *  // 挂载点不能是html、body元素
         */
        let app = new Vue({
            el: 'body',
            template: `<div>开课吧</div>`
        });

        /**
         * 每一个组件有且只能有一个顶级元素
         */
        let app = new Vue({
            el: '#app',
            template: `<div>开课吧</div><div>开课吧</div>`
        });

        /**
         * 如果一个组件没有template也没有render，那么el（挂载点）的outerHTML就作为模板
         */
        let app = new Vue({
            el: '#app'
        });

组件中的数据（状态）

data

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

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

data 的访问

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

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

模板语法

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

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

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

插值表达式

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

{{表达式}}

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

<!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>

[ps.这个自动产生的get和set是Object.defineProperty弄出来的。关于Object.defineProperty详见下文]
在这里插入图片描述

    <script>

        /**
         * 组件数据
         *      react - state
         *      vue - data
         *
         * 因为 data 中的数据会被遍历挂载到实例对象上，所以
         *  data 中的数据命名要注意，不要和实例本身的一些属性方法重名
         *      _和$开头的属性都是vue实例内置的属性和方法
         *          _：内置私有属性和方法，内部使用，不建议外部调用的
         *          $：内置属性和方法，可以在外部调用
         */

        let app = new Vue({
            el: '#app',
            data: {
                n: 1
            }
        });

        // class Vue {
        //     constructor(options) {
        //         this.$data = options.data;
        //         this.n = this.$data.n;
        //     }
        // }

        console.log(app);
        console.log(app.$data);
        console.log(app.n);

    </script>

数据到视图的更新

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

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

检测变化的注意事项

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

Object.defineProperty扩展

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

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

[常规用法:（不触发监听拦截）]

<script>

    let arr1 = ['k', 'k', 'b'];

    // console.log(arr1);

    for (let key in arr1) {
        Object.defineProperty(arr1, key, {
            get() {

            },
            set() {

            }
        })
    }

</script>

[以上的操作中并不会触发监听拦截：]
在这里插入图片描述

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对象里面定义好的属性，因为Vue对整个对象进行了代理]

Vue和React在数据拦截上的区别

数据变化以后渲染函数

<script>

    function render() {
        console.log('渲染');
    }

    let obj = {
        x: 1,
        y: 2
    };

    // vue
     for (let key in obj) {
         Object.defineProperty(obj, key, {
             get() {
    
             },
             set() {
                 render();//修改x或者y后会触发render()打印‘渲染’
             }
         })
     }

    // react
    // 函数
     function setState(newValues) {
         obj = Object.assign(obj, newValues);
         render();
     }

     setState({
         x: 2
     })
</script>

使用 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 拦截监听处理的，我们需要使用

/**
         * 不要通过 . 的方式去给 data 中的对象增加新的属性，因为不能通过 vue 进行 defineProperty 处理
         *  Vue 把内部对 data 进行 拦截处理 api 提供了出来
         *          Vue.set(app.user, 'gender', '男');
                    实例.$set 是 Vue.set 的别名
                    app.$set(app.user, 'gender', '男');
         */
Vue.set(app.user, 'gender', '男');
// 实例.$set 是 Vue.set 的别名
app.$set(app.user, 'gender', '男');

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

onjulythe17th

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(一)1.基础

Vue.js文章目录Vue.jsvue.js渐进式Vue 核心引入组件组件基本分类根组件的创建可复用的功能组件组件内容渲染templateelrender使用 $mount 方法延迟 `Vue` 实例的挂载组件中的数据（状态）datadata 的访问模板语法Mustache（双大括号，大胡子）语法插值表达式数据到视图的更新检测变化的注意事项扩展使用 Vue.set 方法添加新数据vue.js[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXDNylyT-1596187
复制链接

扫一扫