1 vue2.X介绍
Vue 是一套构建用户界面的渐进式前端框架。
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
特点
- 易用：在有 HTML CSS JavaScript 的基础上，快速上手。
- 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
- 性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
2 快速入门
1.下载和引入 vue.js 文件。
2.编写入门程序。
- 视图：负责页面渲染，主要由 HTML+CSS 构成。
- 脚本：负责业务数据模型（Model）以及数据的处理逻辑。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <!-- 第一步：定义视图 --> <div id="dv"> <!-- 使用{{}}获取属性 --> {{msg}} <!-- 使用'@事件名'绑定事件,@click表示绑定单击事件 --> <button @click="study()">点击调用方法</button> </div> <script> // 第二步：定义脚本 let vueObj = new Vue({ el:"#dv", /*data中定义vueObj对象的属性*/ data:{ msg:"Hello Vue" }, /*methods中定义vueObj对象的方法*/ methods:{ study:function(){ alert("为中华软件崛起而读书"+this.msg); } } }); </script> </body> </html>
效果
快速入门小结
1.vue对象的属性在data中，方法在methods
2.在vue对象中有个this，this表示当前vue对象，可以通过this.来调用方法和属性
3.一般情况下在一个页面只需要创建一个vue对象即可
4.使用vue绑定事件@click=’xx’ ‘单引号中如果调用无参方法，可以省略()’,如果是有参方法必须加()
2.2 快速构建一个Vue项目
npm install -g vue-cli
-g全局路径
npm config list
C:\Users\Administrator\AppData\Roaming\npm
vue init webpack rs
到对应文件下,采用webpack进行构建
3 指令
3.1 介绍
指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
使用指令时，通常编写在标签的属性上，值可以使用 js 的表达式。
| 指令 | 作用 |
| v-html | 把文本解析为HTML代码 |
| v-bind | 为HTML标签绑定属性值 简化:属性名=‘值’ |
| v-if 、v-else、v-else-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
| v-on | 为HTML标签绑定事件 |
| v-model | 在表单元素上创建双向数据绑定 |
3.2 文本插值
3.2.1 双大括号
数据绑定最常见的形式就是使用（双大括号）的文本插值,入门案例中已经用过，表示获取vue对象的属性值
{{msg}}
3.2.2 v-html和v-text
说明
只能作用于双标签,比如
,不能作用于自闭合标签，比如。底层调用innerText或innerHTML操作标签体内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> </head> <body > <div id="app"> <!-- 会将message的值直接以普通字符串形式展示到页面 --> <div v-text="message" style="background-color: red;"></div> <!-- 会将message的值解析，然后展示到页面 --> <div v-html="message" style="background-color: seagreen;"></div> </div> <script> new Vue({ el:"#app", data:{ message:"<a href='#'>百度</a>" } }); </script> </body> </html>
运行结果
3.3 条件渲染v-if
v-if和v-show这两个指令都是控制元素是否要显示到页面。运行效果一模一样。
v-if的结果如果是false则元素不会被插入到页面，v-show的结果是false则元素会被插入到页面，但是display的值是none。如果某个元素需要频繁的显示隐藏，那么就是用v-show，不需要vue框架频繁渲染dom，效率更高。
案例:判断gender的值，如果是1页面显示男，如果是0页面显示女。分别用v-if和v-show实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <span v-show="gender==1">男</span> <span v-show="gender==0">女</span> <button @click='change'>变</button> </div> <script> new Vue({ el:"#app", data:{ gender:1 }, methods:{ //修改gender的值 change:function(){ if(this.gender==1){ this.gender=0; }else{ this.gender=1; } } } }); </script> </body> </html>
运行效果
3.4 列表渲染v-for
简单语法，遍历的时候仅仅获取元素
遍历数组 v-for="item in arr"
遍历对象 v-for="item in obj"
复杂语法，遍历的时候不仅可以获取元素，还可以获取索引
遍历数组：v-for="(item,index) in arr"
遍历对象:v-for="(value,key,index) in obj"
遍历数组代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script> </body> </html>
效果
遍历对象代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <ol style="list-style: none;"> <li v-for="(v,k,i) in person"> 属性值:{{ v }} 属性名:{{k}} 索引:{{i}} </li> </ol> </div> <script> new Vue({ el: '#app', data: { person:{ name:"jack", age:34 } } }) </script> </body> </html>
效果
