Vue-1 Vue的基础语法
三大主流框架的对比
| 背景 | 版本 | 小结 | |
|---|---|---|---|
| Angular | 09年发布，Google | 1.x,2.x,4.x,5.x(beta) | 基于html的大而全的MVC框架 |
| React | Facebook于2013年5月开园 | 最新版本: 16.x | 基于js的视图层框架 |
| Vue | 尤雨溪团队2014年2月开源 | 0.1x,1.x,2.x,虞姬2019年下半年发布3.x版本 | 基于html视图层框架 |
| 组织方式 | 数据绑定 | 模板能力 | 自由度 | 路由 | |
|---|---|---|---|---|---|
| Angular | MVC | 双向绑定 | 模板能力 | 较小 | 静态路由 |
| React | 模块化 | 单向绑定 | 自由 | 大 | 动态路由 |
| Vue | 模块化 | 双向绑定 | 简洁 | 较大 | 动态路由 |
适用场景：
Angular：后端开发人员构建CURD（用户管理）类型应用；
React：前端开发人员构建复杂的web应用；
Vue：前端开发人员快速构建web应用。
Vue的数据渲染
Vue.js 的语法非常简洁，要使用它，我们可以通过两种方式，一种是将 Vue.js 当做一个单独的库，在HTML中引入，然后使用其中封装好的各种语法，一种是，利用Node.js提供的服务器，安装 Vue-cli 脚手架，然后在此基础上开发。
我们先使用第一种方式，熟悉Vue的基础语法。
<!-- vue-1.html -->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 当前页面的逻辑代码
</script>
</body>
</html>
在传统的开发模式中，要将复杂的数据渲染在DOM中，需要使用各种DOM操作方式，对于DOM节点的增、删、改、查操作非常的频繁，代码冗长，且容易产生各种冗余。
框架的数据渲染非常方便，代码简洁，清晰，而且就开发角度而言，大大提高了开发效率，降低了代码冗余。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
但是Vue的 DOM 操作系统，只针对 Vue 实例中按照指定方式声明的数据和允许使用 Vue 语法的DOM区域，普通数据无法使用Vue语法渲染。
<div id="app">
<!-- 想要在这个区域中使用Vue语法 -->
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
// 在Vue实例的data对象中，以键值对的形式声明数据，这些数据可以被Vue语法渲染在DOM节点上
}
});
接下来，我们就看Vue提供的具体的渲染DOM的方式。
一、声明式的渲染
<div id="app">
<h2>{{ message }}</h2>
</div>
// vue-1.js
let app = new Vue({
// el声明当前Vue实例中的数据作用的DOM区域
el: '#app',
data: {
message: 'Hello World'
}
});
这种渲染方式看起来跟模板字符串比较相似，但是实际上现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。只要 app 中的 message数据改变，页面中的渲染会立刻随之改变。
二、条件渲染
1. v-if
Vue 提供了条件渲染，用来控制切换一个元素是否显示。
<div id="app">
<!-- 当flag为true时，h2标签在页面上可见，flag为false则不可见 -->
<h2 v-if="flag">Hello World</h2>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
flag: true
}
});
这里我们遇到了一点新东西。h2标签上的 v-if 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。每个指令，都会在渲染的 DOM 上应用特殊的响应式行为。
指令其实就是 Vue 下达给DOM的命令，不同的指令代表代码的不同行为模式。v-if 指令代表的就是条件渲染，根据绑定的值决定要不要渲染这个 DOM 节点。
2. v-else
除了根据一个值，确定要不要渲染某个节点之外，我们还可以根据一个值确定要不要两个节点交替互斥的显示(比如购物类的app中，当购物车中有货物时，就显示购物车，否则显示其他的提示信息)。
<div id="app">
<!-- 当flag为true时，显示Hello，为false显示World -->
<h2 v-if="flag">Hello</h2>
<h2 v-else="flag">World</h2>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
flag: true
}
});
v-else指令也可以不用写具体的数据:
<h2 v-if="flag">Hello</h2>
<h2 v-else>World</h2>
效果不变，else 总会找到它之前最近的未被匹配的if，与之共用一个判断值。
3. v-else-if
我们还可以使用数据，做多个元素的切换展示。
<div id="app">
<!-- num < 0 时显示 -->
<h2 v-if="num < 0 ">I</h2>
<!-- num == 0时显示 -->
<h2 v-else-if="num == 0 ">am</h2>
<!-- num为其他值时显示 -->
<h2 v-else>tom</h2>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
num: 0
}
});
注：
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
4. v-show
也可以根据v-show指令确定要不要显示元素。
<div id="app">
<!-- flag为true时显示，为false隐藏 -->
<h2 v-show="flag">Hello World</h2>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
flag: true
}
});
注：
v-if系列是控制要不要创建元素，v-show系列是控制要不要显示元素。如果这个元素在页面中是不断地被显示/隐藏，就使用v-show，如果这个元素在某次操作之后就确定要不要渲染，之后也不会更改，就使用v-if。
三、循环渲染
Vue 提供 v-for 指令来渲染列表类的数据到DOM节点。
1. 渲染数组
<div id="app">
<!-- user是自定义声明的一个局部变量，只作用当前这个循环内部，代表每次循环到的userList中的数据 -->
<div v-for="user in userList">
<strong>{{ user.name }}</strong>
<span>{{ user.age }}</span>
</div>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
userList: [{
name: 'tom',
age: 18
},{
name: 'jerry',
age: 17
},
{
name: 'jim',
age: 19
}]
}
});
除了可以循环到数组中的元素之外，还可以循环到当前元素的下标。
<div id="app">
<div v-for="(user,index) in userList">
<!-- index就是下标 -->
<i>{{ index }}</i>
<strong>{{ user.name }}</strong>
<span>{{ user.age }}</span>
</div>
</div>
2. 渲染对象
可以使用 v-for 指令渲染对象。
<div id="app">
<div v-for="(val, key, i) in user">
<!-- 键值对在对象中的顺序 -->
<i>{{ i }}</i>
<!-- 值 -->
<strong>{{ val }}</strong>
<!-- 键 -->
<span>{{ key }}</span>
</div>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
user: {
name: 'tom',
age: 19,
sex: '女'
}
}
});
3. 渲染字符串
可以使用v-for指令渲染字符串。
<div id="app">
<div v-for="(val, i) in str">
<!-- 字符 -->
<strong>{{ val }}</strong>
<!-- val在str中的位置 -->
<span>{{ i }}</span>
</div>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
str: 'hello'
}
});
4. 根据数字循环渲染指定数量的节点
<div id="app">
<!-- img会被渲染5次 -->
<img src="star.png" v-for="n in 5">
</div>
练习:
渲染一个后台系统中的用户列表，还可以对用户进行修改和删除的操作(要有对应的按钮)。
四、使用指令渲染
除了 {{ }} 之外，指令也可以将数据渲染在DOM节点上。
1. v-html
<div id="app">
<div v-html="str"></div>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
str: 'hello'
}
});
注：
- v-html 是以 innerHTML的方式渲染数据的。
- v-html 绑定的好处是当vue.js文件没有被加载出来时，浏览器会认为v-html指令只是一个普通的自定义属性，不会将代码暴露在浏览器中。
2. v-bind
前面的几种渲染方式都是将数据渲染在标签内，但是有时候我们需要动态的为某些元素的属性绑定一些数据。要使用 v-bind。
<div id="app">
<!-- 当flag为true时，div 会添加一个 'active-box'的类名 -->
<div v-bind:class="{{ flag ? 'active-box' : '' }}"></div>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
flag: true
}
});
v-bind 可以简写：
<div :class="{{ flag ? 'active-box' : '' }}"></div>
注：
使用v-bind时，属性内的执行代码需要用 {{ }} 包括。
Vue中的表单输入绑定
框架中有完整 DOM 操作系统，这个系统除了提供一系列的数据绑定方式之外，还提供数据获取方式。
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
一、 输入框和输入域的绑定
<div id="app">
<!-- 将这个输入框的数据动态绑定在app的message上 -->
<input v-model="message">
<!-- 将message的数据渲染在页面上 -->
<p>Message is: {{ message }}</p>
<!-- 将文本域的数据动态绑定在app的text上 -->
<textarea v-model="text"></textarea>
<!-- 渲染text -->
<p>Text is: {{ text }}</p>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
message: ''
text: ''
}
});
注：
- v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在app的 data 选项中声明初始值。
二、复选框的绑定
单个复选框
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
checked: true
}
});
多个复选框
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
// 复选框被选中,其对应的value值会被自动添加到数组中,取消选中时,自动从数组中删除
checkedNames: []
}
});
三、单选框的绑定
<div id="app">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
// picked的值是当前这组单选框中被选中的value值
picked: ''
}
});
四、下拉框的绑定
<div id="app">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
// selected中的值，是被选中的option中的数据
selected: ''
}
});
下拉框多选时需要绑定到一个数组。
<div id="app">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
selected: []
}
});
用 v-for 渲染动态选项，需要规定 option 的 value 值。
<div id="app">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
});
注：
如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
五、输入框的修饰符
1 .lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
<input v-model.lazy="msg" >
2 .number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
3 .trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
Vue中的事件处理
Vue提供了 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
一、事件的绑定、传参和事件对象的获取
1. 事件的绑定
<div id="app">
<button v-on:click="{{count++}}">+</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
count: 0
}
});
v-on指令的简写:
<button @click="{{count++}}">+</button>
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
<div id="app">
<!-- 在执行点击动作时调用一个函数 -->
<button @click="fn">click me</button>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
// 当前vue实例要用到的所有的数据
data: {},
// 当前实例要用到的所有的方法
methods: {
fn () {
// 函数体代码
}
}
});
2. 调用事件时传参
<div id="app">
<button @click="say('hello')">click me</button>
<button @click="say('what')">click me</button>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {},
methods: {
say (msg) {
console.log(msg);
}
}
});
3. 事件对象
<div id="app">
<button @click="say('hello', $event)">click me</button>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {},
methods: {
say (msg, e) {
// e 就是原生js中的事件对象
}
}
});
二、事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
1. 鼠标事件修饰符
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
注：
- 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
- 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为
2. 按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
<input v-on:keyup.page-down="onPageDown">
可以绑定特定的键码:
<!-- 按删除键时触发 -->
<input v-on:keyup.13="submit">
Vue 提供了绝大多数常用的按键码的别名：
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
注：
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。
3. 系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
- .ctrl
- .alt
- .shift
- .meta
- .exact
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
4. 鼠标按钮修饰符
- .left
- .right
- .middle
注： 这些修饰符会限制处理函数仅响应特定的鼠标按钮。