Vue.js 样式绑定
Vue.js class
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
class 属性绑定
我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:
实例 ……继续阅读 »
2年前 (2022-07-21) 84浏览 0评论
0个赞
Vue.js 自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：
实例
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>……继续阅读 »
2年前 (2022-06-30) 224浏览 0评论
0个赞
Vue.js 响应接口
Vue 可以添加数据动态响应接口。
例如以下实例，我们通过使用 $watch 属性来实现数据的监听，$watch 必须添加在 Vue 实例之外才能实现正确的响应。
实例中通过点击按钮计数器会加 1。setTimeout 设置 10 秒后计算器的值加上 20 。
实例
<div id = "app">
<p style = "font-s……继续阅读 »
2年前 (2022-06-30) 200浏览 0评论
0个赞
Vue.js 组件 – 自定义事件
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来……继续阅读 »
2年前 (2022-06-26) 387浏览 0评论
0个赞
Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：
实例 1
<div id="app">
{{ message.split(”).reverse().join(”) }}
</div>
实例 1 中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计……继续阅读 »
2年前 (2022-06-19) 320浏览 0评论
0个赞
Vue.js 条件语句
条件判断
v-if
条件判断使用 v-if 指令：
v-if 指令
在元素 和 template 中使用 v-if 指令：
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h……继续阅读 »
2年前 (2022-06-18) 197浏览 0评论
0个赞
Vue.js 实例
本章节为大家介绍几个 Vue.js 实例，通过实例练习来巩固学到的知识点。
导航菜单实例
导航菜单
创建一个简单的导航菜单：
<div id="main">
<!– 激活的菜单样式为 active 类 –>
<!– 为了阻止链接在点击时跳转，我们使用了 "prevent" 修……继续阅读 »
2年前 (2022-06-16) 182浏览 0评论
0个赞
Vue.js 混入
混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
来看一个简单的实例：
实例
var vm = new Vue({
el: ‘#databinding‘,
data: {
},
methods : {
},
});
// 定义一……继续阅读 »
2年前 (2022-06-15) 184浏览 0评论
0个赞
Vue.js 组件
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方……继续阅读 »
2年前 (2022-06-12) 353浏览 0评论
0个赞
Vue.js 起步
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：
var vm = new Vue({
// 选项
})
接下来让我们通过实例来看下 Vue 构造器中需要哪些内容：
实例
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url……继续阅读 »
2年前 (2022-06-11) 165浏览 0评论
0个赞
Vue.js 安装
1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
下载 Vue.js
2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min……继续阅读 »
2年前 (2022-06-10) 310浏览 0评论
0个赞
Vue.js 教程
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试，Vue3 请参阅 Vue3 教程。
阅读本教程前，您需要了解的知识：
HTML
CSS
JavaSc……继续阅读 »
2年前 (2022-06-08) 140浏览 0评论
0个赞
Vue.js 过渡 & 动画
本章节我们主要讨论 Vue.js 的过渡效果与动画效果。
过渡
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。
语法格式
<transition name = "nameoftransition">
<div></div>
</t……继续阅读 »
3年前 (2022-06-02) 203浏览 0评论
0个赞
Vue.js 模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值
文本
数据绑定最常见的形式就是使用 {{…}}（双大括号）的文……继续阅读 »
3年前 (2022-06-02) 200浏览 0评论
0个赞
Vue.js Ajax(axios)
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Github开源地址： https://github.com/axios/axios
安装方法
使用 cdn:
<script src="https://unpkg.com/axios/dist/axi……继续阅读 »
3年前 (2022-06-01) 108浏览 0评论
0个赞
Vue.js 监听属性
本章节，我们将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。
以下实例通过使用 watch 实现计数器：
实例
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<……继续阅读 »
3年前 (2022-05-30) 189浏览 0评论
0个赞
Vue.js 目录结构
上一章节中我们使用了 npm 安装项目，我们在 IDE（Eclipse、Atom等） 中打开该目录，结构如下所示：
目录解析
目录/文件
说明
build
项目构建(webpack)相关代码
config
配置目录，包括端口号等。我们初学可以使用默认的。
node_modules
npm 加载的项目依赖模块
src
这里是我们要开发的目录，基本上要做的事情都在这个……继续阅读 »
3年前 (2022-05-29) 122浏览 0评论
0个赞
Vue.js 表单
这节我们为大家介绍 Vue.js 表单上的应用。
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：
<div id="app">
<p>input 元素：</p&……继续阅读 »
3年前 (2022-05-28) 118浏览 0评论
0个赞
Vue.js Ajax(vue-resource)
Vue 要实现异步加载需要使用到 vue-resource 库。
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
Get 请求
以下是……继续阅读 »
3年前 (2022-05-15) 179浏览 0评论
0个赞
Vue.js 路由
本章节我们将为大家介绍 Vue.js 路由。
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库
中文文档地址：vue-router文档。
安装
1、直接下载 / CDN
https://unpkg.com/……继续阅读 »
3年前 (2022-05-15) 147浏览 0评论
0个赞
Vue.js 事件处理器
事件监听可以使用 v-on 指令：
v-on
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script&……继续阅读 »
3年前 (2022-05-15) 162浏览 0评论
0个赞
