Vue的基础使用
一、script引包，例如：
<script src="../node_modules/vue/dist/vue.js"></script>
二、创建实例化对象
new Vue({ el:"#app", data:{ msg:"hello vue", show:true } });
三、指令系统
v-if：一般用于DOM操作，隐藏或者渲染一个标签，它是惰性的，只有当条件满足时，才渲染
v-show： 与v-if类似，但页面一加载，它便已经渲染，只是根据条件基于css样式进行切换
<style> .show-test{ width: 50px; height: 50px; background-color: red; } </style>
<div class="show-test" v-if = 'show'>哈哈哈</div> <div class="show-test" v-show = 'show'>嘿嘿嘿</div>
new Vue({ el:"#app", data:{ msg:"hello vue", show:false } });
v-for：遍历一个数组或者对象
<ul> <li v-for="(site,index) in array_test"> <span>{{index+1}}</span>{{site}} </li> </ul> <ul> <li v-for="(title,data) in object_test"> {{data}}:<span>{{title}}</span> </li> </ul> <script> new Vue({ el:"#app", data:{ msg:"hello vue", show:false, array_test:["北京","南京","东京"], object_test:{"name":"aike","age":18}, } }); </script>
v-bind：绑定属性，可以是内置属性，可以是自定义属性，并执行相应的操作，返回值为true和false
v-on：绑定事件，值为一个函数，在vue对象中的methods属性中实现
<style> .show-test{ width: 50px; height: 50px; background-color: red; } .show_yellow{ width: 50px; height: 50px; background-color: yellow; } </style> <div class="show-test" v-bind:class="{show_yellow:bcolor}"> # bcolor为true时，为class添加值show_yellow color </div>
<button v-on:click="coloru"> # 点击事件
切换
</button>
new Vue({
el:"#app",
data:{
msg:"hello vue",
show:false,
array_test:["北京","南京","东京"],
object_test:{"name":"aike","age":18},
bcolor:false,
},
methods:{
coloru(){
this.bcolor=!this.bcolor;
}
}
});
v-html和v-text：对页面的dom进行赋值运算，相当与js中innerText innerHTML
v-bind和v-on的简写方式：
<div :id="1"></div> <div v-bind:id="1"></div> <div v-on:click="test"></div> <div @click="test"></div>
运用：
图片轮播
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .show-test{ width: 50px; height: 50px; background-color: red; } .show_yellow{ width: 50px; height: 50px; background-color: yellow; } .a-img{ width: 100px; height: 100px; background-color: red; } .lunbo ul{ width: 100%; overflow: hidden; list-style: none; } .lunbo ul li{ text-align: center; width: 40px; float: left; background: purple; margin: 10px; } .img_checked{ text-align: center; width: 40px; float: left; background: red!important; margin: 10px; } </style> </head> <script src="../node_modules/vue/dist/vue.js"></script> <script src="../node_modules/jquery/dist/jquery.js"></script> <body> <div id="app"> <!-- 模板语言：可以进行简单的计算，可以引入Vue对象的值， --> <h1>{{msg}}</h1> <h1>{{1+1}}</h1> <h1>{{'hello'}}</h1> <h1>{{1>0?'Y':'N'}}</h1> <!-- 指令系统 --> <div class="show-test" v-if='show'>哈哈哈</div> <div class="show-test" v-show='show'>嘿嘿嘿</div> <!-- v-for --> <ul v-for="(site,index) in array_test"> <li> <span>{{index+1}}</span>{{site}} </li> </ul> <ul v-for="(title,data) in object_test"> <li> {{data}}:<span>{{title}}</span> </li> </ul> <!-- v-on --> <button v-on:click="coloru"> 切换 </button> <!-- v-bind --> <div class="show-test" v-bind:class="{show_yellow:bcolor}"> color </div> <img v-bind:src="show_img" v-on:mouseenter="closeTimer" v-on:mouseleave="openTimer"> <div class="lunbo"> <ul> <li v-for="(item,index) in img_array" v-on:click="find_img(index)" v-bind:class="{img_checked:img_checked(index)}">{{index+1}}</li> </ul> <button v-on:click="up_img">上一张</button> <button v-on:click="next_img">下一张</button> </div> </div> </body> <script> new Vue({ el:"#app", data:{ msg:"hello vue", show:false, array_test:["北京","南京","东京"], object_test:{"name":"aike","age":18}, bcolor:false, img_array:[ {"title":1, "src":"img/1.png"}, {"title":2, "src":"img/2.png"}, {"title":3, "src":"img/3.png"}, {"title":4, "src":"img/4.png"}, ], show_img:"img/1.png", img_count:0, li_color:false, // 选择的图片页码标识为红色 img_checked:function(index){ if(this.img_count==index){ return true }else{ return false } }, timer:null, }, //开启生命周期，每秒执行下一张图片函数，实现轮播 created(){ this.timer=setInterval(this.next_img,1000) }, methods:{ coloru(){ // $this.attr("class", "show_yellow") this.show=!this.show; this.bcolor=!this.bcolor; }, //下一张图片 next_img(){ if(this.img_count==this.img_array.length-1){ this.img_count=0 } else{ this.img_count ++ } // this.show_img=`img/${this.img_count}.png` this.show_img=this.img_array[this.img_count].src }, //上一张图片 up_img(){ if(this.img_count==0){ this.img_count=this.img_array.length-1 } else{ this.img_count -- } // this.show_img=`img/${this.img_count}.png` this.show_img=this.img_array[this.img_count].src }, //选中图片 find_img(index){ this.img_count = index this.show_img=`img/${index+1}.png` }, //关闭图片自动轮播 closeTimer(){ clearInterval(this.timer) }, //开启图片自动轮播 openTimer(){ this.timer=setInterval(this.next_img,1000) } } }); </script> </html>
四、计算属性和监听器
计算属性computed：
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以这些运算可以放在计算属性中
<script src="../node_modules/vue/dist/vue.js"></script> <script src="../node_modules/jquery/dist/jquery.js"></script> <div id="app"> <h1>"{{listenStr}}"</h1> <button v-on:click="downChangeMsg">计算属性</button> </div> <script> var vm = new Vue({ el:"#app", data:{ msg:"hello word" }, computed:{ listenStr: function(){ console.log(this.msg) return this.msg } }, methods:{ downChangeMsg(){ this.msg = "hi aike" } }, })
计算属性默认拥有getter方法，而setter方法需要另外设置
<script src="../node_modules/vue/dist/vue.js"></script> <script src="../node_modules/jquery/dist/jquery.js"></script> <div id="app"> <h1>"{{listenStr}}"</h1> <button v-on:click="downChangeMsg">计算属性</button> </div> <script> var vm = new Vue({ el:"#app", data:{ msg:"hello word" }, // computed:{ // listenStr(){ // console.log(this.msg) // return this.msg // } computed:{ listenStr:{ get: function(){ return this.msg }, set: function(value){ return this.msg = value } } }, methods:{ downChangeMsg(){ this.msg = "aike" // this.listenStr = "yoyo" } }, })
监听器watch:
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
v-model：监听数据
<script src="../node_modules/vue/dist/vue.js"></script> <script src="../node_modules/jquery/dist/jquery.js"></script> <div id="app"> <input type="text" v-model="msg"> <p>{{msg}}</p> </div> <script> var vm = new Vue({ el:"#app", data:{ // listen_data:"", msg:"aike", }, methods:{ }, computed:{ }, // watch:{ // listen_data(){ // this.msg = 'yoyo' // } // }, }) </script>
<script src="../node_modules/vue/dist/vue.js"></script> <script src="../node_modules/jquery/dist/jquery.js"></script> <div id="app"> <input type="text" v-bind:value="msg" v-on:input="textIpunt"> <p>{{msg}}</p> </div> <script> var vm = new Vue({ el:"#app", data:{ msg:"", }, methods:{ textIpunt(e){ this.getValue = e.target.value; } }, computed:{ getValue:{ get: function(){ return this.msg }, set: function(newValue){ this.msg = newValue } } }, }) </script>
五、事件修饰符
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>
六、按键修饰符
七、生命周期（钩子函数）
beforeCreate(){ // 组件创建之前 console.log(this.msg); }, created(){ // 组件创建之后 // 使用该组件，就会触发以上的钩子函数，created中可以操作数据，发送ajax，并且可以实现vue==》页面的影响 应用：发送ajax请求 console.log(this.msg); // this.msg = '嘿嘿黑'; }, beforeMount(){ // 装载数据到DOM之前会调用 console.log(document.getElementById('app')); }, mounted(){ // 这个地方可以操作DOM // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM console.log(document.getElementById('app')); }, beforeUpdate(){ // 在更新之前，调用此钩子，应用：获取原始的DOM console.log(document.getElementById('app').innerHTML); }, updated(){ // 在更新之前，调用此钩子，应用：获取最新的DOM console.log(document.getElementById('app').innerHTML); }, beforeDestroy(){ console.log('beforeDestroy'); }, destroyed(){ console.log('destroyed'); }, activated(){ console.log('组件被激活了'); }, deactivated(){ console.log('组件被停用了'); }
