关注爱学习公众号
扫码手机阅读更方便
Vue3 监听属性 本章节,我们将为大家介绍 Vue3 监听属性 watch,我们可以通过 watch 来响应数据的变化。 以下实例通过使用 watch 实现计数器: 实例 [mycode3 type='html'] 计数器: {{ counter }} 点我 const app = { data() { return {
CSS 分页实例 .article-body ul li { background-image:none} .pagination,.pagination2,.pagination3 { display: inline-block; padding: 0; margin: 8px 0; } .pagination li,.pagination2 li,.pagination3 li
Vue3 混入 混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。 来看一个简单的实例: 实例 [mycode3 type='js'] // 定义混入对象 const myMixin = { created() { this.hello() },
Vue3 安装 1、独立版本 我们可以在 Vue.js 的官网上直接下载最新版本, 并用 <script> 标签引入。 下载 Vue.js 2、使用 CDN 方法 以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。 Staticfile CDN(国内) : https://cdn.staticfile.org/vue/3.
Bootstrap4 小工具 Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果。 边框 使用 border 类可以添加或移除边框: 实例 [mycode3 type='html'] [/mycode3] 尝试一下 » 边框颜色 Bootstrap4 提供了一些类来设置边框颜色: 实例
CSS 图片 本章节将为大家介绍如何使用 CSS 来布局图片。 圆角图片 实例 圆角图片: img {    border-radius: 8px;} 尝试一下 » 实例 椭圆形图片: img {    border-radius: 50%;} 尝试一下 » 缩
Vue3 模板语法 Vue 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值 文本 数据绑定最常见的形式就是使用 {{...}}(双大括号)的文
Vue3 起步 刚开始学习 Vue,我们不推荐使用 vue-cli 命令行工具来创建项目,更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。 Vue3 中的应用是通过使用 createApp 函数来创建的,语法格式如下: const app = Vue.createApp({ /* 选项 */ }) 传递给 createApp 的选项用于配置根组件。在使用 mount()
.animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:absolute; font-weight:bold; font-size:15px; padding:10px; float:left; margin:5px; -webkit-transition:-webkit-transf
Bootstrap4 创建一个网页 接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。 在学习之前我们可以先看下效果:https://www.爱学习网.com/try/demo_source/bootstrap3-makewebsite.htm HTML 代码 [mycode3 type='html'] 我的第一个 Bootstrap 4 页面
Vue3 Ajax(axios) Vue 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Github开源地址: https://github.com/axios/axios 安装方法 使用 cdn: 或 使用 npm: $ npm install axios 使用 bo
Vue3 混入 混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。 来看一个简单的实例: 实例 [mycode3 type='js'] // 定义混入对象 const myMixin = { created() { this.hello() },
Vue3 路由 本章节我们将为大家介绍 Vue 路由。 Vue 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue 可以实现多视图的单页 Web 应用(single page web application,SPA)。 Vue.js 路由需要载入 vue-router 库 中文文档地址:vue-router 文档。 安装 1、直接下载 / CDN https://unpkg.co
Vue3 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例 [mycode3 type='html'] 页面载入时,input 元素自动获取焦点: const app = Vue.createA
Vue3 表单 这节我们为大家介绍 Vue 表单上的应用。 我们可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 等元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 v-model 会忽略所有表单元素的 value、checked
Vue3 事件处理 我们可以使用 v-on 指令来监听 DOM 事件,从而执行 JavaScript 代码。 v-on 指令可以缩写为 @ 符号。 语法格式: v-on:click='methodName' 或 @click='methodName' v-on [mycode3 type='html'] 增加 1 这个
Vue3 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 v-bind 在处理 class 和 style 时, 表达式除了可以使用字符串之外,还可以是对象或数组。 v-bind:class 可以简写为 :class。 class 属性绑定 我们可以为 v-bind:class 设置一个对象,
Vue3 监听属性 本章节,我们将为大家介绍 Vue3 监听属性 watch,我们可以通过 watch 来响应数据的变化。 以下实例通过使用 watch 实现计数器: 实例 [mycode3 type='html'] 计数器: {{ counter }} 点我 const app = { data() { return {
Vue3 计算属性 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1 [mycode3 type='html'] {{ message.split('').reverse().join('') }} [/mycode3] 尝试一下 » 实例 1
Vue3 组件 组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树: 每个 Vue 应用都是通过用 createApp 函数创建的,传递给 createApp 的选项用于配置根组件。当我们挂载应用时,该组件被用作渲染的起点。 一个