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"> < ...
随机推荐
- python一行代码就能搞定的事情!
打印9*9乘法表: >>> print( '\n'.join([' '.join(['%s*%s=%-2s' % (y,x,x*y) for y in range(1,x+1)]) ...
- 深入浅出java常量池
理论 jvm虚拟内存分布: 程序计数器是jvm执行程序的流水线,存放一些跳转指令. 本地方法栈是jvm调用操作系统方法所使用的栈. 虚拟机栈是jvm执行java代码所使用 ...
- 面试题之小炼牛刀zip,lambda,map
# 现有两元祖,(('a'),('b')),(('c'),('d'))# 请使用python中匿名函数生成列表[{'a':'c'},{'b':'d'}]t1=(('a'),('b'))t2=(('c' ...
- 操作系统底层原理与Python中socket解读
目录 操作系统底层原理 网络通信原理 网络基础架构 局域网与交换机/网络常见术语 OSI七层协议 TCP/IP五层模型讲解 Python中Socket模块解读 TCP协议和UDP协议 操作系统底层原理 ...
- numpy C语言源代码调试(三)
鉴于ddd过于简陋,希望找一个新一些的调试工具,看到有很多人推荐gdbgui,这是一个非常新的调试工具,前端使用浏览器,现在采用这一架构的软件越来越多,可以完全不必依赖庞大的gui类库,安装使用比较方 ...
- :Android网络编程--XML之解析方式:SAX
任何放置在资源(res)目录下的内容可以通过应用程序的R类访问,这是被Android编译过的,而任何放置在资产(assets)目录下的内容会保持它的原始文件格式,为了读取它们,必须使用AssetMan ...
- 闲聊js中的apply、call和arguments
JavaScript提供了apply和call两种调用方式来确定函数中的this的指向,在现实编码中,我确实 很少接触到这两个方法.但很无奈,很多面试题都要考这两种方法,我又没怎么用到,所以我们先来 ...
- 服务端预渲染之Nuxt(介绍篇)
现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular.React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的 ...
- vue 脚手架 立即可以写业务 vue + vue-router + less + axios + elementUI + moment
https://github.com/cynthiawupore/wq-cli
- psql 关于主键自增的问题
在psql中往往我们需要设置一个自增的主键id字段,psql中不像SQL Server那样点选 打钩傻瓜式就能设置好的,是需要创建序列的:CREATE SEQUENCE,关键字SEQUENCE. 我们 ...