vue.js基础

麻烦多加点香菜

已于 2023-12-30 15:50:12 修改

阅读量1.1k

点赞数 12

文章标签： vue.js 前端 javascript

于 2023-12-30 15:32:17 首次发布

本文链接：https://blog.csdn.net/lsj614/article/details/135305272

版权

一、了解vue.js

Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是Vue被设计为可以自底向上逐层应用。Vue的核心库之关心视图层，不仅易于上手，还便于与第三方库或既有项目整合，Vue.js是前端的主流框架之一，和Angular.js，React.js,并成为前端三大主流框架

要使用vue.js需要引用：

也可以不下载直接引用：

通过CDN引入：你可以在HTML文件中通过CDN链接来引入Vue.js。这是最简单的方法，只需在<head>标签中添加以下代码即可：

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

结果：

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

<v-text value="Hello World"></v-text>

v-bind指令用于实现单向动态数据绑定

绑定元素的属性：

<img v-bind:src="imageURL">

v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)

<button v-on:click="onClick">点击我</button>

methods: {
  onClick() {
    console.log('按钮被点击了');
  }
}

当点击按钮时，控制台会输出"按钮被点击了"

v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

v-model主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)

<div id="app">
  <input type="text" v-model="message">
  <p>{{ message }}</p>
</div>

在Vue.js中，每个组件都有一个生命周期，即从创建到销毁的一系列阶段和钩子函数。这些生命周期钩子函数提供了在组件不同阶段执行代码的机会，以便控制和操作组件的行为。

以下是Vue.js的生命周期的主要阶段和钩子函数：

创建阶段：
- beforeCreate：在实例被创建之前调用，此时组件的数据和方法尚未初始化。
- created：在实例被创建之后调用，此时组件的数据和方法已经初始化完成。
挂载阶段：
- beforeMount：在组件挂载到DOM之前调用，此时模板编译或渲染函数尚未被调用。
- mounted：在组件挂载到DOM之后调用，此时模板编译或渲染函数已经被调用，组件已经显示在页面上。
更新阶段：
- beforeUpdate：在组件更新之前调用，此时数据已经发生变化，但DOM尚未更新。
- updated：在组件更新之后调用，此时数据已经发生变化，DOM已经更新完成。
销毁阶段：
- beforeDestroy：在组件销毁之前调用，此时组件实例仍然可用。
- destroyed：在组件销毁之后调用，此时组件实例已经被销毁，不再可用。

关注