一、什么是vue
它是一个构建用户界面的JAVASCRITPO框架
二、怎么使用VUE
(1)、引入vue.js
如：<script src='vue.js'><script>
(2)、展示html
如：<div id="app">
<input type="text v-model="msg">
<p>{{msg}</p>
</div>
(3)、建立vue对象
new Vue({
el:"#app", //表示在当前这个元素内开始使用VUE
data{
msg:""
}
})
三、在元素当中插入值
{{}}，可以方表达式
指令，是带有v-前缀的特殊属性，通过属性来操作元素
v-text:在元素当中插入值
v-html:在元素当中不仅可以插入文本，还可以插入标签，
v-if:根据表达式的真假来动态插入和移出元素
v-show：根据表达式的真假来隐藏和显示元素
v-if 和v-show的区别：
v-if改为false时，它就在dom中不存在，它被注释代替，而v-show改为false是，它在dom中存在，只是在v-showzhong 添加了隐藏属性
v-for：根据变量的值来循环渲染元素
v-on：监听元素事件，并执行想应的操作
对数组的操作：
push
pop
shift
unshift
splice
reverse
v-bind:绑定元素的属性来执行相应的操作
v-bind可以被：代替
v-on可以被@代替
v-model:实现了数据和视图的双向绑定
v-model份三步绑定：
1、把元素的值和数据想绑定
2、当输入内容时，数据同步发生变化，视图 ----数据的驱动
3、当改变数据时，输入的内容会发生变化，数据-----视图的驱动
自定义指令：
new Vue({
el: "#app", //表示在当前这个元素内开始使用VUE
data:{
},
directives: {
focus: { //指令的名字
//当绑定的元素显示时
inserted: function (tt) {
tt.focus();
}
}
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="msg"> <p> {{msg}} </p> </div> <script> new Vue({ el:"#app", data:{ msg:"" } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> ul li{ list-style: none; display: inline-block; 150px; height: 50px; } </style> </head> <body> <div id="app"> <ul> <li> <span v-on:click="er(true)">二维码登录</span> </li> <li> <span v-on:click="er(false)">邮箱登录</span> </li> </ul> <div v-show="temp"> <img src="erma.jpg" > </div> <div v-show="!temp"> <form action="http://www.163.com" method="post"> <p><input type="email"></p> <p><input type="password"></p> <p><input type="submit" value="登录"></p> </form> </div> </div> <script> new Vue({ el:"#app", data:{ temp:true }, methods:{ er:function(t){ this.temp=t } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> ul li{ list-style: none; } </style> </head> <body> <div id="app"> <ul> <li v-for="(index,item) in arr"> {{item}}:{{index}} </li> <hr> <li v-for="(item,key,index2) in obj"> {{index2}} :{{key}}:{{item}} </li> <hr> <li v-for="item in obj2"> {{item.username}} {{item.age}} {{item.sex}} </li> </ul> </div> <script> new Vue({ el:"#app", data:{ arr:[11,22,33], obj:{'a':"王兴平",'b':"鲁刚","c":"小耗子"}, obj2:[ {'username':"刘伟"}, {'age':"20"}, {'sex':"female"} ] } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input v-text="msg"> <p>{{msg}}</p> <p v-html="message"></p> </div> <script> var vm = new Vue({ el:'#app', data:{ msg:"ff", message:"<input type='submit'>" } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <p v-if="pick">人生自古谁无死</p> <p v-else>留取丹心照汗青</p> <p v-show="temp">文天祥</p> <p v-show="ok">变化</p> </div> <script> var vm = new Vue({ el:'#app', data:{ pick:false, temp:true, ok:true } }) window.setInterval(function(){ vm.ok=!vm.ok },1000) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input v-model="msg"> <p>{{msg}}</p> <input type="submit" value="变化" v-on:click="change"> </div> <script> new Vue({ el:"#app", data:{ msg:"ddd" }, methods:{ change:function () { this.msg=85555; } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(index,item) in arr"> {{item}}:{{index}} </li> </ul> <hr> <input type="submit" value="点我吧" v-on:click="show"> <a v-bind:href="url">我要去百度</a> </div> <script> new Vue({ el:"#app", data:{ arr:[11,22,33,55], url:"http://www.qq.com", }, methods: { show: function () { this.arr.pop(); } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> ul li{ list-style: none; } </style> </head> <body> <div id="app"> <ul> <li> <input type="checkbox">苹果 </li> <li> <input type="checkbox">香蕉 </li> <li> <input type="checkbox">梨子 </li> <li> <input type="checkbox" v-on:click="create()">其它 </li> <li v-html="htmlstr" v-show="test"></li> </ul> </div> <script> new Vue({ el:"#app", data:{ htmlstr:"<textarea></textarea>", test:false }, methods:{ create:function(){ this.test=!this.test; } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-focus> </div> <script> new Vue({ el:"#app", data:{ }, directives:{ focus:{ inserted:function (tt) { tt.focus(); tt.style.backgroundColor='red'; tt.style.color='#fff' } } } }) </script> </body> </html>