肇庆网站开发,建立自信,做网站接私单,手机网站大全免费下载MVVM开发思想图(图片可能会被缩小#xff0c;请右键另存查看#xff0c;图片来源于网络)定义基本Vue代码结构1 v-text,v-cloak,v-html命令默认 v-text没有闪烁问题#xff0c;但是会覆盖元素中原本的内容#xff0c;插值表达式只会替换自己的占位符,!DOCTYPE html
…MVVM开发思想图(图片可能会被缩小请右键另存查看图片来源于网络) 定义基本Vue代码结构 1 v-text,v-cloak,v-html命令 默认 v-text没有闪烁问题但是会覆盖元素中原本的内容插值表达式只会替换自己的占位符, !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headscript srcvue.js/scriptstyle typetext/css[v-cloak]{display: none;}/stylebodydiv idappp v-cloak{{msg}}/p/divscript typetext/javascriptvar vm new Vue({el:#app,data:{msg:123}})/script/body
/html View Code--使用v-cloak解决插值表达式闪烁的问题 以上两种 方法会默认转义成文本输出 如果需要输出成网页元素就需要 v-html div v-htmlmsg2/div 2 v-bind 使用【Vue中提供了 v-on:事件绑定机制】 缩写是【:】 v-bind 是vue中提供的用于绑定属性的指令input typebutton name id value按钮 v-bind:titlemsg3 /input typebutton name id value按钮 v-bind:titlemsg3123 /\注意 v-bind:指令可以被简写为 : 要绑定的属性 v-bind中可以写合法的js表达式 input typebutton name id value按钮 :titlemsg3 / #这样也是可以的 3 v-on指令【Vue中提供了 v-on:事件绑定机制】 缩写是【】 bodydiv idappinput typebutton value按钮2 v-on:clickshow /input typebutton value按钮2 v-on:mouseovershow / /divscript typetext/javascriptvar vm new Vue({el:#app,data:{msg3:大家都是好学生},methods:{ //这个methods属性中定义了当前Vue实例所有可用的方法show:function(){alert(hello)}}})/script/body View Code--使用v-on:绑定事件此绑定了点击事件和鼠标覆盖事件 事件修饰符 .stop 阻止冒泡 bodydiv idappdiv classinner clickdiv1Handlerinput typebutton value惟他 click.stopbtnHandler//div/divscript typetext/javascriptvar vm new Vue({el:#app,data:{},methods:{ div1Handler(){console.log(inner div 事件)},btnHandler(){console.log(按钮事件)}}})/script/body View Code--阻止冒泡 .prevent 阻止默认事件 bodydiv idappa hrefhttp://www.baidu.com click.preventlinkClick有问题去百度/a/divscript typetext/javascriptvar vm new Vue({el:#app,data:{},methods:{ linkClick(){console.log(触发连接点击事件)}}})/script/body View Code--阻止事件 .capture 添加事件侦听器时使用事件捕获模式 bodydiv idappdiv classinner click.capturedivHandlerinput typebutton name id value按钮 clickbtnHandler //div/divscript typetext/javascriptvar vm new Vue({el:#app,data:{},methods:{ divHandler(){console.log(class触发)},btnHandler(){console.log(按钮触发)}}})/script/body View Code--从外到里进行捕获事件 .self 只当事件在该元素本身比如不是子元素触发时触发回调 bodydiv idappdiv classinner click.selfdivHandlerinput typebutton name id value按钮 clickbtnHandler //div/divscript typetext/javascriptvar vm new Vue({el:#app,data:{},methods:{ divHandler(){console.log(class触发)},btnHandler(){console.log(按钮触发)}}})/script/body View Code--实现只有点击当前元素时候才会触发事件处理函数 .once 事件只触发一次 bodydiv idappdiv classinner click.self.oncedivHandlerinput typebutton name id value按钮 click.oncebtnHandler //div/divscript typetext/javascriptvar vm new Vue({el:#app,data:{},methods:{ divHandler(){console.log(class触发)},btnHandler(){console.log(按钮触发)}}})/script/body View Code-- .once只触发一次事件处理函数 .self 只会阻止自己身上冒泡行为的触发并不会真正阻止冒泡的行为 4 使用Vue完成一个跑马灯效果 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headscript typetext/javascript srcvue.js/scriptbodydiv idappinput typebutton name id value浪起来 v-on:clicklang/input typebutton name id value低调 clickstop/h4{{msg}}/h4/divscript typetext/javascript// 注意在vm 实例中如果想要获取data上的数据 或者想要调用// methods中的方法 必须通过this.数据属性名 或this.方法名 来进行访问// 这里的this表示 我们new 出来 的 vm 实例对象var vm new Vue({el:#app,data:{msg:猥琐发育别浪~~!,intervalId:null},methods:{lang(){if (this.intervalId!null)return;// 箭头函数是解决this指向的问题this.intervalIdsetInterval((){//console.log(_this.msg)// 获取到头的第一个字符var start this.msg.substring(0,1)// 获取到后面的所有字符var end this.msg.substring(1)// 重新拼接得到新的字符串并赋值给this.msgthis.msgend start},400)},stop(){ //停止定时器clearInterval(this.intervalId)this.intervalIdnull;}}})// 分析:// 1 给浪起来按钮绑定点击事件 用 v-on // 2 在按钮事件处理函数中写相关的业务逻辑代码:拿到// msg 然后调用字符串的 substring来进行字符串截取操作// 3 为了实现点击下按钮自动截取的功能需要实现定时功能/script/body
/html View Code 5 v-model双向绑定 v-bind 只能实现数据的单向绑定,从M 自动绑定到 V,无法实现双向绑定input typetext name id v-bind:valuemsg3 / 使用 v-model指令可以实现表单元素和Model中数据双向数据绑定注意v-model 只能运用在表单元素中input(radio,text,address,email...) select checkboxinput typetext name id v-modelmsg3 / bodydiv idappinput typetext v-modeln1 /select name id v-modeloptoption value/optionoption value--/optionoption value**/option option value///option /selectinput typetext v-modeln2 /input typebutton value clickcalc/input typetext name id v-modelresult //divscript typetext/javascriptvar vm new Vue({el:#app,data:{n1:0,n2:0,result:0,opt:},methods:{ calc(){ //计算器算数方法
// switch(this.opt){
// case :
// this.result parseInt(this.n1)parseInt(this.n2)
// break;
// case -:
// this.result parseInt(this.n1)-parseInt(this.n2)
// break;
// case *:
// this.result parseInt(this.n1)*parseInt(this.n2)
// break;
// case /:
// this.result parseInt(this.n1)parseInt(this.n2)
// break;
// }// 投机取巧法正式开发中尽量少用var codeStr parseInt(this.n1)this.optparseInt(this.n2)this.resulteval(codeStr)},}})/script/body View Code ---用v-model双向绑定实现计算器的基本功能 转载于:https://www.cnblogs.com/Skyda/p/10216747.html
