- A+
所属分类：Web前端
一.Vue 介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二.使用方法
下载到本地引用：
开发版： https://cn.vuejs.org/js/vue.js
生产版：https://cn.vuejs.org/js/vue.min.js
在线引用：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> npm安装:
// 最新稳定版 npm install vue // 安装vue-cli脚手架构建工具 npm install --global vue-cli 三.vue入门指令
vue实例创建
<body> <!-- 定义id为app作为 锚点 --> <p id="app"> <!-- vue 表达式{{}} 两个花括号 ，里面是数据名--> {{msg}} </p> <!-- 引入 vue.js --> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 创建 vue 实例 new Vue({ // el 代表的是 页面中的 id值 el: '#app', // data 是数据 ，与json数据一样 data: { msg: "hello vue", } }) // 在页面就会显示 hello vue </script> </body> 注意：vue 表达式语法是两个花括号{{msg}} 里面写实例中对应的数据名，数据名必须在对应的vue实例之下。
在写实例vue时 要注意 属性和 属性名之间的空格
- 指令
- 本质就是自定义属性
- Vue中指令都是以 v- 开头
v-text指令
<body> <div id="app"> <!-- 在使用 v-text标签时就不需要{{}} 效果等同于{{msg}} --> <p v-text="msg"></p> <p>{{msg}}</p> </div> <!-- 导入vue.js --> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 在写实例vue时 要注意 属性和 属性名之间的空格 new Vue({ el: '#app', data: { msg: "v-text 测试" } }) </script> <!-- 页面效果 打印了两个 v-text 测试--> </body> v-html指令
-
用法和v-text 相似 但是他可以将HTML片段填充到标签中
-
可能有安全问题, 一般只在可信任内容上使用
v-html，永不用在用户提交的内容上 -
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
<body> <div id="app"> <!-- v-html 指令会将标签渲染解析 --> <p v-html="html"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> --> <p v-text="text"></p> <!-- msg 普通语法 --> <p>{{msg}}</p> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { msg: "<span >普通双标签不会解析span标签</span>", html: "<span>v-html指令可以渲染解析标签</span>", text: "<span>v-text 不会解析 标签 跟双花括号一样</span>" } }) </script> </body> v-text 和 v-html相当于原生js中的 .text 和 .html 相同 是一样的性质
v-pre指令
- 显示原始信息跳过编译过程
- 跳过这个元素和它的子元素的编译过程。
- 一些静态的内容不需要编译加这个指令可以加快渲染
<body> <div id="app"> <!-- 使用v-pre 指令 会跳过vue的编译过程 所以p标签中的{{msg}} 不会被vue识别编译 则页面会直接显示 {{msg}} --> <p v-pre>{{msg}}</p> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { msg: "v-pre 指令会使该语法表达式不会被识别" } }) </script> </body> v-model指令
-
v-model是一个指令，限制在
<input>、<select>、<textarea>、components中使用 -
v-model是一个双向数据绑定指令
双向数据绑定
- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
<body> <div id="app"> <span>{{msg}}</span> <br> <!-- 在页面测试时 当修改 input 内容，vue实例中的msg值会跟着改变 上面的span标签中的值 也会跟随 vue实例中数据改变，v-model 双向 绑定的好处已经很明显了 --> <input type="text" name="" id="" v-model="msg" /> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { msg: "v-model指令测试" } }) </script> </body> v-once指令
<body> <div id="app"> <!-- 使用v-pre 指令 会跳过vue的编译过程 所以p标签中的{{msg}} 不会被vue识别编译 则页面会直接显示 {{msg}} --> <p v-pre>{{msg}}</p> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { msg: "v-pre 指令会使该语法表达式不会被识别" } }) </script> </body> mvvm概念
- MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
- m model
- 数据层 Vue 中 数据层 都放在 data 里面
- v view 视图
- Vue 中 view 即 我们的HTML页面
- vm （view-model） 控制器 将数据和视图层建立联系
- vm 即 Vue 的实例 就是 vm
v-on指令
<body> <div id="app"> <p>{{num}}</p> <!-- 绑定点击事件 每点击一下，num值++一下 一般不推荐这样操作--> <button type="button" v-on:click="num++">普通点击</button> <button type="button" v-on:click="handlel($event)" name="event测试">点击</button> <button type="button" v-on:click="handlel2(123,222,$event)">带参点击</button> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { num: 0 }, methods: { // methods 存放调用的方法 handlel: function(event) { console.log(event.target.innerHTML) console.log(event.target.name) }, handlel2: function(p, p1, event) { console.log(p, p1) console.log(event.target.innerHTML) // this的指向为当前vue实例 this.num++ 就是将num的值++ this.num++; } } }) </script> </body> 拓展：$event 经过对参数的对比，发现 该event传入的是当前标签的对象，我们可以使用该对象获取参数类如获取文本内容 event.target.innerHTML 或者event.target.name
按键修饰符
在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
<body> <div id="app"> <!-- 当键盘每点击一次时触发事件调用submit方法--> <input v-on:keyup="submit($event)" value="键盘点击" /> <!-- 指定特定的键盘键值 来调用 只有当点击小写a时才会触发 --> <input v-on:keyup.65="submit($event)" type="button" value="65" /> <!-- 当鼠标键抬起时触发事件 调用 mouseup 方法 --> <input v-on:mouseup="mouseup($event)" type="button" value="鼠标点击" /> <!-- 以上 是键盘鼠标事件的演示 ，还可以拓展其他的类似的操作、 常用的按键修饰符 .enter => enter键 .tab => tab键 .delete (捕获“删除”和“退格”按键) => 删除键 .esc => 取消键 .space => 空格键 .up => 上 .down => 下 .left => 左 .right => 右 --> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { }, methods: { submit: function(event) { console.log(event.target.value); }, mouseup: function(event) { console.log(event.target.value); } } }) </script> </body> 自定义按键别名
- 在Vue中可以通过
config.keyCodes自定义按键修饰符别名
<body> <div id="app"> <button type="button" v-on:keydown.fn="prompt($event)" value="我是自定义按键">我是自定义按键</button> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 将 a 的 键值自定义成fn ，然后在控件中直接使用fn 一般情况下不会这样使用 Vue.config.keyCodes.fn = 65; new Vue({ el: "#app", methods: { prompt: function(event) { alert(event.target.value); } } }) </script> </body> keyCode值一览表
| 虚拟键 | 十六进制值 | 十进制值 | 相应键盘或鼠标键 |
|---|---|---|---|
| VK_LBUTTON | 01 | 1 | 鼠标左键 |
| VK_RBUTTON | 02 | 2 | 鼠标右键 |
| VK_CANCEL | 03 | 3 | Ctrl-Break键 |
| VK_MBUTTON | 04 | 4 | 鼠标中键 |
| VK_BACK | 08 | 8 | Backspace键 |
| VK_TAB | 09 | 9 | Tab键 |
| VK_CLEAR | 0C | 12 | Clear键 |
| VK_RETURN | 0D | 13 | Enter键 |
| VK_SHIFT | 10 | 16 | Shift键 |
| VK_CONTROL | 11 | 17 | Ctrl键 |
| VK_MENU | 12 | 18 | Alt键 |
| VK_PAUSE | 13 | 19 | Pause键 |
| VK_CAPITAL | 14 | 20 | Caps Lock键 |
| VK_ESCAPE | 1B | 27 | Esc键 |
| VK_SPACE | 20 | 32 | Space键 |
| VK_PRIOR | 21 | 33 | Page Up键 |
| VK_NEXT | 22 | 34 | Page Down键 |
| VK_END | 23 | 35 | End键 |
| VK_HOME | 24 | 36 | Home键 |
| VK_LEFT | 25 | 37 | ←键 |
| VK_UP | 26 | 38 | ↑键 |
| VK_RIGHT | 27 | 39 | →键 |
| VK_DOWN | 28 | 40 | ↓键 |
| VK_SELECT | 29 | 41 | Select键 |
| VK_PRINT | 2A | 42 | Print键 |
| VK_EXECUTE | 2B | 43 | Execute键 |
| VK_SNAPSHOT | 2C | 44 | Print Screen键 |
| VK_INSERT | 2D | 45 | Ins键 |
| VK_DELETE | 2E | 46 | Del键 |
| VK_HELP | 2F | 47 | Help键 |
| VK_0 | 0x30 | 48 | 0键 |
| VK_1 | 0x 31 | 49 | 1键 |
| VK_2 | 0x 32 | 50 | 2键 |
| VK_3 | 0x 33 | 51 | 3键 |
| VK_4 | 0x 34 | 52 | 4键 |
| VK_5 | 0x 35 | 53 | 5键 |
| VK_6 | 0x 36 | 54 | 6键 |
| VK_7 | 0x 37 | 55 | 7键 |
| VK_8 | 0x 38 | 56 | 8键 |
| VK_9 | 0x 39 | 57 | 9键 |
| VK_A | 41 | 65 | A键 |
| VK_B | 42 | 66 | B键 |
| VK_C | 43 | 67 | C键 |
| VK_D | 44 | 68 | D键 |
| VK_E | 45 | 69 | E键 |
| VK_F | 46 | 70 | F键 |
| VK_G | 47 | 71 | G键 |
| VK_H | 48 | 72 | H键 |
| VK_I | 49 | 73 | I键 |
| VK_J | 4A | 74 | J键 |
| VK_K | 4B | 75 | K键 |
| VK_L | 4C | 76 | L键 |
| VK_M | 4D | 77 | M键 |
| VK_N | 4E | 78 | N键 |
| VK_O | 4F | 79 | O键 |
| VK_P | 50 | 80 | P键 |
| VK_Q | 51 | 81 | Q键 |
| VK_R | 52 | 82 | R键 |
| VK_S | 53 | 83 | S键 |
| VK_T | 54 | 84 | T键 |
| VK_U | 55 | 85 | U键 |
| VK_V | 56 | 86 | V键 |
| VK_W | 57 | 87 | W键 |
| VK_X | 58 | 88 | X键 |
| VK_Y | 59 | 89 | Y键 |
| VK_Z | 5A | 90 | Z键 |
| VK_LWIN | 5B | 91 | 左Windows键 |
| VK_RWIN | 5C | 92 | 右Windows键 |
| VK_APPS | 5D | 93 | 应用程序键 |
| VK_SLEEP | 5F | 95 | 休眠键 |
| VK_NUMPAD0 | 60 | 96 | 小数字键盘0键 |
| VK_NUMPAD1 | 61 | 97 | 小数字键盘1键 |
| VK_NUMPAD2 | 62 | 98 | 小数字键盘2键 |
| VK_NUMPAD3 | 63 | 99 | 小数字键盘3键 |
| VK_NUMPAD4 | 64 | 100 | 小数字键盘4键 |
| VK_NUMPAD5 | 65 | 101 | 小数字键盘5键 |
| VK_NUMPAD6 | 66 | 102 | 小数字键盘6键 |
| VK_NUMPAD7 | 67 | 103 | 小数字键盘7键 |
| VK_NUMPAD8 | 68 | 104 | 小数字键盘8键 |
| VK_NUMPAD9 | 69 | 105 | 小数字键盘9键 |
| VK_MULTIPLY | 6A | 106 | 乘号键 |
| VK_ADD | 6B | 107 | 加号键 |
| VK_SEPARATOR | 6C | 108 | 分割键 |
| VK_SUBSTRACT | 6D | 109 | 减号键 |
| VK_DECIMAL | 6E | 110 | 小数点键 |
| VK_DIVIDE | 6F | 111 | 除号键 |
| VK_F1 | 70 | 112 | F1键 |
| VK_F2 | 71 | 113 | F2键 |
| VK_F3 | 72 | 114 | F3键 |
| VK_F4 | 73 | 115 | F4键 |
| VK_F5 | 74 | 116 | F5键 |
| VK_F6 | 75 | 117 | F6键 |
| VK_F7 | 76 | 118 | F7键 |
| VK_F8 | 77 | 119 | F8键 |
| VK_F9 | 78 | 120 | F9键 |
| VK_F10 | 79 | 121 | F10键 |
| VK_F11 | 7A | 122 | F11键 |
| VK_F12 | 7B | 123 | F12键 |
| VK_F13 | 7C | 124 | F13键 |
| VK_F14 | 7D | 125 | F14键 |
| VK_F15 | 7E | 126 | F15键 |
| VK_F16 | 7F | 127 | F16键 |
| VK_F17 | 80 | 128 | F17键 |
| VK_F18 | 81 | 129 | F18键 |
| VK_F19 | 82 | 130 | F19键 |
| VK_F20 | 83 | 131 | F20键 |
| VK_F21 | 84 | 132 | F21键 |
| VK_F22 | 85 | 133 | F22键 |
| VK_F23 | 86 | 134 | F23键 |
| VK_F24 | 87 | 135 | F24键 |
| VK_NUMLOCK | 90 | 144 | Num Lock键 |
| VK_SCROLL | 91 | 45 | Scroll Lock键 |
| VK_LSHIFT | A0 | 160 | 左Shift键 |
| VK_RSHIFT | A1 | 161 | 右Shift键 |
| VK_LCONTROL | A2 | 162 | 左Ctrl键 |
| VK_RCONTROL | A3 | 163 | 右Ctrl键 |
| VK_LMENU | A4 | 164 | 左Alt键 |
| VK_RMENU | A5 | 165 | 右Alt键 |
v-bind指令
- v-bind 指令被用来响应地更新 HTML 属性
<style type="text/css"> /* 定义几组样式 */ .p1Color { color: blue; } .p2Color { color: darkred; } .p1Text { font-size: 18px; } .p1Text { font-size: 10px; } </style> </head> <body> <div id="app"> <!-- 绑定 p1Color 并选择isColor isColor定义为true 也可以直接写true--> <p v-bind:class="{p1Color:isColor}"> 学习 v-bind 指令 </p> <button v-on:mouseup="changeColor">{{chgColor}}</button> <p></p> <p></p> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { isColor: true, isText: true, color: "yellow", size: "14px", chgColor: "关闭样式" }, methods: { changeColor: function() { // 点击事件 关闭开启 p标签的样式 if (this.isColor === true) { this.isColor = false; this.chgColor = "开启样式" } else { this.isColor = true; this.chgColor = "关闭样式" } } } }) </script> </body> v-bind绑定class
<style type="text/css"> /* 定义几组样式 */ .p1Color { color: blue; } .p2Color { color: darkred; } .p1Text { font-size: 18px; } .p1Text { font-size: 10px; } </style> </head> <body> <div id="app"> <!-- 将 样式 定义在vue实例中,然后 绑定到DOM上 --> <!-- :class 等同于 v-on:calss --> <p :class="[colorA,textA]"> 学习 v-bind 指令 </p> <button v-on:mouseup="changeAColor">{{chgColor}}</button> <p v-bind:class="[colorB,textB]"> 学习 v-bind 指令绑定 class </p> <button v-on:mouseup="changeBColor">{{chgColor}}</button> <p></p> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { colorA: "p1Color", colorB: 'p2Color', textA: 'p1Text', textB: 'p2Text', chgColor: "切换样式" }, /*定义 两个 方法切换样式 */ methods: { changeAColor: function() { if ("p1Color" === this.colorA) { this.colorA = 'p2Color'; } else { this.colorA = 'p1Color'; } }, changeBColor: function() { if ("p2Color" === this.colorB) { this.colorB = 'p1Color'; } else { this.colorB = 'p2Color'; } } } }) </script> </body> 绑定对象和绑定数组 的区别
- 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
- 绑定数组的时候数组里面存的是data 中的数据
绑定style v-bind:style
<body> <div id="app"> <!-- :style 等同于 v-bind:style --> <p :style="{ color:colorB, fontSize:fontSize}"> v-bind:style 样式绑定 内联样式 </p> <p v-bind:style="[styleB, styleA]"> v-bind:style 样式绑定 数组绑定 </p> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { /* 在data里面定义几组 样式数据 */ styleObject: { color: "green", fontSize: "18px" }, colorB:"green", fontSize:"18px", styleA: { color: "red" }, styleB: { fontSize: "28px" } } }) </script> </body> 分支循环
v-if指令
<body> <div id="app"> <!-- 使用v-if 指令来判断flag --> <p v-if="flag === true"> {{msg}} </p> <p v-if="flag === false"> {{msg2}} </p> <button type="button" @click="changeClick">点我</button> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { flag: true, // 设置标志 为true 用于页面判断 msg: "我出来了", msg2: "我消失了" }, methods: { changeClick: function() { if (this.flag === true) { this.flag = false; } else { this.flag = true; } } } }) </script> </body> v-show指令
<body> <div id="app"> <p v-show="1===1">v-show判断为true时我显示了</p> <p v-show="1===2">v-show为flase时我隐藏</p> <!-- 使用 v-show 指令来判断flag --> <p v-show="flag === true"> {{msg}} </p> <p v-show="flag === false"> {{msg2}} </p> <button type="button" @click="changeClick">点我</button> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { flag: true, // 设置标志 为true 用于页面判断 msg: "我出来了", msg2: "我消失了" }, methods: { changeClick: function() { if (this.flag === true) { this.flag = false; } else { this.flag = true; } } } }) </script> </body> v-show 和 v-if的区别
- v-show本质就是标签display设置为none，控制隐藏
- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
- v-if是动态的向DOM树内添加或者删除DOM元素
- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
v-for循环指令
<body> <div id="app"> <!-- 循环遍历 data中 items 数据 --> <p v-for="item in items"> <span>id: {{item.id}} </span> <span>name: {{item.name}} </span> <span>age: {{item.age}} </span> <br> </p> <!-- 页面中将会循环遍历 id: 1 name: 李四 age: 20 id: 2 name: 王五 age: 19 id: 3 name: 张飞 age: 33 --> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", // 准备 循环模拟数据 data: { items: [{ id: 1, name: "李四", age: 20 }, { id: 2, name: "王五", age: 19 }, { id: 3, name: "张飞", age: 33 }, ] } }) </script> </body> 注意点:
- 不推荐同时使用
v-if和v-for - 当
v-if与v-for一起使用时，v-for具有比v-if更高的优先级。
"="和""和"="的区别
<body> <!-- 一个等号 是赋值的意思 主要用于js里面 --> <div id="app"> <!-- 使用双等时 --> <p v-if="num == '1' ">我是双等于 双等于 不严谨 普通的数字1可以等于字符串"1"</p> <!-- 使用三等时 由于strNum定义为字符型1 所以不等于数字型1--> <p v-if="strNum==='1'">我是双等于 双等于 不严谨 普通的数字1可以等于字符串"1"</p> <!-- 同样使用于其他类型数据 eg Boolean和string的ture相对比 --> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { // 定义一个普通的1 一个字符类型的1 num: 1, strNum: '1' }, }) </script> </body> 四.Vue选项卡案例
<body> <!-- 选项卡主体 --> <div id="app" class="tableCard"> <div id="" class="tableHead"> <ul> <!-- 取选项卡数据 遍历标题 --> <!-- defaultStyle 如果标志id等于遍历id则加上默认样式 --> <li v-for="title in tableLists" :class="title.id===flagId?'defaultStyle':''"> <!-- 绑定点击事件change 传入对应数据id --> <span v-on:click='change(title.id)'>{{title.title}}</span> </li> </ul> </div> <div id="" class="tableBody"> <!-- 取选项卡数据 遍历图片路径 --> <ul v-for="img in tableLists"> <!-- 数据id等于标志id 则让改图片显现 --> <li v-if="img.id === flagId"> <img :src="img.path" v-bind:style="showImg"> </li> <!--不等于的就隐藏 --> <li v-else> <img :src="img.path"> </li> </ul> </div> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <!-- vue 实例--> <script type="text/javascript"> new Vue({ el: "#app", // 定义图片样式 data: { flagId: 1, showImg: "display: block;", tableLists: [{ id: 1, title: "选项卡1", path: "img/3Dbg01.jpg" alt="Vue入门常用指令" }, { id: 2, title: "选项卡2", path: "img/3Dbg02.jpg" }, { id: 3, title: "选项卡3", path: "img/3Dbg03.jpg" }, ] }, methods: { // 每点击一次修改flagId的值为传入的值 change: function(titleId) { this.flagId = titleId; } } }) </script> </body> 参考demo
gitee： https://gitee.com/li_shang_shan/vue-entry-instruction-demo
