一、什么是VUE？
它是一个构建用户界面的JAVASCRIPT框架
二、怎么样使用VUE
1）引入vue.js
<script src='vue.js'></script>
2)展示html
就是写在body中的div里面的代码
3）建立vue对象
new Vue({
el: "#app", //表示在当前这个元素内开始使用VUE
data:{
msg: ""
}
})
三、在元素当中插入值
{{}}，里面可以放表达式
我们主要学习里面的指令
什么是指令：是带有V-前缀的特殊属性，通过属性来操作元素
v-text:在元素当中插入值 插入的是文本
v-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>{{msg}}</p> <p>{{80+2}}</p> <p>{{20>30}}</p> {{msg}} 我是：<h1 v-text="msg">{{str}}</h1> 你是：<h1 v-text="msg">2222222222222</h1> <h2 v-html="hd"></h2> <h2 v-html="str"></h2> </div> <script> new Vue({ el: "#app", //表示在当前这个元素内开始使用VUE data:{ msg: "我是老大", hd: "<input type='button' value='你是小三'>", str: "我要发财!" } }) </script> </body> </html>
v-if:根据表达式的真假值来动态插入和移除元素
v-show：根据表达式的真假值来隐藏和显示元素
例子如下：
<!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", //表示在当前这个元素内开始使用VUE data:{ pick: false, temp: true, ok: true } }) window.setInterval(function(){ vm.ok = !vm.ok; },1000) </script> </body> </html>
v-for:根据变量的值来循环渲染元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="vue.min.js"> </script> <style> ul li{ list-style: none; } </style> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in arr">//数组 {{index}}:{{item}} </li> <li v-for="(item,key,index) in obj ">//字典 {{item}}：{{key}}:{{index}} </li> <li v-for="item in obj2">//列表里面套字典 {{item.username}} {{item.age}} {{item.sex}} </li> </ul> <div v-for="i in 8">#这个时循环函数 {{i}} </div> <input type="button" value="点我吧" @click="show()">#这个是绑定函数 </div> <script> new Vue({ el:'#app', data:{ arr:[11,22,33], obj:{aa:'frank',bb:'tom',cc:'jack'}, obj2:[ {username:'Frank'}, {'age':23}, {'sex':'male'} ], url:'http://www.qq.com' }, methods:{ show:function () { this.arr.pop() } } }) </script> </body> </html>
v-on:监听元素事件，并执行相应的操作
对数组的操作：
push：从后面插入
pop:从后面删除数据
shift：从前面插入数据
unshift：从前面删除数据
splice：通过索引删除 this.arr.splice(index,1);
reverse:反向
v-bind:绑定元素的属性来执行相应的操作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nihao</title> <script src="vue.js"></script> <style> .bk_1{ background-color: cornflowerblue; 200px; height: 200px; } .bk_2{ background-color: red; 200px; height: 200px; } .bk_3{ border: 5px solid #000; } </style> </head> <body> <div id="app"> <a href="http://www.qq.com" v-bind:title="msg">腾讯</a> <div :class="bk"></div> <div :class="bk2"></div> <!--<div :class="{bk_2:temp}">fdjjdjdkdkkeedd</div>--> <!--<div :class="[bk2,bk3]">8888888888</div>--> </div> <script> new Vue({ el: "#app", //表示在当前这个元素内开始使用VUE data:{ msg: "我想去腾讯公司上班", bk:"bk_1", bk2:"bk_2", // bk3:"bk_3", // temp: false } }) </script> </body> </html>
v-model:实现了数据和视图的双向绑定
分为三步：
1)把元素的值和数据相绑定
2)当输入内容时，数据同步发生变化，视图 ---数据的驱动
3)当改变数据时，输入的内容也会发生变化，数据 --》》视图的驱动
<!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"> <input v-model="msg"> <p>{{msg}}</p> <input type="button" value="变化" @click="change"> </div> <script> new Vue({ el: "#app", //表示在当前这个元素内开始使用VUE data:{ msg: "aaaaa" }, methods: { change: function () { this.msg = 8888888; } } }) </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"> <input type="text" v-focus> </div> <script> new Vue({ el: "#app", //表示在当前这个元素内开始使用VUE data:{ }, directives: { focus: { //指令的名字 //当绑定的元素显示时 inserted: function (tt) { tt.focus(); tt.style.backgroundColor = "blue"; tt.style.color = "#fff" } } } }) </script> </body> </html>
动态生成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> var vm = new Vue({ el: "app", //表示在当前这个元素内开始使用VUE 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"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="app"> <div> <input type="text" placeholder="用户名" v-model="username"> <input type="text" placeholder="年龄" v-model="age"> <input type="submit" value="增加" @click="add"> </div> <div> <table cellpadding="0" border="1" > <tr v-for="(item,index) in arr"> <td ><input type="text" v-model="item.username"></td> <td > <input type="text" v-model="item.age"></td> <td > {{index}} </td> <td> <input type="button" @click="del(index)" value="删除"> <input type="button" @click="edit(index)" v-model="item.msg"> </td> </tr> </table> </div> </div> <script> new Vue({ el: '#app', data: { username: '', age: '', suoyin:'', arr: [], msg:'编辑' }, methods: { add:function () { this.arr.push( { username:this.username, age:this.age, msg:this.msg } ) console.log(this.arr) }, del:function (index) { this.arr.splice(index,1) }, edit:function (index) { if (this.arr[index].msg =='保存') { this.arr[index].msg ='编辑'} else { this.arr[index].msg ='保存' } } } }) </script> </body> </html> <!--<input type="text" v-model="item.username">-->
计算属性：{{}}里面只能放单表达式，所以引出了就算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
temp: 1001
},
computed: {
msg: function () {
if(this.temp > 1000){
return parseInt(this.temp/10)-1
} else {
return this.temp-1
}
}
}
})
</script>
</body>
</html>
后台页面的编辑：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .tipbox { height: 150px; 200px; background-color: blue; position: absolute; left: 500px; top: 200px; text-align: center; } </style> <script src="vue.min.js"></script> </head> <body> <div id="app"> <div> <input type="text" placeholder="用户名" v-model="username"> <input type="text" placeholder="年龄" v-model="age"> <input type="submit" value="增加" @click="add"> </div> <div> <table cellpadding="0" border="1"> <tr v-for="(item,index) in arr"> <td>{{item.username}}</td> <td> {{item.age}}</td> <td> {{index}}</td> <td> <input type="button" @click="del(index)" value="删除"> <input type="button" @click="edit(index)" value="编辑"> </td> </tr> </table> </div> <div class="tipbox" v-show="is_show"> <p><input type="text" placeholder="姓名" v-model="m_username"></p> <p><input type="text" placeholder="年龄" v-model="m_age"></p> <p> <input type="button" value="确定" @click="save(n)"> <input type="button" value="取消" @click="cancel()"> </p> </div> </div> <script> new Vue({ el: '#app', data: { username: '', age: '', suoyin: '', arr: [], is_show: false, m_username: '', m_age: '', n:'', }, methods: { add: function () { this.arr.push( { username: this.username, age: this.age, msg: this.msg } ) }, del: function (index) { this.arr.splice(index, 1) }, edit: function (index) { this.n=index this.is_show = true this.m_username = this.arr[index].username this.m_age = this.arr[index].age }, save: function () { this.arr[this.n].username=this.m_username; this.arr[this.n].age=this.m_age this.is_show=false }, cancel: function () { this.is_show=false } } }) </script> </body> </html>