珠海网站建设防,一级a做爰片手机电影网站,怀化 优化营商环境,网站调用115做云播第一次接触vue#xff0c;前端的html,css,jquery,js学习也有段时间了#xff0c;就照着B站的视频简单看了一些#xff0c;了解了一些简单的用法#xff0c;这边做一个记录。
官网 工具#xff1a;使用VSCode以及Live Server插件#xff08;能够实时预览#xff09;
第…第一次接触vue前端的html,css,jquery,js学习也有段时间了就照着B站的视频简单看了一些了解了一些简单的用法这边做一个记录。
官网 工具使用VSCode以及Live Server插件能够实时预览
第一个Vue程序
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleVue基础/title/headbodydiv idapp{{message}}/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{message: hello Vue!}})/script/body
/htmlel:挂载点设置Vue实例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleel挂载点/title/headbody idbody{{messgae}}div idapp classabc{{message}}p{{message}}/p/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el:#app,//el:.abc,//el:div,//el:#body,data:{message: hello Vue!}})/script/body
/htmlVue实例的作用范围是什么呢
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其它的选择器
可以使用其它的选择器但是建议使用ID选择器
是否可以设置其它的dom元素呢
可以使用其它的双标签不能使用html和body
data数据对象
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitledata数据对象/title/headbodydiv idapp{{message}}h2{{student.name}} ---{{student.mobile}}/h2ulli{{hobbies[0]}}/lili{{hobbies[2]}}/li/ul/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{message: hello Vue!,student:{name:张三,mobile:16789028},hobbies: [学习,喝酒,打球]}})/script/body
/html常见指令
v-text
作用设置标签的内容默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容支持内部写表达式
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlev-text/title/headbodydiv idapp{{message}}h2 v-textmessageazhh/h2h2{{messagesd}} asd/h2/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{message: hello Vue!}})/script/body
/htmlv-html 作用设置元素的innerHTML 内容中有HTML结构会被解析成标签 vtext指令无论内容时什么.只会解析成文本 解析文本使用vtext,需要解析html结构使用v-html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlev-html/title/headbodydiv idapp{{message}}h2 v-texttitle/h2h2 v-htmltitle/h2/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{message: hello Vue!,title:h3abch3}})/script/body
/htmlv-on v-on指令的作用是为元素绑定事件 事件名不需要写on 指令可以简写为 绑定的方法定义字methods属性中 方法内部通过this关键字可以访问定义在data中数据
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlev-on/title/headbodydiv idapp{{message}}input typebutton value测试事件绑定 v-on:clickfunc1input typebutton value测试事件绑定简写 clickfunc2/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{message: hello Vue!},methods: {func1() {console.log(1);alert(2)},func2:function() {alert(this.message)}}})/script/body
/htmlv-on补充 传递自定义参数事件修饰符 事件绑定的方法写成函数调用的形式可传入自定义参数 定义方法时需要定义形参来接收传入的实参 事件的后面跟上.修饰符可以对事件进行限制 .enter可以限制触发的按键为回车 事件修饰符有多种
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlev-on补充/title!-- --/headbodydiv idappbutton clickadd(3,2)加法计算/buttoninput typetext keyup.entersayHi/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{message: hello Vue!},methods: {add: function(a1,a2) {alert(a1a2)},sayHi:function() {alert(666)}}})/script/body
/htmlv-bind v-bind指令的作用是为元素绑定属性 完整写法是v-bind:属性名 简 写的可以直接省略v-bind,只保留:属性名 需要动态的增删改class建议使用对象的方式
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgestyle.active{border: 1px solid red;}/styletitlev-bind/title!-- --/headbodydiv idapp{{message}}img v-bind:srcimgSrc altbrimg :srcimgSrc alt :titlemessage404 :classisActive?active: img :srcimgSrc alt :titlemessage404 :class{active:isActive} /div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{message: hello Vue!,imgSrc:../img/monkey.gif,isActive:true}})/script/body
/htmlv-show v-show指令的作用是根据真假切换元素的显示状态 原理是修改元素的display实现显示隐藏 指令后面的内容最终都会被解析为布尔值 值为true元素显示值为false元素隐藏 数据改变之后对应元素的显式状态会同步更新
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlev-show/title!----/headbodydiv idappinput typebutton value切换显示状态 clickchangeInShowbutton clickaddAge累加年龄/buttonbrimg src../img/monkey.gif alt v-showisShowbrimg src../img/monkey.gif alt v-showage40/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{message: hello Vue!,isShow:true,age:34},methods:{changeInShow: function() {this.isShow!this.isShow;},addAge:function() {this.age;}}})/script/body
/htmlv-if v-if指令的作用是根据表达式的真假切换元素的显式状态 本质是通过操控dom元素来切换显示状态 表达式的值为true,元素存在于dom树中,为false,从dom树中移除 频繁的切换v-show,反之使用v-if,前者的切换消耗小
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlev-if/title!-- v-if指令的作用是根据表达式的真假切换元素的显式状态本质是通过操控dom元素来切换显示状态表达式的值为true,元素存在于dom树中,为false,从dom树中移除频繁的切换v-show,反之使用v-if,前者的切换消耗小--/headbodydiv idappbutton clickchangeShow切换显示状态/buttonbutton clickchangeAge增加年龄/buttonimg src../img/monkey.gif alt v-iftrueimg src../img/monkey.gif alt v-ifisShowimg src../img/monkey.gif alt v-ifage40/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{message: hello Vue!,isShow:true,age:30},methods: {changeShow: function() {this.isShow!this.isShow;},changeAge: function() {this.age;console.log(this.age)}}})/script/body
/htmlv-for v-for指令的作用是根据数据生成列表结构 数组经常与它结合使用 语法是(item,index) in数据 item和index可以结合其它指令一起使用 数组长度的更新会同步到页面上是响应式的
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlev-for/title!----/headbodydiv idappulli v-for(item,index) in hobbies :titleitem{{index1}}兴趣有{{item}}/li/ulh2 v-forit in students{{it}}{{it.name}} {{it.age}}/h2{{message}}/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{message: hello Vue!,hobbies:[打球,睡觉,打游戏],students:[{name: abc,age:34},{name:rty,age: 45}]}})/script/body
/htmlv-model 获取和设置表单元素的值(双向数据绑定) v-model指令的作用是设置和获取表单元素的值 绑定的数据会和表单元素值相关联 绑定的数据----表单元素的值
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlev-model/title!-- --/headbodydiv idapp{{message}}button clicksetM修改message/buttoninput typetext v-modelmessage keyup.entergetM/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{message: hello Vue!},methods: {getM:function() {alert(this.message)},setM:function(){this.messageaaaa}}})/script/body
/html使用常用指令实现小功能
计数器
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle计数器/titlestyle#app {width: 480px;height: 100px;margin: 200px auto;}.input-num {margin-top: 20px;height: 100%;display: flex;border-radius: 10px;overflow: hidden;box-shadow: 0 0 4px black;}.input-num button {width: 150px;height: 100%;font-size: 40px;color: gray;cursor: pointer;border: none;outline: none;}.input-num span {height: 100%;font-size: 40px;flex: 1;text-align: center;line-height: 100px;}/style/headbodydiv idappdiv classinput-numbutton clicksub-/buttonspan{{num}}/spanbutton v-on:clickadd/button/div/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{num:1},methods: {sub:function() {if(this.num0){this.num--}else {alert(到最小值了)}},add: function(){if ((this.num) 10) {this.num ;}else {alert(到最大值了)}}}})/script/body
/html图片切换
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedge!-- link relstylesheet href../css/index.css/ --title图片切换/title/headbodydiv idapp!-- button clicknext测试/button --img src../img/prev.png alt clickprev v-ifnum0img v-for(item,index) in imgSrcs:srcitem alt v-shownumindex img src../img/next.png alt clicknext v-ifnum!10/div!-- 开发环境版本包含了有帮助的命令行警告 --script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptvar appnew Vue({el: #app,data: {message: hi,num:0,imgSrcs:[../img/00.jpg,../img/01.jpg,../img/02.jpg,../img/03.jpg,../img/04.jpg,../img/05.jpg,../img/06.jpg,../img/07.jpg,../img/08.jpg,../img/09.jpg,../img/10.jpg,]},methods: {prev:function() {// if(this.num0){// //alert(--)// }this.num--;},next:function() {// if(this.num10){// //alert()// }this.num;}}})/script /body/html
