你可能想看的Vue的基础使用

最新推荐文章于 2023-02-12 14:16:20 发布

weixin_47106909

最新推荐文章于 2023-02-12 14:16:20 发布

阅读量54

点赞数

本文链接：https://blog.csdn.net/weixin_47106909/article/details/105587980

版权

Vue的基础使用

vue.js 是一套用于构建用户界面的渐进式框架
引入的两种方式：
1.引入网址路径

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

2.引入本地路径

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

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

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

1.我们指定元素是谁呢，就是el
2.el: 挂载点
3.temlplate: 模板（最终形成  ui 或者说是 用户界面  的原始结构）
4.data: 数据

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

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

template 选项
render 选项（函数）

el:
type : string | Element
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例，
该选择只对 new 创建的实例有效
如果提供 el ，但是没有提供 template ，则 el 的内容讲作为 template

render函数
发挥 JavaScript 最大的编程能力，直接创建 VNode （虚拟dom对象），优先级高于 el 和 template
-有更强大的编程能力
-有更高的性能
看以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 
        虚拟DOM
        1.  {
            tag:'1'
            attrs:{id:'#app'}
            children:'1906'
        }
        2.  {
            tag:'div'
            attrs{id:'#app'}
            children:[
            {
                tag:"h1"
                attrs:{id:'#h'},
                children:'1906'
            }
            ]
        }
     -->
   <div id="app">
       <h1>今天是4月中旬</h1>
   </div>
   <script>
      new Vue({
           el:'#app',
           render(createElement){
            //    return createElement("h1","1906");
            return createElement("div",{attrs:{id:'app'}},[
                createElement('h1',{attrs:{id:'h'}},'1906')
            ]);
           }
           
       })



    //    function createElement(tag,attrs,children){

    //    }



   
   </script>
</body>
</html>

挂载：
指定挂载点
注意点：el挂载点不能是body 和 html

<script>
       //延迟挂载
      let app = new Vue({
        //    el:'#app',
           template:`
           <div id='app'>
                <h1>为了明天</h1>
           </div>
           `
       })
       console.log(app);

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

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

<script>
       let app = new Vue({
           el:"#app",
           template:`
                <div id='app'>
                    <h1>{{name}}</h1>
                </div>
            `,
            data:{
                name:"上课啦"
            }
       })
       console.log(app);

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

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

 let app = new Vue({
           el:"#app",
            data:{
                name:"上课啦"
            }
       })
       console.log(app);

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

let $data = {x:1};
    Object.defineProperty(obj,'x',{
        set(newVale){
            $data.x = newVale;
            render();

        },
        get(){
            return  $data.x;
        }
    })

问题：无法对新增的属性进行监听

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

属性新增属性
数组方法：push、pop、shift、unshift、splice、sort、reverse
数组新增值：[]
数组 length 属性
以上的操作中并不会触发监听拦截

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

weixin_47106909

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
你可能想看的Vue的基础使用

Vue的基础使用vue.js 是一套用于构建用户界面的渐进式框架引入的两种方式：1.引入网址路径 1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2.引入本地路径 1. <script src="js/vue.js"></script>组件...
复制链接

扫一扫