Vue 进阶之路（一）
vue 3.x 马上就要问世了，显然尤大大是不想让我们好好活了，但是转念一想，比你优秀的人都还在努力，那我们努力还有什么用，开个玩笑而已，本人对于 vue 的接触时间不长，对其也没有深入地去研究源码，但是在 vue 3.x 出来之前，还是想再复习一下 vue2.x ，好记性不如烂笔头，特此记录，与君共勉！
vue 作为国人开发的框架，在很多使用习惯上使我们用起来十分顺手，又有中文官网加持，使我们在学习起来几乎没什么门槛，那接下来我们就开始一点点学习吧。
vue 官网教程 https://cn.vuejs.org/v2/guide/
vue 官网为我们提供了一整套的教学实例，包括从起步安装到后期维护，在这里我们就不再那么繁琐第进行说明，我们就以最简单的案例带大家一点点深入了解 vue 的精髓。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="app">
<p>{{ message }}</p>
<button v-on:click="handleClick">点我</button>
</div>
<script>
var app = new Vue({
el: '.app',
data: {
message: 'Hello world!'
},
methods: {
handleClick() {
console.log(this.message)
}
}
})
</script>
</body>
</html>
在上面的代码中我们直接在 HTML 中引入 vue.js，然后在一个 div 标签中以 {{ }} 的方式插值，在 script 的 JavaScript 代码中我们 var app = new Vue()；意思是我们通过 var 的形式 new 出了一个 Vue 的实例。
在 Vue 的实例中，我们通过 el 属性来定义这个 Vue 实例要接管的 HTML 代码的哪一部分，在上面的代码中我们是让 Vue 实例接管了 id="app" 的内容，当然我们也可以写成 el：".app"，那么 HTML 代码就需要写成 class="app"。
在 Vue 的实例中，我们可以通过 data 属性来定义我们的数据，在上面的代码中我们定义了一个 message 的变量名称并赋值 hello world! 如果我们想要让这个数据在页面上显示，我们就需要在 Vue 实例接管范围内，即 id="app" 的代码范围内通过插值表达式 {{ }} 将 message 绑定到我们的代码上，就可以在页面上显示了。
在 Vue 的实例中，我们可以通过 methods 属性来定义我们的方法，在上面的代码中我们在一个 button 按钮上通过 v-on:click 的形式绑定了一个 handleClick 点击事件，在 Vue 的实例中我们就可以在 methods 属性中对 handleClick 方法进行控制了，例如我们打印输出 this.message，注意在 Vue 的实例中 this 的指向就是上下文，就 Vue 实例本身，this.message 即 hello world！同时 v-on:click 可以改写成 @click，这是一种简写方式。
最终结果如下：
Vue 进阶之路（一）的更多相关文章
- Vue 进阶之路（九）
之前的文章我们介绍了 vue 中父组件之间的传值,本章我们再来看一下父子组件间传值的参数校验和非 Props 特性. <!DOCTYPE html> <html lang=" ...
- Vue 进阶之路（八）
之前的文章我们对组件 component 进行了简单的介绍,本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="e ...
- Vue 进阶之路（七）
之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（六）
上篇文章我们分析了一下 vue 中的条件渲染,本篇我们说一下 vue 中的列表渲染和 set 方法. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（五）
之前的文章我们说了一下 vue 的样式绑定,这篇文章来介绍一下 vue 中的条件渲染,先看下面的代码: <!DOCTYPE html> <html lang="en&quo ...
- Vue 进阶之路（四）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色 ...
- Vue 进阶之路（三）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的方法 methods,计算属性 computed 和监听器 watch. 现在我们有一个需求,变量 firstNa ...
- Vue 进阶之路（二）
之前的文章我们初识了 vue,对其原理,数据绑定和方法进行了简单的演示,本篇将对 vue 插值表达式,v-text,v-html 进行讲解. <!DOCTYPE html> <htm ...
- Vue 进阶之路（十）
之前的文章介绍了 vue 的组件化,本章我们来看一下 vue 中组件的原生事件. <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- 理解主从设备模式(Master-Slave)
前言 在给定上下文的软件体系结构中,为了解决某些经常出现的问题而形成的通用且可重用的解决方案称之为架构模式,而常见的体系架构模式主要有以下十种 分层模式 客户端-服务器模式 主从设备模式 管道-过滤器 ...
- webcron
一个定时任务管理器,基于Go语言和beego框架开发.用于统一管理项目中的定时任务,提供可视化配置界面.执行日志记录.邮件通知等功能,无需依赖*unix下的crontab服务. 项目背景 开发此项目是 ...
- 理解channel 工作原理以及源码
Go 的并发特性 goroutines: 独立执行每个任务,并可能并行执行 channels: 用于 goroutines 之间的通讯.同步 一个简单的事务处理的例子 对于下面这样的非并发的程序: ...
- I/O------字节输出流
package io.day03; import java.io.FileOutputStream; import java.io.OutputStream; public class day03ou ...
- Elasticsearch笔记七之setting,mapping,分片查询方式
Elasticsearch笔记七之setting,mapping,分片查询方式 setting 通过setting可以更改es配置可以用来修改副本数和分片数. 1:查看,通过curl或浏览器可以看到副 ...
- mysql中利用group by过滤删除重复行
DELETEFROM peopleWHERE peopleId IN (SELECT peopleId FROM people GROUP BY peopleId HAVING count(peopl ...
- 关于分布式锁原理的一些学习与思考-redis分布式锁，zookeeper分布式锁
首先分布式锁和我们平常讲到的锁原理基本一样,目的就是确保,在多个线程并发时,只有一个线程在同一刻操作这个业务或者说方法.变量. 在一个进程中,也就是一个jvm 或者说应用中,我们很容易去处理控制,在j ...
- 自学java难吗？一个JAVA学习者应该具备的素质
无论是在校的学生也好,还是转行的也好,如今学JAVA开发的人越来越多,造成了如今新手越来越多,有人说前端饱和了,JAVA饱和了,JAVA才刚开始以一种好的势头发展就饱和了.我也是无语,一般说饱和的人, ...
- Java后端框架之Spring Boot详解，文末有Java分布式实战项目视频可取
在 Java 后端框架繁荣的今天,Spring 框架无疑是最最火热,也是必不可少的开源框架,更是稳坐 Java 后端框架的龙头老大. 用过 Spring 框架的都知道 Spring 能流行是因为它的两 ...
- 一个C#程序员学习微信小程序的笔记
客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在启动的时候,将首页的代码装载进来,通 ...