一、Vue介绍
vue是MVVM的框架, model, view, viewmodel, 由viewmodel控制所有逻辑的实现,实现把model渲染到view上,实现model和view高度分离,解耦.(model模型, view视图)
二、Vue开发
当使用文件引入的方式进行开发,由于网络问题,Vue还没有加载完成,{{}}写在了标签内部,导致{{}}没有正常解读,导致作为普通文本显示出来.
解决文本闪烁的问题方法:
vue是MVVM的框架, model, view, viewmodel, 由viewmodel控制所有逻辑的实现,实现把model渲染到view上,实现model和view高度分离,解耦.(model模型, view视图)
二、Vue开发
- A.通过script引入Vue文件,进行开发(较少使用)
- B.通过Vue-cli(即Vue脚手架,或命令行工具,类似于angular-cli)搭建项目,该方式是项目中的主流方式.
当使用文件引入的方式进行开发,由于网络问题,Vue还没有加载完成,{{}}写在了标签内部,导致{{}}没有正常解读,导致作为普通文本显示出来.
解决文本闪烁的问题方法:
- 方法一.把vue.js引入放在head中.
- 方法二.使用v-clock指令,专门解决文本闪烁问题,使用{{}},可以加上v-cloak指令,当Vue没有加载成功,v-cloak就是了一个普通的标签属性,通过属性选择器加载样式,当Vue加载成功时,就会识别v-cloak标签,就把那个隐藏样式去掉.
1.1值绑定
A.{{}},插值表达式;可以放置变量、变量表达式、函数调用;注意:不要写多行语句;B.使用v-html/v-text进行值绑定;
注意:v-text不能识别标签,而v-html可以识别标签;
1.2属性绑定
A.在Vue中,没有HTML属性与DOM属性的细分,B.在Vue中,不能使用插值表达式进行属性绑定,只能使用v-bind,如colspan属性;
语法: v-bind:属性名="变量名/表达式",可以简写为: :属性名="变量名/表达式"
1.3.动态绑定CSS样式
1.动态改变class2.通过style,动态改变内联样式
共同点:都支持对象和数组的值
1.4事件绑定
语法:v-on:事件名="执行函数", 注意:执行函数后面可以加也可以不加,需要传入参数的时候加小括号简写:@事件名
1.5.Vue事件修饰符
1.普通事件
stop:阻止事件冒泡prevent:阻止该事件的默认操作once:一次性事件
2.键盘事件
.enter, .tab, .left, .right, .up, .down, .meta, .ctrl, .shift, .alt, .delete, .esc;.enter.alt表示enter键与alt键同时按下
1.6双向数据绑定
结合双向数据绑定的标签有input,textarea等v-model
1.7修饰符:
1..lazy表示将input事件转换为change事件2..trim:去除内容前后空格,中间的空格不可以消除3..number:转换为number类型
五、学习代码:(全部复制,即可参考学习)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue基础</title> <style> * { margin: 0; padding: 0; } h3 { margin-bottom: 10px; } li{ list-style: none; margin-bottom: 8px; } [v-cloak] { display: none; } .fontSize { font-size: 20px; } .backgroundRed { background: red; } #event-left { width: 100px; height: 100px; background: blue; display: inline-block; border-radius: 50%; } #event-right { width: 100px; height: 100px; display: inline-block; border-radius: 50%; } #app { overflow: hidden; } .content { width: 210px; height: 210px; float: left; border: 2px solid blue; margin-left: 10px; margin-top: 10px; padding: 10px; border-radius: 5px; background:#f2f2f2; } .content:hover { border: 2px solid rgb(128, 0, 21); box-shadow: 5px 0 5px 0 rgb(128, 0, 21); } </style> </head> <body> <div id="app"> <div class="content"> <h3>值绑定一:插值表达式</h3> <p style="text-indent: 2rem;">{{}},插值表达式;可以放置变量、变量表达式、函数调用;</p> <p style="background: rgb(255, 0, 0);border-radius: 5px;text-indent: 2rem;">注意:不要写多行语句</p> <p>变量:{{description}}</p> <p v-cloak>表达式:{{5+3}}</p> <p>三目运算:{{isMan?'男人':'女人'}}</p> </div> <div class="content"> <h3>值绑定二:v-html/v-text</h3> <p style="text-indent: 2rem;">使用v-html/v-text进行值绑定</p> <p style="background: rgb(255, 0, 0);border-radius: 5px;text-indent: 2rem;">注意:v-text不能识别标签,而v-html可以识别标签</p> <p v-text="strHtml"></p> <p v-html="strHtml"></p> </div> <div class="content"> <h3>属性绑定一:v-bind</h3> <p style="background: rgb(255, 0, 0);border-radius: 5px;text-indent: 2rem;">注意:如果src属性值为字符串,则需要添加单引号;直接写在双引号中的,会默认为变量;</p> <p style="text-indent: 2rem;">在Vue中,不能使用插值表达式进行属性绑定,只能使用v-bind,如colspan属性;</p> <img :src="imgUrl" :width="20" alt=""> <table style="display: inline-block;"> <tr> <td :colspan="2">单元格</td> <td>111</td> </tr> </table> </div> <div class="content"> <h3>属性绑定二:class</h3> <div class="backgroundRed" :class="{fontSize: true}" style="border-radius: 5px;margin-bottom: 10px;">A :class后面跟对象</div> <div :class="['backgroundRed','fontSize']" style="border-radius: 5px;">B :class后面跟数组</div> </div> <div class="content"> <h3>属性绑定三:style</h3> <p :style="{height:'50px',color:'red'}" style="background: blueviolet;line-height: 50px;border-radius: 5px;margin-bottom: 10px;">A :style后面跟对象</p> <p :style="aStyles" style="border-radius: 5px;">B :style后面跟数组</p> </div> <div class="content"> <h3>事件绑定一</h3> <button @click="doClick($event,'yiman')" style="background: aquamarine;border-radius: 5px;width: 100px;">点击事件</button> <p style="display: inline-block;">移入移出事件</p> <div id="event-left" :style="{border:'1px solid black',background:bgCol2}"></div> <div id="event-right" :style="{background: bgCol}" @mouseenter="doEnter($event)" @mouseleave="doLeave($event)"></div> </div> <div class="content"> <h3>事件绑定二</h3> <p style="text-indent: 2rem;">结合属性绑定与事件绑定控制标签的显示与隐藏;</p> <button @click="doChange($event)" style="width: 100px;height: 30px;background:blueviolet;border-radius: 5px;">{{btnText?'隐藏':'显示'}}</button> <div id="in" style="background: green;width: 100px;height: 100px;" :style="{display:disValue}"></div> </div> <div class="content"> <h3>事件修饰符:普通事件</h3> <p style="text-indent: 2rem;">stop:阻止事件冒泡;prevent:阻止该事件的默认操作;once:一次性事件;</p> <ul class="parent" style="border: 1px solid blue;" @click="doParent"> <li style="text-align: left"><button @click.stop="doChild">子级按钮-stop</button></li> <li style="text-align: center"><a href="http://www.baidu.com" @click.prevent.stop="toBaidu">前往百度-prevent</a></li> <li style="text-align: right"><span style="background: red;width: 50px;height: 30px;" @mouseenter.once="once">once</span></li> </ul> </div> <div class="content"> <h3>事件修饰符:键盘事件</h3> <p style="text-indent: 2rem;">注意:需要同时按下enter与alt键才可以触发绑定的事件;</p> <input type="text" @keyup.enter.alt="keyUp($event)"> </div> <div class="content"> <h3>双向数据绑定一</h3> <input type="text" @input="doInput" :value="msg" ref="ipt"> <p>输入框的内容为:{{msg}}</p> </div> <div class="content"> <h3>双向数据绑定二</h3> <p style="text-indent: 2rem;">vue使用v-model实现数据绑定;</p> <input type="text" v-model="msg2"> <p>输入框的内容为:{{msg2}}</p> </div> <div class="content"> <h3>双向数据绑定三</h3> <p style="text-indent: 2rem;">结合v-model使用的修饰符</p> <p style="text-indent: 2rem;">1..lazy表示将input事件转换为change事件;</p> <p style="text-indent: 2rem;">2..trim:去除内容前后空格,中间的空格不可以消除;</p> <input type="text" v-model.lazy.trim="msg3"> <p>{{msg3}}</p> </div> <div class="content"> <h3>初始化视图模型</h3> <p style="text-indent: 2rem;font-size: 15px;">el:该视图模型挂载到哪个节点上,只有在该节点中,才能使用该视图模型的属性和方法;</p> <p style="text-indent: 2rem;font-size: 15px;">data:里面存放所有的变量,在页面中显示的变量,都要在data中进行声明或者赋值;</p> <p style="text-indent: 2rem;font-size: 15px;">methods:存储所有在该视图模型中用到的方法;</p> </div> </div> </body> </html> <!--cdn引入方式--> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> let vm1 = new Vue({ el: '#app', data: { description: '变量', isMan: false, strHtml: '<a href="###">a标签</a>', imgUrl: 'http://placehold.it/200x200', aStyles: [{ border: '1px solid black' }, { background: 'pink' } ], bgCol: 'red', bgCol2: 'blue', disValue: 'block', btnText: true, msg: '', msg2: '', msg3: '' }, methods: { // es6中对象中键值对的简写(属性,方法) doClick(e, str) { console.log("点击事件的方法", e, str); this.bgCol2 = 'pink'; }, doEnter(e) { // console.log(this); this.bgCol = 'yellow'; }, doLeave(e) { this.bgCol = 'red'; }, doChange(e) { this.btnText = !this.btnText; // 第一次点击 if (this.btnText) { this.disValue = 'block'; } else { this.disValue = 'none'; } }, doParent() { alert("父级事件执行"); }, doChild() { alert("子级事件执行"); }, toBaidu() { alert("点击了a标签"); }, once() { alert("鼠标移入了"); }, keyUp(e) { alert("键盘抬起了", e.keyCode); }, doInput() { console.log(this.$refs); this.msg = this.$refs.ipt.value; } }, // 钩子函数(该vm创建成功之后触发) created: function () { setInterval(() => { this.msg = "卫庄"; this.msg2 = "盖聂"; }, 2000); } }); console.log('在外面访问', vm1.bgCol); </script>
六、效果图