Vue-1 Vue的基础语法
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的基础语法。
<html>
<head>
<title>title>
head>
<body>
<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">
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">
<h2 v-if="flag">Hello Worldh2>
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">
<h2 v-if="flag">Helloh2>
<h2 v-else="flag">Worldh2>
div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
flag: true
}
});
v-else指令也可以不用写具体的数据:
<h2 v-if="flag">Helloh2>
<h2 v-else>Worldh2>
效果不变，else 总会找到它之前最近的未被匹配的if，与之共用一个判断值。
3. v-else-if
我们还可以使用数据，做多个元素的切换展示。
<div id="app">
<h2 v-if="num < 0 ">Ih2>
<h2 v-else-if="num == 0 ">amh2>
<h2 v-else>tomh2>
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">
<h2 v-show="flag">Hello Worldh2>
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">
<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">
<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>
<span>{
{ i }}span>
div>
div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
str: 'hello'
}
});
4. 根据数字循环渲染指定数量的节点
<div id="app">
<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">
<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 指令在表单 、