Vue笔记

最新推荐文章于 2024-11-08 11:26:10 发布

普洱有点咸

最新推荐文章于 2024-11-08 11:26:10 发布

阅读量54

点赞数

文章标签： vue.js 笔记前端

本文链接：https://blog.csdn.net/zyx1234321/article/details/134157509

版权

一、Vue 简介

渐进式 JavaScript 框架

易用 html css javascript
高效开发前端页面非常高效
灵活开发灵活多样性

Vue 是渐进式 javascript 框架: 让我们通过操作很少的 DOM，甚至不需要操作页面中任何 DOM 元素，就很容易的完成数据和视图绑定、双向绑定 MVVM。

下载 Vue

开发版本：

生产版本：

二、Vue 基础语法

总结：

Vue 实例对象中 el 属性：代表 Vue 的作用范围，在 Vue 的作用范围内都可以使用 Vue 的语法。
Vue 实例对象中 data 属性：用来给 Vue 实例绑定一些相关数据，绑定的数据可以通过 {{ xx }} 在 Vue 作用范围内取出。
在使用 {{ xx }} 进行获取 data 中数据时,可以在 {{ }}中书写表达式、运算符、调用相关方法以及逻辑运算等。
el 属性中可以书写任意的 CSS选择器[jquery选择器]，但是在使用 Vue 开发推荐使用 id选择器。

v-text：显示文本

v-text：用来获取 data 中数据将数据以文本的形式渲染到指定标签内部，类似于 javascript 中 innerText。

{{ xx }}（插值表达式）和 v-text 获取数据的区别在于：

使用 v-text 取值会将标签中原有的数据覆盖，
插值表达式的形式不会覆盖标签原有的数据。
使用 v-text 可以避免在网络环境较差的情况下出现插值闪烁。（已修复）

v-html：显示解析html标签的文本

v-html：用来获取 data 中数据将数据中含有的 html 标签先解析在渲染到指定标签的内部，类似于 javascript 中 innerHTML。

v-on：事件绑定

v-on：事件绑定

v-on:click 可以简化成 @click
事件函数可以简写，dowork: function() {} 可以简写成 dowork() {}

v-show：控制页面元素隐藏与显示(display控制)

v-show：用来控制页面中某个标签元素是否展示，底层通过控制元素的 display 属性来进行标签的显示和不显示控制。

在 v-show 中可以直接书写 boolean 值控制元素展示
在 v-show 中可以通过变量控制标签展示和隐藏。
在 v-show 中可以通过 boolean表达式 控制标签的展示和隐藏。

v-if：控制页面元素隐藏与显示(dom操作)

v-if：用来控制页面中的标签元素是否展示，底层通过对 dom 树节点进行添加和删除来控制展示和隐藏。

v-bind：绑定标签的属性

v-bind：用来绑定 标签的属性 从而通过 vue 动态修改标签的属性。

v-bind : 属性 可以简写成 : 属性

v-for：遍历对象

v-for：用来对对象进行遍历的（JavaScript 中数组也是对象的一种）

在使用 v-for 的时候一定要注意加入:key 用来给 Vue 内部提供重用和排序的唯一 key
遍历时可以获取索引 index、…

v-model：实现双向绑定

v-model：用来绑定 标签元素的值 与 vue实例对象中data数据 保持一致，从而实现 双向的数据绑定机制。

所谓双向绑定，就是表单中数据变化导致 vue 实例 data 数据变化，vue 实例中 data 数据的变化导致表单中数据变化。

MVVM 架构双向绑定机制
Model：数据 Vue实例中绑定数据
View：页面页面展示的数据
VM：ViewModel 监听器

事件修饰符

修饰符作用：用来和事件连用，决定事件触发条件或者是阻止事件的触发机制。

常用的事件修饰符：

.stop：用来阻止事件冒泡。
.prevent：用来阻止标签的默认行为。
.capture
.self：只触发自己标签的上特定动作的事件，不监听事件冒泡。
.once：让指定事件只触发一次。
.passive

按键修饰符

作用：用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符。

常用按键修饰符：@keyup.xxx="function "

三、Axios 基本使用

参考中文网站：https://www.kancloud.cn/yunye/axios/234845

四、Vue 生命周期

生命周期钩子 ====> 生命周期函数

在这里插入图片描述

methods: {
        changeData() {
          // this.msg = "Vue.js niubility!";
          this.msg = Math.random();
        }
      },
      // ====================初始化阶段====================
      // 1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性
      beforeCreate() {
        console.log("beforeCreate: " + this.msg);
      },
      // 2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
      created() {
        console.log("created:" + this.msg);
      },
      // 3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译
      beforeMount() {
        console.log("beforeMount: " + document.getElementById("sp").innerText);
      },
      // 4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
      mounted() {
        console.log("Mounted: " + document.getElementById("sp").innerText);
      },
      // ====================运行阶段====================
      // 5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据
      beforeUpdate() {
        console.log("beforeUpdate-vue: " + this.msg);
        console.log("beforeUpdate-dom: " + document.getElementById("sp").innerText);
      },
      // 6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  页面中数据已经和data中数据一致
      updated() {
        console.log("updated-vue: " + this.msg);
        console.log("updated-dom: " + document.getElementById("sp").innerText);
      },
      // ====================销毁阶段====================
      // 7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
      beforeDestory() { },
      // 8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
      destoryed() { }
    });