MVVM中M、V、VM、三者在vue中的对应关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 导入vue相关的包 --> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <!-- 直接使用这种方式使用下面vue对象中的数据 --> <p>{{msg}}</p> </div> <script> // 新建的vue对象就是vm var vm=new Vue({ el:'#app', //表示控制那个区域 //这就是页面中的数据对应M，用来保存每个页面中的数据 data:{ msg:'welcome学习vue' } }) </script> </body> </html>
插值表达式直接在标签中使用“{{ }}”引入相关的数据
v-cloak：这个是解决插值表达式闪烁的问题
v-text：没有插值表达式闪烁问题，但是他会覆盖标签中的内容，对于字符串中的标签是直接替换，不进行相关的解析
v-html：和上面的v-text工作类似，但是会解析字符串中的标签，同时也会覆盖标签中的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 设置未替换前的样式 --> <style> [v-cloak]{ display: none } </style> </head> <body> <!-- 使用v-cloak解决差值表达式闪烁的问题 --> <div id="app"> <p v-cloak>-----{{msg}}+++++++ds65f</p> <!-- v-text标签的使用 --> <h4 v-text="msg"></h4> <div v-text="msg2"></div> <!-- v-html标签的使用 --> <div v-html="msg2"></div> </div> <!-- 引入库 --> <script src="./lib/vue-2.4.0.js"></script> <script> var vm=new Vue({ el:'#app', data:{ msg:'123', msg2:'<h1>我是一个大大的标签</h1>' } }) </script> </body> </html>
显示结果
v-bind提供的属性绑定指令
<!-- 属性绑定指令v-bind直接在需要绑定属性前面加上v-bind，后面的内容放上属性名称 --> <input type="button" value="按钮" v-bind:title="mytittle">
如果还想再属性后面加上字符串，一种可以直接在属性中添加，一种直接在属性后面拼接
<input type="button" value="按钮" v-bind:title="mytittle+'--这是后面加上的表达式'">
简写形式v-bind：就相当于：
<input type="button" value="按钮" :title="mytittle+'--这是后面加上的表达式'">
显示效果
v-on指令
事件绑定机制，缩写是“@”
<input type="button" value="按钮" v-on:click="show">
注意v-on:click后面跟的属性show表示需要调用的属性方法，并不是要显示的内容，所以在Vue队形中的methods中需要定义这个方法
var vm=new Vue({ el:'#app', data:{ msg:'123', msg2:'<h1>我是一个大大的标签</h1>', mytittle:'这是一个自己定义的tittle' }, methods: { show:function(){ alert('Hello') } } })
跑马灯效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <!-- 两个按钮都需要绑定事件，在按钮的事件处理函数中写上相关的业务逻辑代码 --> <input type="button" value="浪起来" @click='lang'> <input type="button" value="低调" @click='stop'> <h4>{{msg}}</h4> </div> <script> // 在VM对象中想要获得其中的属性。使用this.属性、方法名，来进行访问 var vm = new Vue({ el: '#app', data: { msg: '猥琐发育别浪！', intervalId: null }, methods: { lang() { // 重读点击不会重新开始定时器 if (this.intervalId != null) { return } // ()=>这种形式的可以直接使用VM中的this指针访问外部的属性，不需要将this的指针暂存 this.intervalId = setInterval(() => { // 截取头 var start = this.msg.substring(0, 1) // 截取尾 var end = this.msg.substring(1) // 拼接后直接写会 this.msg = end + start // 注意VM会一直监听自己属性是不是发生改变，如果改变了就会将最新的数据同步到页面中 }, 400); }, stop() { clearInterval(this.intervalId) this.intervalId = null } }, }) // 分析： // 1.给浪起来按钮绑定一个事件 // 2.在按钮处理函数中，使用substring函数进行字符串的拼接 // 3.为了实现点击一下自动截取的功能，需要将2中的代码放到计时器中 </script> </body> </html>
v_on指令缩写@和事件修饰符
stop：阻止冒泡
使用方式
<div class="inner" @click="div1Handler"> <input type="button" value="点击" @click.stop=btnHandler> </div>
prevent：阻止默认事件（只会执行点击事件，不会执行跳转命令）
<a href="http://www.baidu.com" @click.prevent=linkclick>tobaidu</a>
capture：添加事件侦听器时使用事件捕获模式（和默认的冒泡相反，点击里面的按钮的时候先触发外面的点击事件，再触发里面的点击事件）
<div class="inner" @click.capture="div1Handler"> <input type="button" value="点击" @click=btnHandler> </div>
self：只有事件在其本身触发的时候才会回调
按照冒泡的顺序，会先触发按钮的点击事件，再触发外层div的点击事件，但是在外层的点击事件后加上self后，内层的就不会触发外层的
<div class="inner" @click.self="div1Handler"> <input type="button" value="点击" @click=btnHandler> </div>
once：事件只触发一次
<a href="http://www.baidu.com" @click.prevent.once=linkclick>tobaidu</a>
上面只会足以一次的默认行为再次点击的时候会跳转
self只会执行自己不冒泡，但是他的外层还是会向上冒泡
内层按钮上使用stop会阻止按钮上面的所有冒泡
v-model实现双向数据绑定
前面的v-bind只能实现数据的单向绑定，从VM到view
<div id="app"> <h4>{{msg}}</h4> <input type="text" v-model="msg" style="100%"> </div>
表单中元素的改变<h4>和VM中的内容也会跟着改变
v-model实现简单的计算器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" v-model="n2"> <input type="button" value="=" @click="cacul"> <input type="text" v-model="result"> </div> <script> var vm = new Vue({ el: '#app', data: { n1: 0, n2: 0, opt: '+', result: 0, }, methods: { cacul() { // 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 temp = this.n1 + this.opt + this.n2 this.result = eval(temp) } }, }) </script> </body> </html>
vue中样式
使用class使用样式
1.数组
传统的使用
<div id="app"> <h1 class="red thin">这是个很大的H1，</h1> </div>
数组的形式,需要使用v-bind绑定
<div id="app"> <h1 :class="['red','italic']">这是个很大的H1，</h1> </div>
2.数组中使用三元表达式
<h1 :class="['red','italic',flag?'active':'']">这是个很大的H1，</h1>
3.数组中替换三元表达式
<h1 :class="['red','italic',{'active':flag}]">这是个很大的H1，</h1>
4.直接使用对象
<h1 :class={red:true,italic:true}>这是个很大的H1，</h1>
使用内联样式
1.直接在元素上通过:style的形式，书写样式的对象
<h1 :style="{color:'red','font-weight':200}">这是一个h1</h1>
2.在data中定义，在用的时候直接引用
<div id="app"> <!-- 对象就是无序键值对的集合 属性中含有‘-’必须加上引号 --> <h1 :style="styleobj">这是一个h1</h1> </div> <script> var vm = new Vue({ el: '#app', data: { flag:true, styleobj:{color:'red','font-weight':200} }, methods: { }, }) </script>
3.通过数组的形式
<div id="app"> <!-- 对象就是无序键值对的集合 属性中含有‘-’必须加上引号 --> <h1 :style="[styleobj,styleobj2]">这是一个h1</h1> </div> <script> var vm = new Vue({ el: '#app', data: { flag:true, styleobj:{color:'red','font-weight':200}, styleobj2:{'font-style':'italic'} }, methods: { }, }) </script>