Vue3 表单
这节我们为大家介绍 Vue 表单上的应用。
我们可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 等元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始……继续阅读 »
2年前 (2022-07-28) 207浏览 0评论
0个赞
Vue3 安装
1、独立版本
我们可以在 Vue.js 的官网上直接下载最新版本, 并用 <script> 标签引入。
下载 Vue.js
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/3.0.5/vue.global.js
……继续阅读 »
2年前 (2022-07-25) 199浏览 0评论
0个赞
Vue3 自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：
实例
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
&……继续阅读 »
2年前 (2022-07-25) 243浏览 0评论
0个赞
Vue3 Ajax(axios)
Vue 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Github开源地址： https://github.com/axios/axios
安装方法
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js……继续阅读 »
2年前 (2022-07-21) 191浏览 0评论
0个赞
Vue3 路由
本章节我们将为大家介绍 Vue 路由。
Vue 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库
中文文档地址：vue-router 文档。
安装
1、直接下载 / CDN
https://unpkg.com/vue-route……继续阅读 »
2年前 (2022-06-20) 327浏览 0评论
0个赞
Vue3 样式绑定
Vue.js class
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。
v-bind:class 可以简写为 :class。
class 属性绑定
我们可以为 v-bind:class 设置一个对象，从而动态的切换 c……继续阅读 »
2年前 (2022-06-19) 158浏览 0评论
0个赞
Vue3 起步
刚开始学习 Vue，我们不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。
Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下：
const app = Vue.createApp({ /* 选项 */ })
传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被……继续阅读 »
2年前 (2022-06-17) 138浏览 0评论
0个赞
Vue3 监听属性
本章节，我们将为大家介绍 Vue3 监听属性 watch，我们可以通过 watch 来响应数据的变化。
以下实例通过使用 watch 实现计数器：
实例
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<but……继续阅读 »
2年前 (2022-06-17) 218浏览 0评论
0个赞
Vue3 组合式 API
Vue3 组合式 API（Composition API） 主要用于在大型组件中提高代码逻辑的可复用性。
传统的组件随着业务复杂度越来越高，代码量会不断的加大，整个代码逻辑都不易阅读和理解。
Vue3 使用组合式 API 的地方为 setup。
在 setup 中，我们可以按逻辑关注点对部分代码进行分组，然后提取逻辑片段并与其他组件共享代码。因此，组合式 API（Composition A……继续阅读 »
2年前 (2022-06-16) 200浏览 0评论
1个赞
Vue3 条件语句
条件判断
v-if
条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示：
v-if 指令
在元素中使用 v-if 指令：
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
const app = {
da……继续阅读 »
2年前 (2022-06-14) 266浏览 0评论
0个赞
Vue3 创建项目
在上一章节 Vue3 安装 我们使用了 vue init 命令创建过一个项目，本章节我们主要介绍 vue create 命令创建项目以及使用 vue ui 命令打开图形化的安装界面。
vue create 命令
vue create 命令创建项目语法格式如下：
vue create [options] <app-name>
创建一个由 vue-cli-service 提供支持的新项目……继续阅读 »
2年前 (2022-06-13) 261浏览 0评论
0个赞
Vue3 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：
实例 1
<div id="app">
{{ message.split(”).reverse().join(”) }}
</div>
实例 1 中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属……继续阅读 »
2年前 (2022-06-13) 146浏览 0评论
0个赞
Vue3 模板语法
Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值
文本
数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：
文本插……继续阅读 »
2年前 (2022-06-08) 198浏览 0评论
0个赞
Vue3 组件
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。
一个应用需要被挂载到一个……继续阅读 »
2年前 (2022-06-06) 226浏览 0评论
0个赞
Vue3 事件处理
我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。
v-on 指令可以缩写为 @ 符号。
语法格式：
v-on:click="methodName"
或
@click="methodName"
v-on
<div id="app">
<button @click="counter += 1">……继续阅读 »
2年前 (2022-06-02) 185浏览 0评论
0个赞
Vue3 混入
混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
来看一个简单的实例：
实例
// 定义混入对象
const myMixin = {
created() {
this.hello()
},
methods: {
hello() {
console.log(……继续阅读 »
2年前 (2022-05-29) 278浏览 0评论
0个赞
Vue3 目录结构
上一章节中我们使用了 npm 安装项目(Vue-cli 和 Vite)，我们在 IDE（Vscode、Atom等） 中打开该目录，结构如下所示：
命令行工具 vue-cli（runoob-vue3-test）：
Vite（runoob-vue3-test2）
目录解析
目录/文件
说明
build
项目构建(webpack)相关代码
config
配置目录，包括端口号等。我……继续阅读 »
2年前 (2022-05-25) 217浏览 0评论
0个赞
Vue3 项目打包
打包 Vue 项目使用以下命令：
cnpm run build
执行以上命令，输出结果如下：
执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。
如果直接双击打开 index.html，在浏览器中页面可能是空白了，要正常显示……继续阅读 »
2年前 (2022-05-15) 182浏览 0评论
0个赞
Vue3 教程
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 3.0.5 版本测试。
阅读本教程前，您需要了解的知识：
HTML
CSS
JavaScript
本教程主要介绍了 Vue……继续阅读 »
2年前 (2022-05-15) 205浏览 0评论
0个赞
