vue实例基础1

最新推荐文章于 2024-07-20 16:46:53 发布

置顶 diosa44

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量113

点赞数

分类专栏： vue 文章标签： vue.js javascript html node.js css

本文链接：https://blog.csdn.net/weixin_45765280/article/details/107325059

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue的基本介绍

vue是一个渐进式框架
框架与库的区别
：库：例如jQuery，layui,easyui；库的特点在于给我们提供了很多方法，我们直接使用这些方法写代码即可
：框架：从字面上可以理解为一个架子，最大的特点就是给开发者提供了一整套解决方案，我们使用框架的时候就需要遵循框架的规范和要求
什么是渐进式？
：如果只是想使用vue 最基础的声明式渲染，那么vue完全可以当初模板引擎来使用
：如果你想要使用组件化开发，那么可以使用vue里面的组件系统
：如果想要开发单页应用，那么可以使用vue里面的客户端路由
：如果你的组件越来越多，组件之间需要数据传递，可以使用vue的状态管理工具vuex

vue的安装

官网中介绍了好几种vue安装方式，初学者建议使用cdn
```
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```
接下来我们来看一个入门实例

<body>
    <div id="app">
        {{name}} //模板（占位符）
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({//实例化一个vue
            el:"#app" ,//挂载点
            data: { //存放数据
                name:"f67"
            }
        })
    </script>
</body>

模板插值
：上面的代码就是使用到了vue中的声明式渲染，这里我们就是将vue 当作是一个模板引擎来使用，{{name}}就相当于是一个占位符

<div id="app">
        {{name}} //模板（占位符）
</div>

构造器
：每一个vue的应用都需要使用vue构造函数来实例化出来一个vue实例

new Vue({//实例化一个vue
            el:"#app" ,//挂载点
            data: { //存放数据
                name:"f67"
            }
    })

：化vue对象的时候，我们传入了一个选项对象，该选项对象中，包含了挂载元素和数据，当然，还有更多的选项，例如生命周期，方法，计算属性等

vue实例上面的属性，为了区分用户自定义的属性和方法，vue中的属性和方法一般前面会有一个$符号

<body>
    <div id="app">
        {{name}}
        {{score}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({//实例化一个vue  特点：双向绑定
            el: "#app",//挂载点
            data: { //存放数据
                name: "f67",
                score: 100,
            }
        })
        console.log(app.$el === document.getElementById("app"));//找到你所挂载的节点
        //监听数据的改变
        app.$watch("name", function (newValue, oldvalue) {
            console.log("更新前", oldvalue);
            console.log("更新后", newvalue);
        })
    </script>
</body>

注：上面的代码中， $e l 表示 v u e 的挂载元素，$ watch 表示监听某一个数据的变化

生命周期

当vue进行初始化的时候，会进行一系列的过程，我们可以简单将生命周期理解为事件，在不同的生命周期中，我们可以插入不同的函数，来做一些额外的事情

在这里插入图片描述

各个阶段的说明
：beforeCreate：在实例开始初始化时同步调⽤。此时数据观测、事件等都尚未初始化。
：created：在实例创建之后调⽤。此时已完成数据观测、事件⽅法，但尚未开始 DOM 编译，即未挂载到 document 中。
：beforeMount：在 mounted 之前运⾏。
：mounted：在编译结束时调⽤。此时所有指令已⽣效，数据变化已能触发 DOM 更新，但不保证
$el 已插⼊⽂档。
：beforeUpdate：在实例挂载之后，再次更新实例（例如更新 data）时会调⽤该⽅法，此时尚未更
新 DOM 结构
：updated：在实例挂载之后，再次更新实例并更新完 DOM 结构后调⽤。
：beforeDestroy：在开始销毁实例时调⽤，此刻实例仍然有效。
：destroyed：在实例被销毁之后调⽤。此时所有绑定和实例指令都已经解绑，⼦实例也被销毁
：activated：需要配合动态组件 keep-live 属性使⽤。在动态组件初始化渲染的过程中调⽤该⽅法。
：deactivated：需要配合动态组件 keep-live 属性使⽤。在动态组件初始化移出的过程中调⽤该⽅
法。

vue和框架的区别

在jQuery年代，当我们从服务器拿到数据后，需要手动修改DOM元素
vue这种mvvm框架，就可以做到，前端数据改变，视图自动刷新

diosa44

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue实例基础1

vue的基本介绍vue是一个渐进式框架框架与库的区别：库：例如jQuery，layui,easyui；库的特点在于给我们提供了很多方法，我们直接使用这些方法写代码即可：框架：从字面上可以理解为一个架子，最大的特点就是给开发者提供了一整套解决方案，我们使用框架的时候就需要遵循框架的规范和要求什么是渐进式？：如果只是想使用vue 最基础的声明式渲染，那么vue完全可以当初模板引擎来使用：如果你想要使用组件化开发，那么可以使用vue里面的组件系统：如果想要开发单页应用，那么可以使用vue里面的客
复制链接

扫一扫