一，Vue2简介
1.1，什么是vue
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。
1.2，初始vue
- M：Model（模型） 对应data的数据
- V：View（视图） 模板==>页面
- VM：ViewModel（视图模型） Vue实例对象
1.3，搭建vue环境
vue环境的搭建有很多种：
- 使用cdn
- 下载javaScript文件，自行托管
- 使用npm安装
- 使用官方的cli来构建项目
对于我们初次学习，我们使用自行下载js的方式。
1.4，第一个hello world
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue2</title> </head> <body> <div id="app"> {{message}} </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串 data: { // 用于储存数据，数据供el指定的容器使用 message: 'Hello world!', }, }); </script> </html>
注意
- 一个vue实例只能接管一个容器
- 插值语法：{{}} 可以读取到在data的所有属性
- data中数据发生变化，那么在容器用到的数据会自动更新
- data的写法，我们通常会写成函数的方式，代码如下：
data(){ return { message: 'Hello world!', } }
面试题：
Data为啥要写成函数？
Vue 里面data属性之所以不能写成对象的格式，是因为对象是对地址的引用，而不是独立存在的。如果一个.vue 文件有多个子组件共同接收一个变量的话，改变其中一个子组件内此变量的值，会影响其他组件的这个变量的值。如果写成函数的话，那么他们有一个作用域的概念在里面，相互隔阂，不受影响。
二，基础知识
2.1 指令
什么是指令？
在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。
譬如在HTML页面中这样使用
<div v-xxx=''></div>
在vue中v-xxx就是vue的指令，指令就是以数据去驱动DOM行为的,简化DOM操作。
常用的指令有哪些，及怎么使用这些指令
- v-text 不可解析html标签
- v-html 可解析html标签
- v-if 做元素的插入（append）和移除（remove）操作
- v-else-if
- v-else
- v-show display:none 和display：block的切换
- v-for 数组 item，index 对象 value，key ，index
2.2-1 指令v-text
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue2</title> </head> <body> <div id="app"> <div v-text="showText"></div> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { showText:'<h1>vue</h1>', } }, }) </script> </html>
2.2-2 指令v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue2</title> </head> <body> <div id="app"> <div v-html="showHtml"></div> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { showHtml:'<h1>vue</h1>', } }, }) </script> </html>
2.2-3 指令v-if
v-if指令称为条件渲染指令，根据表达式的真假来插入和删除元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue2</title> </head> <body> <div id="app"> <h1 v-if="isIf">isIf是真的,显示了,false的情况下此节点删除</h1> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { isIf:true, } }, }) </script> </html>
2.2-4 指令v-else
v-else指令为v-if指令添加“else块”，v-else元素必须立即跟在v-if元素的后面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue2</title> </head> <body> <div id="app"> <h1 v-if="isIf">isIf是真的,显示了,false的情况下此节点删除</h1> <h1 v-else="isIf">我是isIf为false时显示</h1> <!-- v-if不成立时，才会显示 --> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { isIf:false, } }, }) </script> </html>
2.2-5 指令v-show
v-show指令控制切换一个元素的显示和隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue2</title> </head> <body> <div id="app"> <h1 v-show="isShow">isShow是真的,显示了，false的情况下此节点display为none</h1> </div> </body> <script src="../js/vue2.7.js"></script> <script> // 创建一个Vue实例 var app = new Vue({ el:"#app", // 绑定一个元素 data(){ return { // 表达式为真元素显示 isShow:true, } }, }) </script> </html>
