前端小白来说说vue的基础介绍

最新推荐文章于 2024-04-21 02:48:42 发布

caoliangya520

最新推荐文章于 2024-04-21 02:48:42 发布

阅读量160

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45494667/article/details/107318110

版权

1.vue的基础介绍

vue是一个渐进式的框架

什么是渐进式？

如果只是想使用vue最基础的声明式渲染，那么vue是完全可以当做一个模版引擎来使用。
如果想使用组件化开发，那么可以使用vue里面的组件系统。
如果想要开发单页应用，那么可以使用vue里面的客服端理由。
如果你的组件越来越多，组件之间需要传递数据，那么可以使用vue的状态管理工具vuex。

框架与库的区别？

库：例如jQuery、lodash、layui、eayui，库的特点在于，给我们提供很方法，我们直接来使用这些方法来写代码即可

框架：从字面可以理解为一个架子，最大的特点就是给我们提供弄了一整套解决方案。在使用框架的时候，就需要遵循框架的规范和要求。

vue中文官网： https://cn.vuejs.org/

2.安装

官网中介绍了几种vue的安装方式，对于初学者建议使用cdn的方式。

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

快速入门实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{name}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                name:"f67"
            }
        })
    </script>
</body>
</html>

模版插值

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

<div id="app">
        {{name}}
</div>

构造器

  new Vue({
            el:"#app",
            data:{
                name:"f67"
            }
            
 })

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

vue实例上面的属性，为了区分用户自定义

<body>
    <div id="app">
        {{name}}
        {{age}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const app=  new Vue({
            el:"#app",
            data:{
                name:"f67",
                age:"23"
            }
            
        })
        console.log(app.$el===document.getElementById("app"));
        app.$watch('name',function(newValue,newValue){
 console.log(`(newValue)`);
 console.log(`(newValue)`);
        })
    </script>
</body>
</html>

在上面的代码中， $e 表示 v u e 的挂载元素，$ watch表示监听某一个数据的变化
在这里插入图片描述
各个阶段的说明如下：

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

⽣命周期示例代码：

<body>
 <div id="app">
 <!-- this is a test -->
 {{ message }}
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
 var app = new Vue({
 el: '#app',
 data: {
 message: "this is a test"
 },
 beforeCreate: function () {
 console.group('beforeCreate 创建前状态===============》');
 console.log("%c%s", "color:red", "el : " + this.$el); //
undefined
 console.log("%c%s", "color:red", "data : " + this.$data); //
undefined
 console.log("%c%s", "color:red", "message: " + this.message);
// undefined
 },
 created: function () {
 console.group('created 创建完毕状态===============》');
 console.log("%c%s", "color:red", "el : " + this.$el); //
undefined
 console.log("%c%s", "color:red", "data : " + this.$data); //
已被初始化
 console.log("%c%s", "color:red", "message: " + this.message);
// 已被初始化
 },
 beforeMount: function () {
 console.group('beforeMount 挂载前状态===============》');
 console.log("%c%s", "color:red", "el : " + (this.$el)); //
已被初始化
 console.log(this.$el);
 console.log("%c%s", "color:red", "data : " + this.$data); //
已被初始化 
 console.log("%c%s", "color:red", "message: " + this.message);
// 已被初始化 
 },
 mounted: function () {
 console.group('mounted 挂载结束状态===============》');
 console.log("%c%s", "color:red", "el : " + this.$el); // 已
被初始化
 console.log(this.$el);
4. vue 和 jquery 的区别
在 jquery 年代，当我们从服务器拿到数据以后，需要⼿动的进⾏更新。
 console.log("%c%s", "color:red", "data : " + this.$data); //
已被初始化
 console.log("%c%s", "color:red", "message: " + this.message);
// 已被初始化
 },
 beforeUpdate: function () {
 console.group('beforeUpdate 更新前状态===============》');
 console.log("%c%s", "color:red", "el : " + this.$el);
 console.log(this.$el);
 console.log("%c%s", "color:red", "data : " + this.$data);
 console.log("%c%s", "color:red", "message: " + this.message);
 },
 updated: function () {
 console.group('updated 更新完成状态===============》');
 console.log("%c%s", "color:red", "el : " + this.$el);
 console.log(this.$el);
 console.log("%c%s", "color:red", "data : " + this.$data);
 console.log("%c%s", "color:red", "message: " + this.message);
 },
 beforeDestroy: function () {
 console.group('beforeDestroy 销毁前状态===============》');
 console.log("%c%s", "color:red", "el : " + this.$el);
 console.log(this.$el);
 console.log("%c%s", "color:red", "data : " + this.$data);
 console.log("%c%s", "color:red", "message: " + this.message);
 },
 destroyed: function () {
 console.group('destroyed 销毁完成状态===============》');
 console.log("%c%s", "color:red", "el : " + this.$el);
 console.log(this.$el);
 console.log("%c%s", "color:red", "data : " + this.$data);
 console.log("%c%s", "color:red", "message: " + this.message)
 }
 })
 </script>
</body>