vue基础知识

weixin_49115633

已于 2024-01-22 15:57:13 修改

阅读量352

点赞数 5

文章标签： vue.js 前端 javascript

于 2024-01-22 13:13:16 首次发布

本文链接：https://blog.csdn.net/weixin_49115633/article/details/135743379

版权

一、vue 项目生成。

vue项目可以使用脚手架工具生成。结构如下：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

vue项目可以通过页面引入vue.js ,直接在html中使用

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
    <div  id="app"></div>
    <script>
    const v= new Vue({
            el:"#app",
            render:(h)=>{
                return  h("h1","heheheh")
            }
        })
    </script>
</body>

两者本质没什么区别。前者写到了src/main.js 中，这个文件最终也会被webpack打包到成js ,插入到Html页面中。

二、vue 数据注入

vue中data, computed, methods 会被注入到 vue实例中

<body>
    <div id="app"></div>
    <script>
        const v = new Vue({
            el: "#app",
            data: {
                a: 5,
                b: 3
            },
            computed: {
                num() {
                    return this.a + this.b
                }
            },
            methods: {
                getSum() {
                    console.log("求和了")
                    return this.a + this.b
                }
            },
            render: (h) => {
                return h("h1", "heheheh")
            }
        })
    </script>
</body>

这样，v实例是一个对象包括，data, computed, methods这三个注入的基本数据，以及vue自带的一些方法：$mount等等。

三、虚拟DOM树

直接操作真实DOM会引发严重的效率问题，vue使用虚拟DOM（vnode)的方式来描述要渲染的html结构，其本质是一个js对象。(其实和react比较相似）

var vnode={
    tag: 'h1',
    children:[
        {tag:undefined,text:"hello vue"}
    ]
}

其对应的html结构为

<h1>hello vue</h1>

当data里面的数据发生变化时候，虚拟DOM(vnode)也跟着变化，寻找与之前vnode的差距，进行局部的渲染，提高了效率。

四、vue 将哪些内容生成vnode

所有的，最终都要转成（1）这种形式，优先级为（1）>（2）>（3）当三个，同时存在时候，只有优先级高的生效，如图，渲染结果为hello vue

五、挂载

（1）和（2）效果是一摸一样的。将生成的虚拟dom 挂在到Html的某个位置上，完成虚拟dom到真实dom的转变。

六，全流程

七、全局组件

八、局部组件

weixin_49115633

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
vue基础知识

直接操作真实DOM会引发严重的效率问题，vue使用虚拟DOM（vnode)的方式来描述要渲染的Node是一个普通的js对象，用于描述html结构。所有的，最终都要转成（1）这种形式，优先级为（1）>（2）>（3）当三个，同时存在时候，只有优先级高的生效，如图，渲染结果为hello vue。前者写到了src/main.js 中，这个文件最终也会被webpack打包到成js ,插入到Html页面中。将生成的虚拟dom 挂在到Html的某个位置上，完成虚拟dom到真实dom的转变。其对应的.html结构为。
复制链接

扫一扫