Vue.js（学习Vue3之前必须要掌握的知识）
2024-05-31 11:40:50
文章目录
- 第一个Vue程序
- el挂载点
- data数据对象
- v-text
- v-html
- v-on
- 计数器
- v-show
- v-if
- v-bind
- 图片切换
- v-for
- v-on自定义参数
- v-model双向绑定
- 记事本
- axios+vue_01
- axios+vue_02
第一个Vue程序
在html文件中导入相关js文件
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
创建一个html文件
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div id="app">{{message}}</div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message: "Hello Vue"}})</script></body></html>el挂载点
什么意思呢？就是vue的作用域在哪个位置，阅读以下图片
我们可以知道，只有在id选择器中的message才有效输出对应的内容，其中el挂载点选择的就是id选择器
但是当然可以使用class选择器，这时的el属性值就需要写成 .app
data数据对象
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app">{{message}}<h2>{{school.name}} {{school.phone}}</h2><ul><li>{{campus[0]}}</li><li>{{campus[1]}}</li></ul></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{message:"Happy Study",school:{name:"小六",phone:"13688885555"},campus:["北京校区","上海校区"]}})</script></body>
</html>
v-text
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"> <h2 v-text="message"></h2><h2 v-text="info"></h2><h2 >{{message}}...</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{message:"World Hello",info:"好好学习"}})</script></body>
</html>v-html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"> <h2 v-html="content"></h2><h2 v-text="content"></h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{content:"<a href='https://www.baidu.com/'>World Hello</a>"}})</script></body>
</html>
v-on
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"> <input type="button" value="v-on指令" v-on:click="doIt()" /><input type="button" value="v-on指令简写" @click="doIt()" /><input type="button" value="双击事件" @dblclick="doIt()" /><h2 @click="changeFood()">{{food}}</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{food:"nice"},methods:{doIt:function(){alert("做IT");},changeFood:function(){// console.log(this.food);this.food+="big good"}}})</script></body>
</html>
计数器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"> <button @click="sub">-</button><span>{{ num }}</span><button @click="add">+</button></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{num:0,},methods:{add:function(){if(this.num<10){this.num+=1;}else{alert("已经到最大值了")}},sub:function(){if(this.num>0){this.num-=1;}else{alert("已经到最小值了")}}}})</script></body>
</html>v-show
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"> <input type="button" @click="changeIsShow()" value="点击我" /><img v-show="isShow" src="./img/007.jpg"/></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{isShow:false},methods:{changeIsShow:function(){this.isShow=!this.isShow}}})</script></body>
</html>
v-if
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="app"> <input type="button" value="切换显示" @click="toggleIsShow()"/><p v-if="isShow">World Hello v-if</p><p v-show="isShow">World Hello v-show</p><h2 v-if="temperature>35">re</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{isShow:false,temperature:40},methods:{toggleIsShow:function(){this.isShow=!this.isShow}}})</script></body></html>
v-bind
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.active{border: 1px solid red;}</style></head><body><div id="app"> <img v-bind:src="imgSrc" ><img :src="imgSrc" ><img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="toggleActive()"><img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="toggleActive()"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{imgSrc:"https://img1.baidu.com/it/u=1706907849,2908816773&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",imgTitle:"World Hello",isActive:false},methods:{toggleActive:function(){this.isActive=!this.isActive}}})</script></body></html>图片切换
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.active{border: 1px solid red;}</style></head><body><div id="app"> <img :src="imgArr[index]"><a href="#" @click="prev" v-show="index!=0">上一张</a><a href="#" @click="next" v-show="index<imgArr.length-1">下一张</a></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{imgArr:["http://pic.qianye88.com/4kcc02c5a43b1-928d-31af-ab11-dc9c818b5126.jpg?imageMogr2/thumbnail/x300/quality/90!","http://pic.qianye88.com/pic/0fb4d4b22f5a8b0da2fa2ade8572c263.jpg?imageMogr2/thumbnail/x300/quality/90!","http://pic.qianye88.com/4kdongman4f6415e5-cf59-3361-8f47-fac263a198f7.jpg?imageMogr2/thumbnail/x300/quality/90!"],index:0},methods:{prev:function(){this.index--},next:function(){this.index++}}})</script></body></html>v-for
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.active{border: 1px solid red;}</style></head><body><div id="app"> <ul><li v-for="item in arr">World Hello：{{item}}</li></ul><ul><li v-for="(item,index) in arr">{{index+1}} World Hello：{{item}}</li> </ul><input type="button" value="添加" @click="add()" /><input type="button" value="移除" @click="remove()"/><h2 v-for="item in vegetables" v-bind:title="item.name">{{item.name}}</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript">var app = new Vue({el:"#app",data:{arr:["世界1","世界2","世界3","世界4","世界5"],vegetables:[{name:"白菜"},{name:"大白菜"}]},methods:{add:function(){this.vegetables.push({name:"nice"})},remove:function(){this.vegetables.shift();}}})</script></body></html>
v-on自定义参数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><input type="button" value="点击" @click="doIt(666,'好')" /><input type="text" @keyup.enter="sayHi()" /></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{},methods:{doIt:function(p1,p2){console.log("it");console.log(p1);console.log(p2);},sayHi:function(){alert("吃了没？")}}})</script></body>
</html>v-model双向绑定
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><input type="text" v-model="message" @keyup.enter="getMessage()" /><h2>{{message}}</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:"nice"},methods:{getMessage:function(){alert(this.message)},}})</script></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><input type="button" value="修改message" @click="setMessage()" /><input type="text" v-model="message" @keyup.enter="getMessage()" /><h2>{{message}}</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:"nice"},methods:{getMessage:function(){alert(this.message)},setMessage:function(){this.message="辣条"}}})</script></body>
</html>
记事本
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><input type="text" v-model="inputValue" @keyup.enter="add()"/><ul><li v-for="(item,index) in list"><div><span>{{index+1}}</span><label>{{item}}</label><button @click="remove(index)">删除</button></div></li></ul><span>笔记条数：{{list.length}}</span><button @click="clear()" v-if="list.length!=0">Clear All</button></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{list:["敲代码","big nice"],inputValue:"好好学习"},methods:{add:function(){this.list.push(this.inputValue)},remove:function(index){this.list.splice(index,1);},clear:function(){this.list=[];}}})</script></body>
</html>
axios+vue_01
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><input type="button" value="获取笑话" @click="getJoke"/><p>{{joke}}</p></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 app = new Vue({el:"#app",data:{joke:"nice"},methods:{getJoke:function(){var that = thisaxios.get("https://autumnfish.cn/api/joke").then(function(response){console.log(response.data)that.joke=response.data},function(err){})}}})</script></body>
</html>
axios+vue_02
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><input type="text" v-model="city" @keyup.enter="searchWeather()" /><a @click="changeCity('北京')">北京</a><a @click="changeCity('上海')">上海</a><a @click="changeCity('广州')">广州</a><a @click="changeCity('深圳')">深圳</a><ul><li v-for="item in weatherList"><div>{{item.type}}</div><div><b>{{item.low}}</b><b>{{item.high}}</b></div><div>{{item.date}}</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 src="./js/main.js"></script></body>
</html>Js代码
var app = new Vue({el:"#app",data:{city:'',weatherList:[]},methods:{searchWeather:function(){//因为是回调函数，此时下边this已经改变了 所以需要保存上边的thisvar that = this;axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city).then(function(response){console.log(response.data.data.forecast);that.weatherList=response.data.data.forecast}).catch(function(err){})},changeCity:function(city){this.city=city;this.searchWeather();}}})
Vue.js（学习Vue3之前必须要掌握的知识）相关推荐
- Vue.js 学习笔记 十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
- Vue.js 学习笔记 十一 自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
- Vue.js 学习笔记 十 自定义按键事件
<div id="divApp"><!--任何键盘动作都会触发--><input type="text" v-on:keyup=& ...
- Vue.js 学习笔记 九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...
- Vue.js 学习笔记 八 v-for
v-for指令,是用来循环的,常用的情况有以下4种 <div id="divApp"><!--迭代数字--><p v-for="n in 5 ...
- Vue.js 学习笔记 七 控制样式
Vue.js可以灵活的控制样式 我们首先随便写2个样式 <style>.divCss {background-color: green;width:400px;height:400px;} ...
- Vue.js 学习笔记 六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
- Vue.js 学习笔记 五 常用的事件修饰符
介绍几个常用的事件修饰符 直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
- Vue.js 学习笔记 四 用一，二，三的知识做个跑马灯
做个简单的跑马灯效果 页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
- Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <!--v-bind指令可以绑定属性--><div v-html="msg2" v-bind:title ...
最新文章
- ISSCC 2021前瞻，智能传感器和IoT端是大势所趋 | AI日报
- 点击文字label同时选中checkbox radio
- [OpenCV] -- win7下配置OpenCV的Qt开发环境
- AAAI 2021 | 学习截断信息检索排序列表
- 无监督训练用堆叠自编码器是否落伍？ML博士对比了8个自编码器
- MySQL-常用引擎
- JAVA程序(阶乘10以内)
- QT中让窗口屏幕居中的方法
- 利用MPI实现并行排序算法PSRS
- input type=date 移动端显示placeholder失效问题
- HDU2544 最短路【Dijkstra算法】
- OSGi.NET 学习笔记 [模块化和插件化][概念]
- 在家也可以免费下载知网文献，5种免费下载知网文献方法
- PS全套抠图技法教程，快速抠头发/抠婚纱，带配套素材
- html图片闪现循环效果,CSS实现图片无缝无限循环展示效果
- 51单片机（一）最小系统介绍
- 怎么克隆计算机的mac,MAC地址克隆方法
- STM32对于1997与2007电表数据规约的解析
- Unity_播放音乐
- loop variable ‘numerator‘ creates a copy from type ‘const std::string‘ [-Wrange-loop-construct]