Vue介绍
- Vue 是一套构建用户界面的渐进式前端框架。
- 渐进式框架：渐进式框架，就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。
- 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
- 通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
- 特点：
- 易用：在有 HTML CSS JavaScript 的基础上，快速上手。
- 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
- 性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
使用步骤
-
引入vue,js文件
-
编写脚本
-
创建Vue对象
let vue = new Vue({ //选项列表 }); -
编写选项列表
- el选项：用于指定此选项所在的Vue对象，解析的模板区域。
- data选项：用于保存当前Vue对象中的数据，在视图中声明的变量需要在此处赋值。
- methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象。
-
渲染视图
-
在视图部分获取脚本部分的数据
格式：{{变量名}}
-
-
-
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="div"> {{msg}} </div> </body> <!-- 引入vue.js --> <script src="vuejs/vue.js"></script> <script> //创建vue对象 new Vue({ //指定此vue对象解析的模板区域 el: "#div", //定义属性 data: { msg: "呵呵呵" }, //定义函数 methods: { //展示一下函数编写的格式 func: function () { alert("来玩啊"); } } }); </script> </html>
Vue常用指令
操作文本
-
v-html：将指定的的属性展示到标签中，并且会解析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> </head> <body> <div id="div"> <!-- vue普通文本插值表达式 --> <div>{{msg}}</div> <!-- 绑定v-html执行 --> <div v-html="msg"></div> </div> </body> <script src="vuejs/vue.js"></script> <script> //创建vue对象 new Vue({ //指定此vue管理的模本区域 el: "#div", //定义属性 data: { msg: "<b>鲁班七号</b>" } }); </script> </html>
操作属性
-
v-bind：为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> </head> <div id="div"> <!-- 创建一个百度a链接 --> <!-- 普通写法 --> <a v-bind:href="url">百度</a> <!-- 简写 --> <a :href="url">百度</a> </div> <body> </body> <script src="vuejs/vue.js"></script> <script> //创建vue对象 new Vue({ //指定此vue对象解析的模板区域 el: "#div", //定义属性 data: { url: "https://www.baidu.com" } }); </script> </html>
条件渲染
-
v-if、v-else-if、v-else、v-show
根据给定的条件渲染元素，条件值为true就渲染元素，false就不渲染。
-
v-if、v-else-if、v-else与v-show的区别
v-if、v-else-if、v-else是当条件为false直接不加载元素，而v-show是当条件为false的时候，会加载元素，但是会修改元素的css样式中的display属性，将元素隐藏
-
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <!-- 根据对3取余来判断，如果余数为0显示div1，如果余数为1显示div2，如果余数为2显示div3 --> <div id="div"> <div v-if="num % 3 == 0">div1</div> <div v-else-if="num % 3 == 1">div2</div> <div v-else="num % 3 == 2">div3</div> <div v-show="bl">show条件渲染</div> </div> <body> </body> <script src="vuejs/vue.js"></script> <script> //创建vue对象 new Vue({ //执行此vue解析的模板区域 el: "#div", //定于属性 data: { num: 1, bl: false } }); </script> </html>
列表渲染
-
v-for：遍历容器的元素或对象的属性，跟增强for循环差不多用法
-
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <div id="div"> <!-- 遍历数组 --> <ul> <!-- 使用v-for指令，指定要遍历的属性，遍历出来的每个元素取名为element --> <li v-for="element of arr"> <!-- 使用插值表达式，将元素渲染到页面 --> {{element}} </li> </ul> <hr> <!-- 遍历对象 --> <ul> <li v-for="value of student"> {{value}} </li> </ul> </div> <body> </body> <script src="vuejs/vue.js"></script> <script> //创建vue对象 new Vue({ //指定此vue对象解析的模板区域 el: "#div", //定义属性 data: { //数组 arr: ["不知火舞", "上官婉儿", "娜可露露"], //对象 student: { name: "韩信", age: 21 } } }); </script> </html>
事件绑定
-
v-on：为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> </head> <body> <div id="div"> <!--方法名加不加括号都可以--> <!--普通方式--> <button v-on:click="func">按钮1</button> <!--简写方法--> <button @click="func()">按钮1</button> </div> </body> <script src="vuejs/vue.js"></script> <script> //创建vue对象 new Vue({ //指定此vue对象解析的模板区域 el: "#div", //定义函数 methods: { func: function (obj) { alert("hehehe"); } } }); </script> </html>
表单双向绑定
-
双向数据绑定
更新 data 数据，页面中的数据也会更新。
更新页面数据，data 数据也会更新。
-
v-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> </head> <body> <div id="div"> <form action=""> <!-- 使用v-model指令，将表单元素与vue中定义的属性进行绑定。 当表单元素中的数据发生变化，data中的属性也会变化，反之亦然 --> 姓名：<input type="text" v-model="username"> 年龄：<input type="text" v-model="age"> </form> </div> </body> <script src="vuejs/vue.js"></script> <script> //创建vue对象 new Vue({ //指定此vue对象解析的模板区域 el: "#div", //定义属性 data: { username: "橘右京", age: 36 } }); </script> </html>
扫一扫
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
