vue基础 系统管理员 2022-10-23 11:11 161阅读 0赞 # Vue的安装 # vue的兼容性： Vue **不支持** IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器 可以下载也可以直接引入网络节点： 下载地址：下载后就是一个js文件 https://cn.vuejs.org/js/vue.js https://cn.vuejs.org/js/vue.min.js ![在这里插入图片描述][20210305080930876.png] 下载完毕后用script标签引入即可 直接引用网络节点： //cdn节点 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 用 Vue 构建大型应用时可以使用npm下载最新版 npm install vue # 初识Vue # Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动 ### MVVM模式 ### （Model-View-ViewModel 的缩写）–后面会继续学，也可以去B站找视频 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70] ### Vue基础使用 ### //初始写法 <!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>Document</title> </head> <body> <div id="app"></div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { } }); </script> </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>Document</title> <style> .dox { width: 300px; height: 300px; background: #000; } </style> </head> <body> <div id="app"> <button v-on:click='togglePage'>点击</button> //初始是默认有class类名为dox //如果isLogin为true则有类名，false无类名 <div :class='isLogin?"dox":""'></div> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { isLogin: true }, methods: { //点击事件 togglePage: function() { this.isLogin = !this.isLogin; } } }) </script> </html> ![2.gif][] ## Vue渲染 ## ### 条件渲染 ### #### v-if : 条件性地渲染一块内容 #### * v-if * v-else-if 作为else if 使用 * v-else <!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>Document</title> </head> <body> <div id="app"> <p>你好，{ {name}}</p> //pa判断是否 <h3 v-if="isA">用户类型：A </h3> <h3 v-else-if="isB">用户类型：B </h3> <h3 v-else>用户类型：C </h3> //如果随机随机数大于0.5输出yes反则输出no <h3 v-if="Math.random() > 0.5">yes</h3> <h3 v-else="Math.random() < 0.5">no</h3> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { name: "小明", isA: false, isB: false } }) </script> </body> </html> #### 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>Document</title> </head> <body> <div id="app"> <h1 v-show="ok">Hello!</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { //ok为true则显示h1内容，反之不显示 ok: true } }) </script> </body> </html> v-show不支持元素 #### v-if vs v-show #### <table> <thead> <tr> <th></th> <th>v-if</th> <th>v-show</th> </tr> </thead> <tbody> <tr> <td>方式</td> <td>删除创建DOM元素</td> <td>display样式</td> </tr> <tr> <td>条件</td> <td>直到为真才会渲染</td> <td>任何条件都会渲染</td> </tr> <tr> <td>性能</td> <td>更高的切换消耗</td> <td>更高的初始加载消耗</td> </tr> <tr> <td>场景</td> <td>条件很少改变</td> <td>频繁切换</td> </tr> </tbody> </table> #### v-for #### <p v-for = "item index in arrs" :key = "index"></p> ##### v-for 中使用数组 ##### //v-for = "item in arr" item->(item,index) item位值，index为索引 <!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>Document</title> </head> <body> <div id="app"> <h1 v-for="(item,index) in arr">{ {index}}--{ {item}}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { arr: [1, 2, 4] } }) </script> </body> </html> ![在这里插入图片描述][20210305081025756.png] ##### v-for中使用对象 ##### //v-for = "value in obj" value -> (value,name,index) value为值，name为属性，index为索引 <!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>Document</title> </head> <body> <div id="app"> <h1 v-for="(value,name,index) in obj">{ {value}}--{ {name}}--{ {index}}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { obj: { id: 1, name: '张三' } } }) </script> </body> </html> ![在这里插入图片描述][20210305081037384.png] #### 列表＋条件渲染 #### 使用v-for + v-if 永远不要把 v-if 和 v-for 同时用在同一个元素上。 一般我们在两种常见的情况下会倾向于这样做： * 为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。 * 为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol) ### 指令：带有v-前缀的属性 ### 1.v-bind指令：响应式更新HTML <div v-bind:id = "xxx"></div> 布尔属性值为null、undefined、false 则属性不会出现在渲染出的元素中 2.v-on指令：监听DOM事件 前两个的缩写： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1] [20210305080930876.png]: /images/20221023/2389e21f59e1428d98dc8fd4b6d9dbc9.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]: /images/20221023/0046c2c5d64a41a08d8591892203416b.png [2.gif]: /images/20221023/27381d959ecf42e9a28116c93bb80240.png [20210305081025756.png]: /images/20221023/03d83ee4c4bb4326acdb35f48871dbcc.png [20210305081037384.png]: /images/20221023/8c432ea66fad48198d00a39bdd452e54.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]: /images/20221023/c3a0459d55bf433eb3a0f1388e4a14d3.png
相关 vue基础 1.VueJs的介绍和MVVM模式介绍 1.什么是VueJS？ Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。 Vue.js 的目标是通过尽可能简单的 爱被打了一巴掌/ 2022年11月29日 05:51/ 0 赞/ 165 阅读
相关 Vue基础 Vue入门 一、什么是vue？ JavaScript的框架 框架是不同于向jQuery这样的js库，框架需要遵守它的规则，才能使用 二、 川长思鸟来/ 2022年11月22日 12:59/ 0 赞/ 225 阅读
相关 vue基础 Vue基础 1模板语法 插值： 插值表达式：\{ \{ \}\} ,将插值表达式中内容嵌入到页面中。v-text 纯HTML： v-html，识别html标 港控/mmm°/ 2022年10月25日 04:59/ 0 赞/ 139 阅读
相关 vue基础 Vue的安装 vue的兼容性： Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMA 系统管理员/ 2022年10月23日 11:11/ 0 赞/ 162 阅读
相关 vue 基础 1. 数据绑定 //方法1 <div id="app"> { {message}} </div> //方法2 偏执的太偏执、/ 2022年05月15日 13:28/ 0 赞/ 177 阅读
相关 Vue基础 vue入门 1.基本结构 <!-- 1.导入vue.js --> <script src="vue.js"></script> < 待我称王封你为后i/ 2022年02月25日 09:46/ 0 赞/ 233 阅读
相关 Vue基础 格式： v-xxx = “mustache语法” ； v-xxx = “msg”； v-xxx = “\{ \{msg\}\}” ×； Vue.js 的核心是一 古城微笑少年丶/ 2022年01月27日 12:27/ 0 赞/ 247 阅读
相关 Vue基础 本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 非商业用途自由转载，保持署名，注明出处！ ------- ゝ一纸荒年。/ 2021年12月04日 10:02/ 0 赞/ 270 阅读
相关 Vue_基础 Vue\_基础 概述 示例 相关语法 动态样式 class style 概述 Vue (读音 /vjuː/，类似 ゞ 浴缸里的玫瑰/ 2021年10月06日 04:34/ 0 赞/ 329 阅读
爱被打了一巴掌
川长思鸟来
港控/mmm°
系统管理员
ゞ 浴缸里的玫瑰
还没有评论，来说两句吧...