拿来吧你!不想学Vue?我不答应!入门Vue必备基础-看这里!
Posted 四原色
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了拿来吧你!不想学Vue?我不答应!入门Vue必备基础-看这里!相关的知识,希望对你有一定的参考价值。
拿来吧你——Vue官网:https://cn.vuejs.org/
目录
不想学Vue?我不答应!入门Vue必备基础-看这里!
手把手教你快速入门,仅需学会几个知识点+小案例,分分钟入门不是大问题!
所有案例已打包,点击下载:https://download.csdn.net/download/qq_44140450/20360901
1. 入门必知
1.1 了解Vue
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
1.2 基础知识
你需要学会:
- 引入vue:
<!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!--或者:--> <!-- 生产环境版本,优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
-
掌握几个必要的指令:
2. 基础必学
2.1 v-text指令
- 作用:设置标签的内容。
- 默认写法:
<p v-text = " msg " ></p>
-
差值写法:
<p> msg </p>
-
案例
<!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>v-text指令案例</title> <style> * margin: 0; padding: 0; #app position: absolute; left: 50%; top: 20%; transform: translateY(-20%) translateX(-50%); #app * margin: 10px; #app ul li list-style-type: none; border-bottom: 1px solid #666; text-align: center; </style> </head> <body> <div id="app"> <h1 v-text = "msg"></h1> <ul> <li v-text = 'myMsg[0]'></li> <li>myMsg[1]</li> <li>myMsg[2] + "人"</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue( el:"#app", data: msg:"hello world!", myMsg:["海子哥","2749984520@qq.com","吉安永新"] ) </script> </body> </html>
-
效果
2.2 v-html指令
- 作用:设置元素innerHtml。
- v-html中有html结构会被自动解析为标签。
- 与v-text区别
- v-text:无论内容是什么,只会解析为文本。
- v-html:能自动解析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>v-html指令</title> <style> * margin: 0; padding: 0; #app position: absolute; left: 50%; top: 20%; transform: translateY(-20%) translateX(-50%); #app * font-size: 14px; color: #666; margin: 10px; text-align: center; </style> </head> <body> <div id= 'app' > <p v-text = "con"></p> <p v-html = "content"></p> <p v-text = "content"></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue( el:"#app", data: content:"<a href='https://blog.csdn.net/qq_44140450'>海子哥的主页</a>", con:"海子哥", myMsg:["海子哥","188207245","吉安永新"] ) </script> </body> </html>
-
运行效果
2.3 v-on指令
- 作用:为元素绑定事件。
- 写法:
- 标准写法
<!--以click事件为例--> <button v-on:click="方法名">按钮</button>
-
简写方式
<!--以click事件为例--> <input type="button" @click="方法名" value="按钮">
- 标准写法
-
案例
<!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>v-on指令</title> <style> * margin: 0; padding: 0; #app position: absolute; left: 50%; top: 20%; transform: translateY(-20%) translateX(-50%); #app * font-size: 14px; color: #666; margin: 10px; text-align: center; </style> </head> <body> <div id="app"> <input type="button" v-on:click = "click_on" value="单击鼠标事件"> <input type="button" v-on:mouseleave = "mouse_leave" value="鼠标离开事件"> <input type="button" v-on:mouseenter = "mouse_enter" value="鼠标进入事件"> <input type="button" @mouseenter = "mouse_move" value="鼠标进入事件"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue( el:"#app", methods: click_on() alert("单击了按钮"); , mouse_leave:function() alert("鼠标离开") , mouse_enter() alert("鼠标进入!") , mouse_move:function() alert("鼠标移动了!") ) </script> </body> </html>
-
运行效果
2.4 v-show指令
- 本质是切换元素的display属性
- 作用:根据bool值来定义dispaly属性。
- v-show的内容最终解析为一个bool值
- 案例
<!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>v-show指令</title> <style> * margin: 0; padding: 0; #app position: absolute; width: 960px; height: 540px; left: 50%; top: 0; transform: translateX(-50%); #app * display: inline; font-size: 14px; color: #666; margin: 10px; text-align: center; #app button top: 0; outline: 0; border: 1px solid pink; background-color: pink; border-radius: 5px; #app button:hover transition: 0.3s; box-shadow: 0 0 12px rgb(243, 133, 151); #app img width: 960px; height: 540px; </style> </head> <body> <div id="app"> <button @click="on">点击查看对象</button> <br> <img src="./img/1.jpg" v-show="isShow"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue( el:"#app", data: isShow:false, , methods: on:function() this.isShow = !this.isShow; ) </script> </body> </html>
-
运行结果
2.5 v-if指令
- 本质:修改dom元素。
- 作用:根据表达值(bool)切换元素状态。
- 表达式值为ture时,元素存在于Dom树中;否则,元素从Dom树中移除。
- 频发切换状态下使用v-if,系统资源消耗大,建议这种状态下使用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>v-if指令</title> <!-- border --> <style> * margin: 0; padding: 0; #app position: absolute; width: 960px; height: 540px; left: 50%; top: 0; transform: translateX(-50%); #app * display: inline; font-size: 14px; color: #666; margin: 10px; text-align: center; #app button top: 0; outline: 0; border: 1px solid pink; background-color: pink; border-radius: 5px; #app button:hover transition: 0.3s; box-shadow: 0 0 12px rgb(243, 133, 151); #app img width: 960px; height: 540px; </style> </head> <body> <div id="app"> <button @click="on">点击一下查看对象</button> <img src="./img/3.jpg" v-if="isShow"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue( el:"#app", data: isShow:false, , methods: on:function() this.isShow = !this.isShow; ) </script> </body> </html>
-
运行效果
2.6 v-bind指令
- 作用:设置元素属性,为元素绑定属性。
- 格式:
- 标准写法
v-bind:属性名 = 表达式
-
简写方式
:属性名
-
动态增删属性的两种方式
<!--通过类名进行绑定(推荐使用)--> <p v-bind:属性名="'类名':bool值"></p> <!--使用三目运算符进行绑定--> <p :属性名="bool值?'类名':''"></p>
- 标准写法
-
案例
<!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>v-bind指令</title> <style> * margin: 0; padding: 0; #app position: absolute; width: 960px; height: 540px; left: 50%; top: 0; transform: translateX(-50%); #app * display: inline; font-size: 14px; color: #666; margin: 10px; text-align: center; #app button top: 0; outline: 0; border: 1px solid pink; background-color: pink; border-radius: 5px; #app button:hover transition: 0.3s; box-shadow: 0 0 12px rgb(243, 133, 151); #app img width: 960px; height: 540px; .active transition: 0.5s; box-shadow: 2px 10px 12px rgb(238, 60, 90); border-radius: 30px; transform: translateY(-10px) translateZ(-10px); </style> </head> <body> <div id="app"> <button @click="on">点击一下</button> <img v-bind:src="imgSrc" :title="title" :class="isActive?'active':''"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue( el:"#app", data: imgSrc:"./img/7.jpg", isShow:false, title:"188207245-肖家海", isActive:false, , methods: on:function() this.isActive = !this.isActive; ) </script> </body> </html>
-
运行效果
2.7 v-for指令
- 响应式生成列表结构。
- 作用:根据数据生成列表结构,数组数据经常和v-for结合使用。
- 源码案例
<!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>v-for指令</title> <style> * margin: 0; padding: 0; #app position: absolute; left: 50%; top: 20%; transform: translateX(-50%) translateY(-20%); #app * margin: 10px; #app input top: 0; outline: 0; border: 1px solid darkslateblue; background-color: #fff; border-radius: 5px; #app input:hover transition: 0.3s; color: #fff; background-color: darkslateblue; box-shadow: 0 0 12px darkslateblue; #app li list-style-type: none; text-align: center; </style> </head> <body> <div id="app"> <ul> <li v-for="item in arr"> item </li> </ul> <input type="button" value="添加一个阿姨联系方式" @click="add"> <input type="button" value="移除一个阿姨联系方式" @click="remove"> <ul> <li v-for="(obj,index) in ayi"> index+1、 obj.name 的电话号码是: obj.phone </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue( el:"#app", data: arr:["上海王阿姨", "北京李阿姨", "重庆刘阿姨", "南京胡阿姨"], ayi:[ name:"上海王阿姨",phone:'1558596521', name:"北京李阿姨",phone:'1365520452', name:"重庆刘阿姨",phone:'1875554214', name:"广州赵阿姨",phone:'1985565421', name:"南京胡阿姨",phone:'1865574258' ], , methods: add:function() this.ayi.push(name:"江苏苏阿姨",phone:'1998562478'); , remove:function() this.ayi.shift(); ); </script> </body> </html>
-
运行效果
2.8 v-model指令
- v-model是一种双向数据绑定。
- 作用:设置、获取表单元素的值。(同时解决了单标签元素无法使用v-text指令的缺点)。
- 绑定的数据会和表单元素值进行双向关联。
- 代码案例
<!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>v-model指令</title> <style> * margin: 0; padding: 0; #app position: absolute; left: 50%; top: 20%; transform: translateX(-50%) translateY(-20%); font-size:0 ; #app * height: 30px; border: 1px solid darkslateblue; outline: 0; font-size: 0; font-size:18px ; #app input[type="text"] padding-left: 5px; width: 200px; border-radius: 10px 0px 0 10px; #app input[type="button"] width: 60px; height: 32px; border-radius: 0 10px 10px 0; vertical-align: top; background-color: darkslateblue; color: #fff; #app input[type="button"]:hover transition: 0.3s; box-shadow: 0 0 12px darkslateblue; </style> </head> <body> <div id="app"> <input type="text" @keyup.enter = "enter" v-model="val"><!-- --><input type="button" value="按他" @click="enter"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue( el:"#app", data: val:"", , methods: enter:function() if(this.val.trim() != "") alert("value:"+this.val); ); </script> </body> </html>
-
运行效果
3.案例参考
3.1 计数器
- 参考源码
<!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>counter</title> <style> * margin: 0; padding: 0; #context position:absolute; /* background-color: aquamarine; */ display: inline-block; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); #app border-radius: 5px; box-shadow: 0 0 5px #666; #app button width: 60px; height: 40px; border: 0; outline: none; /* border-radius: 5px; */ background-color: #ccc; font-size: 28px; #app button:hover transition: 0.5s; background-color: darkslateblue; color: #fff; /* box-shadow: 0 0 5px darkslateblue; */ #app span margin: 20px; font-size: 18px; </style> </head> <body> <div id="context"> <div id="app"> <button @click="sub" style="border-radius:5px 0 0 5px;">-</button> <span > num </span> <button @click="add" style="border-radius:0 5px 5px 0;">+</button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue( el:"#app", data: num:1, , methods: add:function() this.num = this.num >= 10? this.num:this.num+1; , sub:function() this.num = this.num <=1 ? this.num:this.num-1; ) </script> </body> </html>
-
运行效果
3.2 记事本
- 参考源码
<!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>记事本</title> <style> * margin: 0; padding: 0; font-family: "YouYuan"; #notepad position: absolute; width: 50%; height: 50%; left:50%; top:50%; transform: translateX(-50%) translateY(-50%); box-shadow: 0 0 8px #666; border-radius: 10px; #notepad div width: 100%; height: 60%; overflow: auto; #notepad h1 width: 100%; padding-top: 10px; margin-bottom: 10px; text-align: center; #notepad ul width: 90%; margin-left: 5%; #notepad ul li list-style-type: none; padding-left: 10px; /* border-bottom: 1px solid #666; */ font-size: 18px; padding-bottom: 5px; padding-top: 5px; #notepad ul li:hover input visibility:visible; #notepad input[type="text"] width: 60%; margin-left: 10%; height: 25px; margin-bottom: 5px; margin-top: 5px; margin-right: 0; border:0; font-size: 18px; outline: none; border-radius: 5px 0 0 5px; box-shadow: 0 0 5px darkslateblue; #notepad #sure width: 50px; height: 25px; margin-bottom: 5px; margin-top: 5px; margin-left: -6px; border:0; outline: none; border-radius: 5px; background-color: darkslateblue; color: #fff; transform: translateY(-1px); border-radius:0 5px 5px 0; #notepad #sure:hover transition: 0.3s; box-shadow: 0 0 5px darkslateblue; #notepad #left-p float:left; margin: 15px auto 5px 5px; border-bottom: 1px solid darkslateblue; #notepad #right-but float:right; border-radius: 5px; margin: 15px 5px 5px auto; border: 1px solid darkslateblue; #notepad #right-but:hover transition: 0.3s; background-color: darkslateblue; color: #fff; box-shadow: 0 0 5px red; #notepad .remove-but visibility: hidden; width: 20px; height: 20px; color: red; border-radius: 20px; float: right; border: 0; text-align: center; margin-right: 5px; font-size: 18px; </style> </head> <body> <div id="notepad"> <h1>记事本</h1> <input type="text" v-model="addVal" @keyup.enter="add"> <input type="button" id="sure" value="确认" @click="add"> <div> <ul > <li v-for="(item,index) in val" > index+1. item <input class="remove-but" type="button" value="-" @click="clean(index)" > </li> </ul> </div> <p id="left-p" v-if = "val.length != 0">已有事务val.length条</p> <input id="right-but" v-show = "val.length != 0" type="button" value="全部清除" @click = "cleanAll"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue( el:"#notepad", data: val:[], addVal:"", isShowCleanBut:false, , methods: add:function() if(this.addVal.trim() != "") this.val.push(this.addVal.trim()); this.addVal=""; , clean:function(index) this.val.splice(index,1); , cleanAll:function() this.val=[]; ); </script> </body> </html>
-
运行效果
3.3 轮播图
- 参考源码
<!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>轮播图</title> <style> * margin: 0; padding: 0; #app width: 100%; height: 100%; #context position: absolute; left:50%; top: 50%; transform: translateX(-50%) translateY(-50%); img width: 768px; height: 432px; #app img transition: all 0.3s; display: inline-block; #app button position: absolute; top: 50%; transform: translateY(-50%); margin: 2px; width: 30px; height: 60px; border: 0; outline: none; color: #fff; font-size: 18px; border-radius: 2px; background-color: rgba(58, 58, 58, 0.548); #app button:hover transition: 0.3s; box-shadow: 0 0 5px #666; </style> </head> <body> <div id="app"> <div id = "context"> <button style="float: left;" @click="sub" >◀</button> <img v-bind:src="imgSrc[index]"> <button style="float: right;transform:translateX(-34px) translateY(-50%);" @click="add">▶</button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue( el:"#app", data: imgSrc:["./img/7.jpg", "./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg", "./img/5.jpg", "./img/6.jpg"], index: 0, , methods: add:function() this.index =this.index < this.imgSrc.length-1? this.index + 1 :0; , sub:function() this.index = this.index > 0? this.index - 1:this.imgSrc.length-1; ); </script> </body> </html>
-
运行效果
3.4 天气预报
- 参考源码
<!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>查询天气案例</title> <style> * margin: 0; padding: 0; #app position: absolute; width: 60%; height: 50%; top: 10%; left: 50%; transform: translateX(-50%) translateY(-10%); /* #app .form_group margin-bottom: 5px; */ #app .form_group input, #app .form_group button margin: 0; padding: 0; display: inline-block; outline:none; #app .form_group input[type='text'] height: 31px; font-size: 15px; width: 80%; border: 2px solid darkslateblue; #app .form_group button background-color: darkslateblue; color: #fff; width: 15%; height: 35px; border: 0; vertical-align: top; transform: translateX(-1px); #app .hot-city margin: 5px; #app .hot-city a font-size: 14px; color: #666; text-decoration: none; #app .weather-list li display: inline-block; /* background-color: darkslategray; */ padding: 15px; border-right: 1px solid #666; #app ul :nth-last-child(1) border: 0; #app .info_type, #app .info_temp, #app .info-date text-align: center; padding-bottom: 15px; #app .info_type color: darkslateblue; font-size: 16px; #app .info_temp color: darkslateblue; font-size: 8px; #app .info-date color: #666; </style> </head> <body> <div id="app"> <div> <div class="form_group"> <input type="text" @keyup.enter="down" v-model="city"><!----><button @click="down">查询</button> </div> <div class="hot-city"> <a href="javascript:;" @click="hot_city('北京')">北京</a> <a href="javascript:;" @click="hot_city('上海')">上海</a> <a href="javascript:;" @click="hot_city('广州')">广州</a> <a href="javascript:;" @click="hot_city('深圳')">深圳</a> <a href="javascript:;" @click="hot_city('南昌')">南昌</a> </div> </div> <ul class="weather-list" > <li v-for="item in weatherList"> <div class="info_type"> <span class="iconfont"> item.type </span> </div> <div class="info_temp"> <b> item.low </b> ~ <b> item.high </b> </div> <div class="info-date"> <span> item.date </span> </div> </li> </ul> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue( el:"#app", data: city:"", weatherList:[], , methods: down:function() var that = this; axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" +this.city).then( function(response) that.weatherList = response.data.data.forecast; ,function(err)alert("连接失败!") ) , hot_city(city) this.city=city; this.down(); ); </script> </body> </html>
-
运行效果
3.5 看笑话案例
- 参考源码
<!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>看笑话</title> <style> * margin: 0; padding: 0; #app position: absolute; left: 50%; top: 20%; transform: translateX(-50%) translateY(-20%); font-size:0 ; margin: 5px; #app * margin: 5px; outline: none; border: 1px solid darkslateblue; #app input position: relative; width: 100px; height: 26px; left: 50%; transform: translateX(-50%); border-radius: 13px; #app input:hover transition: 0.3s; color: #fff; background-color: darkslateblue; box-shadow: 0 0 12px darkslateblue; #app textarea width: 600px; height: 300px; </style> </head> <body> <div id="app"> <input type="button" value="来一个笑话" @click="down"> <textarea > text </textarea> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vue = new Vue( el:"#app", data: text:"", , methods: down:function() var that = this; axios.get("https://autumnfish.cn/api/joke").then( function(response) var str= response.data; that.text = response.data; ,function (err)alter("连接失败!") ) , ); </script> </body> </html>
-
运行效果
以上是关于拿来吧你!不想学Vue?我不答应!入门Vue必备基础-看这里!的主要内容,如果未能解决你的问题,请参考以下文章
拿来吧你!不想学Vue?我不答应!入门Vue必备基础-看这里!