今天分享一篇技术笔记,关于 Vue 入门的内容。
关于技术类的文章,我一般很少写,因为自己学习技术的时间并不长,水平也菜,工作内容大部分是需求相关,跟技术还是有些距离,学习了解技术都是为了解决工作中实际的需求,也当作自己的业余爱好了。
有这么个奇怪爱好,也是因为难以忍受一些低效的工作方式,总想着能不能通过技术的手段来解决。很多时候,都是自己分析需求,自己实现,最后部署上线。曾经以为自己是个全栈工程师,慢慢了解更多后,才发现自己是「全干工程师」,后来干脆把工程师的名头也去掉了。
正文
前段时间,根据 wechat-format 这款微信公众号编辑器,做了一些定制开发,其中的前端页面是使用 Vue 编写的,虽然没有系统学习过 Vue,但是觉得挺有意思,于是就把 Vue 的官方文档学习了一遍,分享出来,就当作 Vue 的入门吧。
Vue 引入
Vue 的使用其实非常简单,刚开始学习的时候,我们最好不要引入脚手架。直接在一个 HTML 页面中,引入 Vue 的文件即可。例如下面这样:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue!</title>
</head>
<body>
<div id="app">
<p></p>
</div>
</body>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, World',
},
});
</script>
</html>
如上代码所示,连下载 Vue 都不需要,直接使用官方提供的 CDN 文件即可。熟悉模版引擎的应该知道,`` 表示在页面中引入了一个变量,变量值从哪里来呢?
脚本中有一段 new Vue()
的代码,先不用管它是做什么的,你现在只需要知道 message 变量值是从它里面的 data 参数传过来的即可。el 参数指定了 Vue 的作用范围,data 定义了页面中所有的变量。你大概应该猜到,用浏览器打开这个页面,我们第一个 Hello, World 程序就完成了。
数据绑定
学习 Vue,你肯定总是会听到一个词,叫做「响应式数据绑定」。那么什么是响应式数据绑定呢?上面的例子,不就是类似 jQuery 先获得页面元素,然后给赋个值,最后打印在页面上吗?其实,差别大了。
我们打开浏览器的控制台,输入 app.message 可以直接得到 message 的值,当我们修改 app.message 的值的时候,页面中显示也及时改变了。这就是,响应式数据绑定。
绑定属性
除了绑定文本变量,还可以绑定 HTML 的标签属性。例如如下例子:
<div id="app">
<p><span :title="now">鼠标放上去试试,刷新一下再试</span></p>
</div>
上面页面代码中,:title
代表 title 这个属性被绑定在了 now 变量上,那么,在脚本里,我们添加上对应的变量申明,如下代码:
var app = new Vue({
el: '#app',
data: {
message: 'Hello, World',
now: '页面加载于 ' + new Date().toLocaleString(),
}
});
它的作用就是,title 被 now 赋值,效果如下:
判断
之前一直使用 ejs 等模版引擎,都是因为可以在页面中,方便的进行逻辑控制。Vue 也不例外,它同样支持条件判断与循环等。例如控制元素是否显示,如下代码:
<p>后面有个按钮(打开控制台,给 app.seen 变量赋值) <button v-if="seen">我是妖怪</button></p>
v-if
指令可以绑定一个变量,用来控制元素是否显示,脚本中,添加如下代码:
var app = new Vue({
el: '#app',
data: {
message: 'Hello, World',
now: '页面加载于 ' + new Date().toLocaleString(),
seen: false
}
});
通过在脚本中控制 seen 变量,就可以控制元素在页面中的显示状态。
循环
学会了判断指令,循环指令也是同样的道理。添加页面元素如下:
<ol>
<li v-for="todo in todolist">
<small></small>
</li>
</ol>
页面中使用 v-for
指令,脚本中加入 todolist
变量,变量值为对象数组。如下:
var app = new Vue({
el: '#app',
data: {
message: 'Hello, World',
now: '页面加载于 ' + new Date().toLocaleString(),
seen: false,
todolist: [
{ title: '买番茄', desc: '一定要红色的' },
{ title: '买馒头', desc: '要大个的' }
]
},
});
通过在脚本中,改变 todolist 的值,页面显示也将及时改变,这就是响应式数据绑定的魅力。
事件
如何改变脚本中变量的值?除了在控制台手动改变,我们还可以通过事件的方式。例如鼠标点击事件。在页面中加入一个按钮,如下:
<p>做个照妖镜,显示妖怪:<button v-on:click="showBtn"></button></p>
v-on:click
指令指的是绑定一个点击事件,点击按钮的时候,执行 showBtn 函数,脚本中需要定义 showBtn 函数,在 methods 参数下定义函数,如下:
var app = new Vue({
el: '#app',
data: {
message: 'Hello, World',
now: '页面加载于 ' + new Date().toLocaleString(),
seen: false,
todolist: [
{ title: '买番茄', desc: '一定要红色的' },
{ title: '买馒头', desc: '要大个的' }
],
btnLabel: '照妖镜开启',
},
methods: {
showBtn: function(){
this.seen = this.seen?false:true;
this.btnLabel = '照妖镜关闭';
}
}
});
可以看出,showBtn 函数作用是改变了上文中 seen 以及 btnLabel 变量的值,当点击按钮的时候,seen 和 btnLabel 也随之改变,页面就会及时响应。
双向绑定
针对表单的输入,Vue 还提供了 v-model
指令,可以轻松实现表单输入与应用之间的数据绑定。例如页面再加一个 input 控件:
<p>做个扩声器,你说啥,我说啥:<input type="text" v-model="saysay" placeholder="说点什么吧"></p>
<h3></h3>
通过 v-model
指令,将表单输入数据绑定到了 saysay 变量上,表单输入内容将实时打印到页面中。
写到这里,其实还不算 Vue 的入门,因为还没有体验到 Vue 的组件化应用构建。
组件化
什么是组件化?不管做什么事情,我们总是希望能够将大任务,细化成一个一个的任务清单。在项目开发过程中,也是这样的道理。我们在编写一个大型项目的时候,总是希望能够拆分成一个一个的小项目,每个小项目又可以拆分成一个一个的功能件。功能件之间最好是低耦合的,这样,我们就能将开发好的功能件一个个组装起来,一个大的项目自然就完成了。组件化就是基于这样的思想。
在前端页面中,Vue 支持我们自定义 HTML 标签,这样的自定义的标签就相当于一个一个的功能组件。例如下面页面中,添加一个用户信息的自定义标签。
<user-info name="lupeng" career="producter"></user-info>
这个 user-info
标签,并不属于标准的 HTML ,所以在脚本中,我们需要通过 Vue 注册这个标签,代码如下:
Vue.component('user-info', {
props: ['name','career'],
template: '<p>Hi, I am ,I am a <b></b></p>'
});
代码不难理解,props
参数接受页面中传过来的标签属性值,这里从 user-info
标签中获得 name 以及 career 的值,template
为渲染模版,这里面就是标准的 HTML 了,通过 name 和 career 变量值构建模版。这样,页面就会显示模版的内容。
但实际情况,变量值并非都来源于页面,有可能是异步获取,数据来源于 js 脚本。那么,这里就要用到上面数据绑定的知识了。将 name 和 career 属性绑定到自定义的变量 user 中,user 定义为一个对象,包含 name 和 career ,页面代码修改为:
<user-info :name="user.name" :career="user.career"></user-info>
前面加上 :
就代表绑定属性值,name 绑定到 user.name 上,career 绑定到 user.career 上,然后在脚本中定义 user 变量,整体代码如下:
Vue.component('user-info', {
props: ['name','career'],
template: '<p>Hi, I am ,I am a <b></b></p>'
});
var app = new Vue({
el: '#app',
data: {
message: 'Hello, World',
now: '页面加载于 ' + new Date().toLocaleString(),
seen: false,
todolist: [
{ title: '买番茄', desc: '一定要红色的' },
{ title: '买馒头', desc: '要大个的' }
],
btnLabel: '照妖镜开启',
saysay: '',
user: {
name: '张三',
career: '木匠'
}
},
methods: {
showBtn: function(){
this.seen = this.seen?false:true;
this.btnLabel = '照妖镜关闭';
}
}
});
整个传参的过程就清晰了,自定义组件中接受的属性值,通过 props
定义,值从页面传输到自定义组件中;页面的属性可以与脚本中的变量绑定,于是脚本中的变量值,就可以直接控制自定义组件,从而实现子组件的传参。
学到这里,应该可以算是 Vue 入门了,可以使用 Vue 做一些简单的前端应用了。内容就写到这里,希望对你有帮助。
文中代码这里查看:vue-demos/index.html