vue介绍
Vue 是一套构建用户界面的渐进式前端框架。
只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合。
通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
特点
易用:在有 HTML CSS JavaScript 的基础上,快速上手。
灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
性能:20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
快速入门
1.下载和引入 vue.js 文件。点击下载
2.编写入门程序。
代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| <!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}} <button @click="study()">点击调用方法</button> </div>
<script> let vueObj = new Vue({ el:"#dv", data:{ msg:"Hello Vue" }, 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’ ‘单引号中如果调用无参方法,可以省略()’,如果是有参方法必须加()
指令
介绍
指令:是带有 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 |
在表单元素上创建双向数据绑定 |
文本插值
双大括号
数据绑定最常见的形式就是使用(双大括号)的文本插值,入门案例中已经用过,表示获取vue对象的属性值
v-html和v-text
说明
只能作用于双标签,比如<div></div>
,不能作用于自闭合标签,比如<input/>
。底层调用innerText或innerHTML操作标签体内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <!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"> <div v-text="message" style="background-color: red;"></div> <div v-html="message" style="background-color: seagreen;"></div> </div> <script> new Vue({ el:"#app", data:{ message:"<a href='#'>百度</a>" } }); </script> </body> </html>
|
运行结果
条件渲染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实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| <!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:{ change:function(){ if(this.gender==1){ this.gender=0; }else{ this.gender=1; } } } }); </script> </body> </html>
|
运行效果
列表渲染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"
遍历数组代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| <!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>
|
效果
遍历对象代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <!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>
|
效果
绑定事件v-on
事件监听可以使用 v-on:事件名=""
指令,简写@事件名=""
注意事项
1.@事件名=”” 双引号中只能写调用方法的代码或者操作vue对象属性的代码
2.如果双引号中调用方法是无参的,那么()可以省略,如果双引号中调用属性,不能加this
案例:vue对象中有个属性num值是1,在页面添加按钮并给按钮绑定单击事件,单击时将num的值+1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| <!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"> {{num}} <button @click="play">点我</button> <button @click="num++" >点我</button> </div>
<script> new Vue({ el:"#app", data:{ num:0 }, methods:{ play:function(){ this.num++; } } }); </script>
</body> </html>
|
运行效果
属性绑定v-bind
单向数据绑定 内存改变影响页面改变. 其实是对属性的简单赋值,当内存中值改变,还是会触发重新渲染
语法v-bind:属性名='值'
,简化语法::属性名='值'
案例:一只vue对象的属性值有两个,分别是url:”http://www.baidu.com",img:" //www.baidu.com/img/flexible/logo/pc/result.png “,请将该属性分别绑定给a和img标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <!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"> <a :href="url">百度</a> <img :src="img" alt=""> </div>
<script> new Vue({ el:"#app", data:{ url:"http://www.baidu.com", img:" //www.baidu.com/img/flexible/logo/pc/result.png " } }); </script> </body> </html>
|
表单绑定v-model
双向数据流(绑定)
- 页面改变影响内存(js)
- 内存(js)改变影响页面
使用v-model=""
可以将vue对象中的属性值与表单的值双向绑定:表单的值发送改变,那么vue对象的属性值也会发生改变,vue对象的属性值发生改变,表单的值也会发生改变。
案例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
| <!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"> <form action=""> 用户名<input v-model="formData.username"> <br> 密码<input v-model="formData.password"> <br> 爱好 <input type="checkbox" v-model="formData.hobbies" value="eat"> 吃 <input type="checkbox" v-model="formData.hobbies" value="drink"> 喝 <br> 性别 <input type="radio" v-model="formData.gender" value="man"> 男 <input type="radio" v-model="formData.gender" value="woman"> 女 <br> 祖籍 <select v-model="formData.address"> <option value="shandong">山东</option> <option value="shanxi">山西</option> </select> </form> <button type="button" @click="print()">打印表单数据到控制台</button>
</div> <script> new Vue({ el:"#app", data:{ formData:{ username:"", password:"", hobbies:[], gender:"", address:"" } }, methods:{ print:function(){ console.log(this.formData); } }
}) </script> </body> </html>
|
当输入表单数据,点击打印表单数据到控制台按钮,输出结果如下
单向绑定与双向绑定
单向绑定
双向绑定
ElementUI
学习目标
使用ElementUI编写学生列表页面,效果如下.使用文档参见官网
介绍
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。 点击直达ElementUI主页
快速入门
下面是使用ElmentUI构建页面的开发步骤
下载 Element 核心库。点击下载
引入 Element 样式文件,所在目录lib/theme-chalk/index.css
引入 Vue 核心 js 文件
引入 Element 核心 js 文件,所在目录 lib/index.js
编写按钮标签。
通过 Vue 核心对象加载元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <!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> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="element-ui/lib/index.js"></script> </head> <body> <div id="app"> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> </div>
<script> new Vue({ el:"#app", }); </script> </body> </html>
|
Layout 布局
通过基础的 24 分栏,迅速简便地创建布局。 一行最多允许分成24列。
使用方式
1.使用el-row定义行标签
2.使用el-col定义列标签
3.在el-col 标签中使用:span绑定该列所占的份额
通过 row 和 col 组件,并通过 col 组件的 span
属性我们就可以自由地组合布局。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
| <!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> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="element-ui/lib/index.js"></script> <style> .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; } </style> </head> <body> <div id="app"> <el-row> <el-col :span="10"><div class="grid-content bg-purple-dark"></div></el-col> <el-col :span="10"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> </div>
<script> new Vue({ el:"#app", }); </script> </body> </html>
|
效果
Container 布局容器
容器布局:将页面分成头部区域、侧边栏区域、主区域、底部区域。
el-container标签中可以包含:el-container、el-header、el-aside、el-main、el-footer五个标签,默认el-container中的标签会从左向右排列,如果包含el-header或者el-footer,那么从上往下排列
代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| <!DOCTYPE html> <html lang="en" style="height: 100%;"> <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> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="element-ui/lib/index.js"></script> <style> *{ padding: 0; margin: 0; } </style> </head> <body style="height: 100%;"> <div id="app" style="height: 100%;"> <el-container style="height: 100%;"> <el-header style="background-color: #B3C0D1;">Header</el-header> <el-container > <el-aside style="background-color: #D3DCE6;">Aside</el-aside> <el-container style="height: 100%;"> <el-main style="background-color: #E9EEF3;">Main</el-main> <el-footer style="background-color:#B3C0D1;">Footer</el-footer> </el-container> </el-container> </el-container> </div>
<script> new Vue({ el:"#app", }); </script> </body> </html>
|
效果
表单
由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据
代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
| <!DOCTYPE html> <html lang="en" style="height: 100%;"> <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> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="element-ui/lib/index.js"></script> <style> *{ padding: 0; margin: 0; } </style> </head> <body style="height: 100%;"> <div id="app" style="height: 100%;"> <el-form :model="myForm" :rules="myRules" ref="ruleFormxxx" label-width="100px" class="demo-ruleForm"> <el-form-item label="帐号" prop="usernameRule"> <el-input v-model="myForm.username"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm()">立即创建</el-button> <el-button @click="resetForm()">重置</el-button> </el-form-item> </el-form> </div>
<script> new Vue({ el:"#app", data:{ myForm:{ }, myRules:{ usernameRule:[ { required: true, message: '请输入帐号', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ] } }, methods: { submitForm:function() { this.$refs["ruleFormxxx"].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm() { this.$refs["ruleFormxxx"].resetFields(); } } }); </script> </body> </html>
|
效果
各属性对应关系