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" } }, })