vue基础 爱被打了一巴掌 2022-11-29 05:51 180阅读 0赞 ### 1.VueJs的介绍和MVVM模式介绍 ### 1.什么是VueJS？ Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。 Vue.js 的目标是通过尽可能简单的 API 实 现响应的数据绑定和组合的视图组件。 它不仅易于上手， 还便于与第三方库或既有项目整合。 官网：[https://cn.vuejs.org/][https_cn.vuejs.org] 2.MVVM模式 Model-View-ViewModel 模型-视图-视图模型，主要目的是分离视图（View） 和模型（Model） ，从而实现视图 与 模型的双向绑定！！！ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbl9kYXJr_size_16_color_FFFFFF_t_70_pic_center] ### 2.vue.js下载及安装（直接引入js文件） ### 1.下载地址：[https://vuejs.org/v2/guide/installation.html][https_vuejs.org_v2_guide_installation.html] ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rOUm6Jqk-1597825389894)(assets/1597629448245.png)\]][img-rOUm6Jqk-1597825389894_assets_1597629448245.png] 2.下载js文件后引入 ### 3.VueJs的快速入门 ### 1…建立项目，建立vue.js文件 2.建立html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJS入门</title> <script src="js/vue.js"></script> </head> <body> <!-- div就是视图 --> <div id="app"> { {message}} </div> <script> //Vue对象视图模型对象（VM对象） new Vue({ el: '#app', // 绑定视图 data:{ // data就是模型（数据） message:'VueJS入门程序' } }) </script> </body> </html> ### 4.VueJs的插入值表达式 ### 插入表达式语法： { {message}} 插入表达式作用： 1.直接获取模型数据 2.进行四则运算 3.进行三目运算 <div id="app"> { {num}} <hr/> { {num*5}} <hr> <!-- == : 比较内容是否相等 === : 同时比较内容和类型是否相等 --> { {num===10?'是':'否'}} <hr> </div> <script> new Vue({ el: '#app', data:{ num: '10' } }) </script> 插入表达式不合法： 1.不能定义变量 2.不能使用流程控制 <!--{ {var name ='eric' }}--> <!--{ { if(num==10){ return '是' }else{ return '否' } }}--> ### 5.VueJs指令：v-on指令 ### `v-on` 指令，它用于监听 DOM 事件，下面的参数是监听的事件名，可以缩写为`@`表示 #### 1.事件 #### 1.v-on：click（点击事件） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJS-v-on:click</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> { {text}} <hr> <button v-on:click="fun('小苍')">点我</button> <hr> <button @click="fun('小泽')">点我</button> </div> <script> new Vue({ el: '#app', data:{ text:'你点了' }, //定义函数 methods:{ fun:function (name) { alert(name) //修改模型的数据！！！ // text = text + name // 错误用法 //必须使用this关键来修改模型数据 //console.log(this) this.text = this.text + name } } }) </script> </body> </html> 2.v-on：keydown（键盘按下事件） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJS-v-on:keydown</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 获取当前元素方法 $event --> 转账金额：<input type="text" @keydown="fun($event)"> </div> <script> new Vue({ el: '#app', data:{ }, //定义函数 methods:{ fun:function (e) { //需求：只能输入数字 //alert('键盘按下啦') //e.keyCode：获取键盘输入的内容 var keyCode = e.keyCode //alert(keyCode) //判断不是数字 if( keyCode < 48 || keyCode > 57){ alert('不是数字') //输入的内容不回显到输入框 //阻止事件的默认动作 e.preventDefault() } } } }) </script> </body> </html> 3.v-on：mouseover（鼠标移动事件） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJS-v-on:mouseover</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 默认：执行事件冒泡过程 --> <div style="background-color: pink" @mouseover="fun1"> 我是一个div <textarea rows="4" cols="40" @mouseover="fun2($event)">我是一个多行文本框</textarea> </div> </div> <script> new Vue({ el: '#app', data:{ }, //定义函数 methods:{ fun1:function (e) { alert('经过了div') }, fun2:function (e) { alert('经过了textarea') //阻止事件冒泡 e.stopPropagation() } } }) </script> </body> </html> #### 2.事件修饰符(v-on：事件名.事件修饰符) #### 事件修饰符，就是简化了事件方法的调用 Vue.js 通过由点(.)表示的指令后缀来调用修饰符。 .stop :阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交(相当于event.preventDefault()) .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行 .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。 .self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 PS:1).passive 和 .prevent 不能一起使用:如果用了.prevent 将会被忽略； 2).self 和 .stop 区别: * self只响应当前元素自身触发的事件，不会响应经过冒泡触发的事件，并不会阻止冒泡继续向外部触发。 * stop是从自身开始不向外部发射冒泡信号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJS-v-on事件修饰符</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 没有使用事件修饰符 --> <form @submit="fun($event)" action="http://www.baidu.com"> <input type="submit"> </form> <hr> <!-- 使用事件修饰符 --> <form @submit.prevent action="http://www.baidu.com"> <input type="submit"> </form> <hr> <!-- 没有事件修饰符 --> <div style="background-color: palegreen" @click="fun1"> <a href="http://www.baidu.com" @click="fun2($event)">百度</a> </div> <hr> <!-- 使用了事件修饰符 --> <div style="background-color: palegreen" @click="fun1"> <a href="http://www.baidu.com" @click.stop>百度</a> </div> </div> <script> new Vue({ el: '#app', data:{ }, //定义函数 methods:{ /*fun:function (e) { alert('===') //阻止默认动作 e.preventDefault() }*/ fun1:function () { alert('点击了div') }, /* fun2:function (e) { e.stopPropagation() }*/ } }) </script> </body> </html> #### 3.按键修饰符：（v-on：事件名.按键修饰符） #### 按键修饰符，简化指定按键的逻辑处理 .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJS-v-on按键修饰符</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 没有使用按键修饰符 --> 用户名：<input type="text" @keydown="login($event)"><br> 密码：<input type="password" @keydown="login($event)"><br> <hr> <!-- 使用按键修饰符(按下enter或space键才可触发事件) --> 用户名：<input type="text" @keydown.enter.space="login"><br> 密码：<input type="password" @keydown.enter.space="login"><br> </div> <script> new Vue({ el: '#app', data:{ }, //定义函数 methods:{ /*login:function (e) { //alert(e.keyCode) if(e.keyCode==13 ){ alert('登录中...') } }*/ login:function () { alert('登录中...') } } }) </script> </body> </html> ### 8.VueJs指令：v-text与v-html ### v-text: 原样输入， 和 \{ \{message\}\} 的效果一样的 v-html: 采用html格式输出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJS-v-text与v-html</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> 插入值表达式输出： { {content}} <hr> v-text输出：<span v-text="content"></span> <hr> v-html输出： <span v-html="content"></span> </div> <script> new Vue({ el: '#app', data:{ content:'<h1>今天下雷雨啊，快点回家收衣服啦</h1><span style="color: red">好啊</span>' } }) </script> </body> </html> ### 9.VueJs指令：v-bind ### v-bind: 用于在html标签的属性上绑定模型数据！！！！ `v-bind:` 指令可以用于响应式地更新 HTML attribute，`v-bind`可以缩写为`:` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJS-v-bind指令</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 插入值表达式不能在html标签的属性上面获取模型数据！！！！！ 如果需要在html标签的属性上绑定模型数据，就必须使用v-bind --> <!-- dataColor是data的数据 --> <span v-bind:style="{ color: dataColor}">我是小苍</span> <hr> <span :style="'color: '+dataColor">我是小苍</span> <hr> <button @click="change">改变颜色</button> <hr> <a :href="'http://localhost:9001/user/editUser.do?id='+id">编辑用户</a> </div> <script> new Vue({ el: '#app', data:{ dataColor: 'red', id: 300 }, methods:{ change:function () { this.color = 'blue' } } }) </script> </body> </html> ### 10.VueJs指令：v-model ### v-model: 用于对表单的数据双向绑定！！ 注意：v-bind只能做单向绑定（通过模型修改来影响视图） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJS-v-model指令</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!--<form> 用户名：<input type="text" :value="username"><br> 年龄：<input type="text" :value="age"><br> 住址：<input type="text" :value="addr"><br> <button @click="update">提交</button> </form>--> <form> 用户名：<input type="text" v-model="user.username"><br> 年龄：<input type="text" v-model="user.age"><br> 住址：<input type="text" v-model="user.addr"><br> <button @click="update">提交</button> </form> </div> <script> new Vue({ el: '#app', data:{ user:{ username:'小明', age:30, addr:'广州' } }, methods:{ update:function () { alert(this.user.username+"---"+this.user.age+"---"+this.user.addr) } } }) </script> </body> </html> ### 11.VueJs指令：v-for ### 遍历数组： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJS-v-for遍历数组</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <li v-for="(city,index) in citys">{ {city}}====={ {index}}</li> </div> <script> new Vue({ el: '#app', data:{ citys:['东莞','惠州','十巷'] }, methods:{ } }) </script> </body> </html> 遍历对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJS-v-for遍历对象</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <li v-for="(value,name) in user">{ {name}}=============={ {value}}</li> </div> <script> new Vue({ el: '#app', data:{ user:{ username:'小明', age:30, addr:'广州' } }, methods:{ } }) </script> </body> </html> 遍历对象数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJS-v-for遍历对象数组</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <li v-for="(user,index) in userList">{ {user.username}}=============={ {index}}</li> <hr> <table border="1"> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> <td>地址</td> </tr> <tr v-for="(user,index) in userList"> <td>{ {index+1}}</td> <td>{ {user.username}}</td> <td>{ {user.age}}</td> <td>{ {user.addr}}</td> </tr> </table> </div> <script> new Vue({ el: '#app', data:{ userList:[ { username:'小明', age:30, addr:'广州' }, { username:'小红', age:33, addr:'深圳' }, { username:'小王', age:35, addr:'东莞' } ] }, methods:{ } }) </script> </body> </html> ### 12.VueJs指令：v-if与v-show ### v-if: 显示与隐藏，和v-else结合，用于条件判断 v-show: 显示与隐藏，相当于display样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueJS-v-if与v-show</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- v-show 使用display样式来实现显示与隐藏--> <!-- <img src="images/mm.jpg" style="width: 200px;height: 200px;" v-show="flag"></img>--> <!-- v-if 使用是否加载该标签方式来实现显示与隐藏 --> <img src="images/mm.jpg" style="width: 200px;height: 200px;" v-if="flag"></img> <hr> <button @click="showAndHide">显示与隐藏</button> <hr> <div v-if="isLogin"> 你好，尊敬小王，<a href="">【退出登录】</a> </div> <div v-else> 你好，请登录，<a href="">【免费注册】</a> </div> </div> <script> new Vue({ el: '#app', data:{ flag: true, isLogin: false }, methods:{ showAndHide:function () { this.flag = !this.flag } } }) </script> </body> </html> ### 13.VueJs的生命周期 ### 什么是Vue的生命周期？ Vue的生命周期，就是一些固定的方法，这些固定的方法，会在页面加载的过程中自动触发，这些方法也叫钩子方法。 整个Vue生命周期共有8个方法 创建vue实例前：beforeCreate (无法获取模型数据和调用函数的) 创建vue实例后：created (可以获取模型数据和调用函数的) 挂载到dom前：beforeMount（视图内容没有模型数据） 挂载到dom后： mounted（视图内容绑定了模型数据） 数据变化更新前：beforeUpdate （视图不能看到更新的数据） 数据变化更新后： updated（视图可以看到更新的数据） vue实例销毁前：beforeDestroy（视图与模型还在绑定状态） vue实例销毁后：destroyed（视图与模型处于解绑状态） 核心方法： created mouted <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>生命周期</title> <script src="js/vue.js"></script> </head> <body> <div id="app">{ {message}}</div> <script> var vm = new Vue({ el : "#app", data : { message : 'hello world' }, beforeCreate : function() { console.log(this); showData('创建vue实例前', this); }, created : function() { showData('创建vue实例后', this); }, beforeMount : function() { showData('挂载到dom前', this); }, mounted : function() { showData('挂载到dom后', this); }, beforeUpdate : function() { showData('数据变化更新前', this); }, updated : function() { showData('数据变化更新后', this); }, beforeDestroy : function() { vm.test = "3333"; showData('vue实例销毁前', this); }, destroyed : function() { showData('vue实例销毁后', this); } }); function realDom() { console.log('真实dom结构： ' + document.getElementById('app').innerHTML); } function showData(process, obj) { console.log(process); console.log('data 数据： ' + obj.message) console.log('挂载的对象： ') console.log(obj.$el) realDom(); console.log('------------------') console.log('------------------') } vm.message = "good..."; vm.$destroy(); </script> </body> </html> ### 14.VueJs的异步请求：axios介绍 ### get请求： //通过给定的ID来发送请求 axios.get('/user?ID=12345') .then(function(response){ console.log(response); }) .catch(function(err){ console.log(err); }); //以上请求也可以通过这种方式来发送 axios.get('/user',{ params:{ ID:12345 } }) .then(function(response){ console.log(response); }) .catch(function(err){ console.log(err); }); post请求： axios.post('/user',{ firstName:'Fred', lastName:'Flintstone' }) .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); }); axios支持PUT，DELTE等请求 ### 15.案例：用户列表功能 ### new Vue({ el:'#app', data:{ userList:[] }, methods:{ //查询所有用户 findAll:function () { //alert('查询用户列表') //console.log(this) var _this = this //从后台返回数据列表 var url = 'http://localhost:8080/vuejsDemo/user/findAll.do' axios.get(url).then(function (resp) { //console.log(resp) //获取后台返回数据 var result = resp.data //给模型赋值 //注意：在axios方面里面获取this是一个Window对象，而不是Vue对象 //this.userList = result //console.log(this) _this.userList = result }) } }, created:function () { this.findAll() } }) ### 16.案例：用户信息回显 ### //查询一个对象 findById:function (id) { // alert(id) var _this = this var url = "http://localhost:8080/vuejsDemo/user/findById.do?id="+id axios.get(url).then(function (resp) { var result = resp.data _this.user = result //弹出编辑窗口 $('#myModal').modal('show') }) } ### 17.案例：修改用户功能 ### //用户更新 update:function () { var url = "http://localhost:8080/vuejsDemo/user/update.do" var _this = this axios.post(url,this.user).then(function (resp) { //刷新列表 _this.findAll() }) } [https_cn.vuejs.org]: https://cn.vuejs.org/ [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbl9kYXJr_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/6401179b7cf04c13bb41aa2178cd525d.png [https_vuejs.org_v2_guide_installation.html]: https://vuejs.org/v2/guide/installation.html [img-rOUm6Jqk-1597825389894_assets_1597629448245.png]: /images/20221124/b5df9dfd22f44e85963454e96c3ce074.png
相关 Vue--基础 原文网址：[Vue--基础\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址 标签传参 法1：传递某个值 > 如果你要获取id,直 怼烎@/ 2023年01月10日 10:25/ 0 赞/ 28 阅读
相关 vue基础 [vue基础][vue] [vue]: https://codechina.csdn.net/mirrors/teach-tian/vue-?utm_source=csdn 谁践踏了优雅/ 2023年01月07日 07:17/ 0 赞/ 18 阅读
相关 Vue 基础 Vue ref获取dom元素 给要获取元素的标签加ref属性 例：ref=”refs ” 获取this.$refs.refs .innerhtml 键盘事件 其 怼烎@/ 2022年12月04日 08:36/ 0 赞/ 31 阅读
相关 vue基础 1.VueJs的介绍和MVVM模式介绍 1.什么是VueJS？ Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。 Vue.js 的目标是通过尽可能简单的 爱被打了一巴掌/ 2022年11月29日 05:51/ 0 赞/ 181 阅读
相关 Vue基础 Vue入门 一、什么是vue？ JavaScript的框架 框架是不同于向jQuery这样的js库，框架需要遵守它的规则，才能使用 二、 川长思鸟来/ 2022年11月22日 12:59/ 0 赞/ 254 阅读
相关 vue基础 Vue基础 1模板语法 插值： 插值表达式：\{ \{ \}\} ,将插值表达式中内容嵌入到页面中。v-text 纯HTML： v-html，识别html标 港控/mmm°/ 2022年10月25日 04:59/ 0 赞/ 154 阅读
相关 vue基础 Vue的安装 vue的兼容性： Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMA 系统管理员/ 2022年10月23日 11:11/ 0 赞/ 183 阅读
相关 Vue基础 本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 非商业用途自由转载，保持署名，注明出处！ ------- ゝ一纸荒年。/ 2021年12月04日 10:02/ 0 赞/ 293 阅读
相关 Vue_基础 Vue\_基础 概述 示例 相关语法 动态样式 class style 概述 Vue (读音 /vjuː/，类似 ゞ 浴缸里的玫瑰/ 2021年10月06日 04:34/ 0 赞/ 355 阅读
怼烎@
谁践踏了优雅
爱被打了一巴掌
港控/mmm°
系统管理员
ゞ 浴缸里的玫瑰
还没有评论，来说两句吧...