摘要
在本文中,我们会快速地入门Vue。主要了解的是Vue各种指令语法。
声明:为了文章的清爽性,在文章内部的代码演示中只会附上部分演示代码。
作者:来自ArimaMisaki创作
说明:Vue是一套用于构建用户界面的渐进式框架
。与其他大型框架不同的是,Vue被设计为可以自底向上
逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。
相同点:React 和 Vue 有许多相似之处,它们都有使用 Virtual DOM;提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更丰富的生态系统。除此之外,他们
在性能方面上,React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势,因为 Vue 的 Virtual DOM 实现相对更为轻量一些。
不同点:
JSX
, 也就是把HTML和CSS全都写进JavaScript了,即all in js
; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html、css、js写在同一个以vue为后缀名的文件中。说明:我们在开发客户端的时候常常采用MVC模式;MVC模式指的是采用分层设计,使用数据模型,页面视图,页面控制器来设计代码的架构。
尽管MVC 是开发客户端最经典的设计模式,但是 MVC 有让人无法忽视的严重问题。在通常的开发中,除了简单的 Model、View 以外的所有部分都被放在了 Controller 里面。Controller 负责显示界面、响应用户的操作、网络请求以及与 Model 交互。随着业务逻辑的增加,controller的处理逻辑会变得越来越复杂,controller也就慢慢的变得越来越胖,这就造成了Controller逻辑复杂,难以维护。为了更好地管理代码,更方便地扩展业务,为必要为controller瘦身,于是MVVM便呼之欲出。
说明:MVVM( Model View-Model Controller View)就是MVC设计模式的更先进进化,符合它进化的方向。每个人对MVVM了解不同和使用技术不同,最终实现的MVVM架构也不同。
MVVM是指数据模型M,视图模板V,视图模型VM。vue中的MVVM体现在其双向数据绑定上,如输入框输入数据的时候,对应的插值表达式也会发生改变。
虽然Vue给人感觉像是采用了MVVM模式,但在组件上Vue提供了$refs
让Model可以直接操作View,所以我们说实际上Vue完全遵守MVVM设计模式。
说明:在Vue项目中我们常常将一整个项目拆分成多个组件。举一个比较生动的例子,我们将要用积木制作一个超级玛丽,那我们需要将一个超级玛丽分为头、身子、脚等一系列组件。在后续的开发中,如果我们还想做一个不一样的超级玛丽,则我们可以找找以往的组件,看看有没有组件可以复用。
在Vue项目中,组件以.vue
的文件形式存在。它也被成为单文件组件
。其结构分为template、css、script。
说明:Vue的组件可以按照两种不同的风格进行书写:选项式API
和组合式API
。
选项式API:如果使用选项式API,我们可以用包含多个选项对象来描述组件的逻辑。选项有很多种,我们会在后续一一介绍。在初级学习阶段,我们大多书写选项式API。
组合式API:我们可以通过导入的API函数来描述组件逻辑。
说明:Vue的核心功能是声明式渲染。通过扩展于标准 HTML 的模板语法,我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时,HTML 会自动更新。这正是MVVM的体现。
我们可以在data组件选项中来声明响应式状态,该选项应该是一个返回对象的函数。
{{ message }}
Count is: {{ counter.count }}
说明:我们可以使用v-bind:
指令来绑定一个属性值,由于v-bind经常被使用,所以其可以被简写为:
。
Make me red
说明:我们可以使用v-on
来监听DOM事件,其简写为@
。
<script>
export default {
data() {
return {
count: 0
}
},
methods:{
increment(){
this.count++
}
}
}
script>
<template>
<button @click="increment">count is: {{ count }}button>
template>
说明:如果我们希望一个通过一个表单改变数据,那么我们可以使用v-on+v-bind完成这样的操作,但是Vue为我们提供了语法糖v-model
,它通常用于双向绑定。
语法糖:简化语法,让你觉得语法不再枯燥无味。
{{ text }}
说明:我们可以使用v-if
,v-else-if
,v-else
来进行条件渲染,其中v-if和v-else-if对应的值只有为真的情况下才会渲染。
Vue is awesome!
Oh no
说明:当我们想要渲染多个li标签时,我们可以将标签中的内容置于数组中,并使用v-for
指令。
-
{{ todo.text }}
说明:目前为止,我们并没有实际动手去操作DOM,但是有时候我们也有要手动操作DOM的情况。Vue为我们提供了模板引用
,具体的做法是在标签中使用ref属性,之后我们可以在script标签中使用this.$refs.p来访问操作该标签对应的DOM。
我们可以通过mounted()函数来操作DOM,它常被称为生命周期钩子
,因为它允许我们注册一个在组件特定生命周期调用的回调函数。
hello
插值表达式:从data中渲染文本,可在里面使用js表达式
v-text:从data中渲染文本
v-html:从data中渲染标签及其内容
v-bind:从data中渲染属性,可简写为:
v-on事件:从methods中获取事件,可简写为@事件,如@click
v-model:用于双向绑定,只能用于表单元素。当需要维护组件内外数据的同步时,也可以使用该指令
v-if:条件渲染指令。v-if会动态创建或移除DOM元素,具有切换开销
v-else:配合v-if使用
v-else-if:配置v-if使用
v-show:条件渲染指令。v-show会动态地显示与隐藏,本质是display:none,具有渲染开销
v-for:列表循环指令。从data中的列表中循环获取数据,语法是元素 in 列表名或==(元素名,索引) in 列表名==
说明:
在原生DOM事件绑定中,可以在事件处理函数的形参处,接收事件对象event。同理在v-on指令所绑定的事件处理函数中,同样可以接收到事件对象event。
事件对象event必须写在参数列表的第一个,如果不想写在第一个,请在传参时事件变量前加上$。
<body>
<div id = "app">
<b>count的值为:{{count}}b>
<button v-on:click="addCount">+1button>
div>
<script src="./vue.js">script>
<script>
const vm = new Vue({
el:'#app',
data:{
count:0,
},
methods:{
addCount(e){
const nowBgColor = e.target.style.backgroundColor;
e.target.style.backgroundColor = nowBgColor === 'red'?'':'red';
this.count+1;
}
}
})
script>
body>
事件修饰符 | 说明 |
---|---|
.prevent | 阻止默认行为(阻止a链接的跳转,阻止表单的提交) |
.stop | 阻止事件冒泡 |
.capture | 以捕获模式触发当前的事件处理函数 |
.once | 绑定的事件只触发一次 |
.self | 只有在event.target是当前元素自身时触发事件处理函数 |
事件修饰符 | 说明 |
---|---|
@keyup.enter | 按enter键后会发生对应事件 |
@keyup.esc | 按esc键后会发生对应事件 |
<body>
<div id="app">
<input type="text" @keyup.enter = "submit" @keyup.esc = "clearInput">
div>
<script src = "./vue.js">script>
<script>
const vm = new Vue({
el:'#app',
data:{
},
methods:{
submit(e){
console.log('按下了enter键,最新的值是:'+e.target.value);
},
clearInput(e){
e.target.value = '';
},
}
})
script>
body>
说明:
<body>
<div id="app">
姓名:<input type="text" v-model.trim = "username">
<hr>
年龄:<input type="text" v-model.number="age">
<hr>
地址:<input type="text" v-model.lazy = "address">
div>
<script src="./vue.js">script>
<script>
const vm = new Vue({
el:'#app',
data:{
username:'ArimaMisaki',
age:13,
address:'北京市',
}
})
script>
body>
引入:在我们使用v-for指令时,常常会因为添加或删除数组的元素,导致维护的li标签顺序与想象中不符。
说明:在标签中添加key属性,值为列表中的某个值。相当于数据库中的主键。通常列表指定值最好是id。key能够维护表单的状态。
<body>
<div id="app">
<div>
<input type="text" v-model="name">
<button @click="addNewUser">添加button>
div>
<ul>
<li v-for = "{user,index} in userlist" :key = "user.id">
<input type="checkbox">
姓名:{{user.name}}
li>
ul>
div>
<script src="./vue.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
userlist: [
{ id: 1, name: 'zs' },
{ id: 2, name: 'ls' }
],
name: '',
}
})
script>
body>