文章目录
学习某项技术最好的方法就是看该技术的官方文档,所以,作为后端开发,首先想到的当然也是看
Vue.js的官方网站,目前作者学习的
Vue版本是
2.x系列,目前也是官方文档所列出的最新系列,当然,写下博客是让自己学的更务实.
官方地址：https://cn.vuejs.org/v2/guide/
通过官网文档中的介绍章节，结合自身以前对前端的JS库的理解，Vue简直是太棒了,Vue 的核心库只关注视图层,这让开发者只需要关心自己的开发逻辑,所有的DOM操作都交给Vue.js处理,这和原来所学习的jQuery库简直天差地别，有种相见恨晚的感觉，因为DOM操作开发者无需关心,所以开发者只需要编写程序的业务逻辑即可，jQuery库让我们不仅仅在编写业务逻辑的情况下,还需要操作DOM,Vue让开发者更简单，我想以前jQuery的核心理念Write Less,Do MoreVue将更加受用~！
通过介绍章节,我们能学习到：
- Vue的基本使用,属性绑定
- Vue的基本指令v-for,v-model,v-if,v-bind
- Vue的简单事件绑定v-on
- Vue的自定义组件使用
Vue的基本使用,属性绑定
说了那么多,就让我们来写一个Vue的Hello world吧
首先,同官方文档中直接引入Vue的CDN库地址
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
因为我们是初学Vue，所以引入开发环境版本较好,这样控制台出错后,也方便我们调试.
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
<div id="vue-app">
<h2>{{ message }}</h2>
</div>
在视图层,我们使用了message这个属性,那么，我们在JS中就必须要先声明message属性,否则Vue就会报错(不信你可以试试,我已经尝试过了),这正应了文档中的声明式渲染的概念.
var app=new Vue({
el:"#vue-app",
data:{
message:"Hello Vue!!!"
}
})
运行Html页面，我们就会在页面中看见我们在JS中定义的message属性的值:Hello Vue!!!
Vue的基本指令v-for,v-model,v-if,v-bind
v-if
学习了基本属性，首先来看基本指令v-if,从字面我们就能理解,这是一个条件判断指令
<div id="vue-app">
<p v-if="see">
你看到我的属性了
</p>
</div>
我们在JS中定义我们的属性see
var app=new Vue({
el:"#vue-app",
data:{
message:"Hello Vue!!!",
see:true
}
})
v-for
v-for是循环语句,比如我们在JS中获取到一个数组元素,需要在页面中循环输出显示，那么，我们可以这样：
<div id="vue-app">
<ul>
<li v-for="todo in todos">
{{ todo.target }}
</li>
</ul>
</div>
我们只需在JS中定义todos数组属性即可
var app=new Vue({
el:"#vue-app",
data:{
todos:[
{target:"学习Vue"},
{target:"学习Dubbo"},
{target:"学习SpringBoot"},
{target:"学习SpringCloud"}
]
}
})
v-bind
v-bind在Vue中称为指令,指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性
<div id="vue-app">
<span v-bind:title="title">
绑定Vue标题
</span>
</div>
JS中定义title
var app=new Vue({
el:"#vue-app",
data:{
title:"我是Span元素的title属性值"
}
})
这里或许我们会有疑惑,同是属性绑定,为何我们不能使用双大括号的方式来使用在元素的属性绑定上，例如，我们把代码改成这样：
<div id="vue-app">
<span title="{{title}}">
绑定Vue标题
</span>
</div>
运行html代码,此时,控制台会提示错误
vue.js:634 [Vue warn]: Error compiling template:
title="{{title}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
1 | <div id="vue-app">
2 | <h2>{{ message }}</h2>
3 | <span title="{{title}}">
| ^^^^^^^^^^^^^^^^^
4 | title绑定了吗？
5 | </span>
(found in <Root>)
通过提示,我们学到了官网文档中没有说明的技巧,那就是可以通过:这个简易字符来代替v-bind,所以我们代码可以改为：
<div id="vue-app">
<span :title="title">
绑定Vue标题
</span>
</div>
是不是更简洁了呢?
v-model
v-model能轻松实现表单输入和应用状态之间的双向绑定。
<div id="vue-app">
<h2>{{ message }}</h2>
<input v-model="message"/>
</div>
var app=new Vue({
el:"#vue-app",
data:{
message:"Hello Vue!!!"
}
})
Vue的简单事件绑定v-on
视图中除了事件绑定,我们还需要和用户进行互动,此时,事件的处理就显得尤为重要,那么事件在Vue中是如何处理的呢？
在Vue中如果要适用事件,只需使用事件绑定指令v-on:事件名称即可触发事件操作,不过这里与属性不同的是,事件必须是一个函数方法,所以此时,需要在Vue的methods方法规范中定义事件函数,这和在data对象中定义属性是同一个道理
例如我们在属性绑定章节学到了绑定message属性,此时,我们想通过增加一个按钮,让我们的message属性值字符串反转操作
<div id="vue-app">
<h2>{{ message }}</h2>
<button v-on:click="revMessage">逆转消息</button>
</div>
在Vue中定义我们的事件方法revMessage
var app=new Vue({
el:"#vue-app",
data:{
message:"Hello Vue!!!"
},
methods:{
revMessage:function () {
this.message=this.message.split('').reverse().join('');
}
}
})
我们在JS中,一般都是通过对象.属性的方式来操作我们的属性值,如果按照上面代码中的方式，我们是否应该是app.data.message来获取我们的属性呢?答案是否定的
在Vue中，我们只需要通过this.属性就能找到我们在data对象中定义的属性了
Vue的自定义组件使用
组件顾名思义,可复用的技术中间件,提高开发效率
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：
//定义组件
Vue.component("todo-item",{
props:["todo"],
template:'<li>{{ todo.target }}</li>'
})
var app1=new Vue({
el:"#vue-comp",
data:{
message:"Hello Vue!!!",
title:"Vue Titles",
see:true,
todos:[
{id:"1",target:"学习Vue"},
{id:"2",target:"学习Dubbo"},
{id:"3",target:"学习SpringBoot"},
{id:"4",target:"学习SpringCloud"}
]
},
methods:{
revMessage:function () {
this.message=this.message.split('').reverse().join('');
}
}
})
此时,我们在视图中就可以使用todo-item的模板
<div id="vue-comp" style="margin-top:20px;">
<h2>下面是组件模板</h2>
<ul>
<todo-item v-for="item in todos"
v-bind:todo="item"
v-bind:key="item.id"
>
</todo-item>
</ul>
</div>
简单小示例-网页时钟
通过上面的实例,感叹于Vue的强大,所以写一个小时钟吧，让我们印象更深刻
<div id="calendar">
<div style="margin-top: 10px">
<button v-on:click="start">开始</button>
<button v-on:click="stop">停止</button>
</div>
<strong>当前时间：</strong>
<strong>{{ time }}</strong>
</div>
JS代码
var cal=new Vue({
el:"#calendar",
data:{
time:"",
timeId:null
},
methods:{
start:function () {
this.timeId=setInterval(function () {
cal.time=new Date();
},1000)
},
stop:function () {
clearInterval(this.timeId);
}
}
})
运行效果如下：
是不是很easy~~!
本章小结
通过该章节学习,主要总结如下：
- Vue关注视图层,所有的DOM操作都交给Vue处理,开发者只需关注业务处理,大大简化了开发的难度
- Vue声明书渲染极具富有面向对象的思想,JS中声明属性,视图层使用属性
- 通过自定义组件,组件化思想封装复用程度高
- 拥有双向绑定以及响应式的特点