Vue教程大全（自用）

最新推荐文章于 2024-09-28 17:32:53 发布

樱花殿张公子

最新推荐文章于 2024-09-28 17:32:53 发布

阅读量57

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43243842/article/details/126020491

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的核心功能，如v-bind的单向数据绑定，v-model的双向绑定用于表单交互，以及v-if和v-for指令的使用。同时，详细阐述了Vue实例的生命周期，包括beforeCreate、created、mounted等关键阶段。还提到了VueRouter的参数获取和页面跳转，以及Element-Plus组件库中的输入框元素。

摘要由CSDN通过智能技术生成

核心功能

<span v-bind:title="message">v-bind单向绑定任意属性</span>

<input v-model="message">V-model双向绑定value属性（input、textarea、select标签）必须在data中初始定义变量
new Vue({
  data: {message: 'Hello Vue!'}
})

v-model写表单代码直接参考https://v3.cn.vuejs.org/guide/forms.html#基础用法

<button v-on:click="reverseMessage">调用方法反转消息</button>
methods: {
  reverseMessage: function () {this.message = this.message.split('').reverse().join('')}
}

<p v-if="seen">是否渲染（重量级）</p>
<p v-if="seen">是否显示（轻量级）</p>

<li v-for="info in infoList">
  {{ info.text }}
</li>
new Vue({
  data: {  
    infoList: [{ text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' }]  
  }
})

2.1 beforeCreate
在vue实例生成之前会自动执行的函数

2.2 created
在vue实例生成之后会自动执行的函数

2.3 beforeMount
在组件内容被渲染到页面之前自动执行的函数

2.4 mounted
在组件内容被渲染到页面之后自动执行的函数

2.5 beforeUpdate
当data中的数据发生变化前执行的函数

2.6 updated
当data中的数据发生变化后执行的函数

2.7 beforeUnmount
VUE实例与元素解除绑定前执行的函数

2.8 unmounted
VUE实例与元素解除绑定后执行的函数