学习 Vue.js

关注爱学习公众号
扫码手机阅读更方便

栏目

推荐阅读

Vue3 起步
Vue3 起步刚开始学习 Vue，我们不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。 Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下： const app = Vue.createApp({ /* 选项 */ }) 传递给 createApp 的选项用于配置根组件。在使用 mount()
Vue3 计算属性
Vue3 计算属性计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子：实例 1 [mycode3 type='html'] {{ message.split('').reverse().join('') }} [/mycode3] 尝试一下 » 实例 1
Vue3 条件语句
Vue3 条件语句条件判断 v-if 条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示： v-if 指令在元素中使用 v-if 指令： [mycode3 type='html'] 现在你看到我了 const app = { data() { return { seen: true /* 改为false
Vue3 路由
Vue3 路由本章节我们将为大家介绍 Vue 路由。 Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。 Vue.js 路由需要载入 vue-router 库中文文档地址：vue-router 文档。安装 1、直接下载 / CDN https://unpkg.co
Vue3 事件处理
Vue3 事件处理我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。 v-on 指令可以缩写为 @ 符号。语法格式： v-on:click='methodName' 或 @click='methodName' v-on [mycode3 type='html'] 增加 1 这个
Vue3 组件
Vue3 组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。一个
Vue3 循环语句
Vue.js 循环语句循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 实例 [mycode4 type='html'] {{ site.text }}
Vue3 监听属性
Vue3 监听属性本章节，我们将为大家介绍 Vue3 监听属性 watch，我们可以通过 watch 来响应数据的变化。以下实例通过使用 watch 实现计数器：实例 [mycode3 type='html'] 计数器: {{ counter }} 点我 const app = { data() { return {
Vue3 目录结构
Vue3 目录结构上一章节中我们使用了 npm 安装项目(Vue-cli 和 Vite)，我们在 IDE（Vscode、Atom等）中打开该目录，结构如下所示：命令行工具 vue-cli（爱学习网-vue3-test）： Vite（爱学习网-vue3-test2）目录解析目录/文件说明 build 项目构建(webpack)相关代码 confi
Vue3 教程
Vue3 教程 Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。 Vue 只关注视图层，采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单，本教程基于 Vue 3.0.5 版本测试。阅读本教程前，您需要了解的知识： HTML CSS JavaScript

Vue3 起步

刚开始学习 Vue，我们不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。

Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下：

const app = Vue.createApp({ /* 选项 */ })

传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。

一个简单的实例：

Vue.createApp(HelloVueApp).mount('#hello-vue')

createApp 的参数是根组件（HelloVueApp），在挂载应用时，该组件是渲染的起点。

一个应用需要被挂载到一个 DOM 元素中，以上代码使用 mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中。

接下来我们从 Hello Vue!! 的代码开始学起。


<div id="hello-vue" class="demo">
  {{ message }}
</div>
?
<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}
?
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

点击 "" 按钮查看在线实例

以上实例中，我们先在 HTML 页面中引入 Vue 的 JS 文件：

<script src="https://unpkg.com/vue@next"></script>

HTML 页面中有一个 div 元素:

<div id="hello-vue" class="demo">

  {{ message }}

</div>

mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中。

{{ }} 用于输出对象属性和函数返回值。

{{ message }} 对应应用中 message 的值。

data 选项

data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

 
const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

document.write(vm.$data.count) // => 4
document.write("<br>")
document.write(vm.count)       // => 4
document.write("<br>")
// 修改 vm.count 的值也会更新 $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// 反之亦然
vm.$data.count = 6
document.write(vm.count) // => 6

以上实例属性仅在实例首次创建时被添加，所以你需要确保它们都在 data 函数返回的对象中。

方法

我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。

以下实例我们添加了 methods 选项，选项中包含了 increment() 方法：

 
const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` 指向该组件实例
      this.count++
    }
  }
})

const vm = app.mount('#app')

document.write(vm.count) // => 4
document.write("<br>")
vm.increment()

document.write(vm.count) // => 5