Vue入门程序
引入Vue.js库
写html页面
写Vue对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 第一步：引入vue.js库 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script> </head> <body> <!-- 第二步：写html页面 --> <div id="app"> {{name}} </div> </body> <script> // 创建vue对象 var VM = new Vue({ el: '#app', data:{ name:"lihuikang" } }); </script> </html>
{{}}: 插值表达式：通常用来获取Vue实例中定义的数据(data)
el: 挂载点：定义 Vue实例挂载的元素节点,表示vue接管该区域
data: 数据对象
<script> // 创建vue对象 var VM = new Vue({ el: '#app', data:{ name:"lihuikang", school:{ name:"拉勾教育", id:"123" }, names:["小王","小明","小李"] } }); </script>
Vue常用指令
v-text 指令
获取data数据, 设置标签的内容.这个标签会覆盖标签内部的所有数据
但是使用{{}}差值表达式就不会覆盖，只会相连。
<h2 v-text="message">百度</h2> <h2>{{message}}百度</h2>
v-html 指令
可以向元素中写入新的标签
<h2 v-html = "url"></h2>
data:{ name:"lihuikang", school:{ name:"拉勾教育", id:"123" }, names:["小王","小明","小李"], message:"java程序员", url: "<a href='https://www.baidu.com'>百度一下</a>" }
v-on 指令
为元素绑定事件的指令，就比如说给按钮绑定事件等，点击按钮之后就可以跳转到对应的事件。
比如: v-on:click,可以简写为 @click=“方法”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script> </head> <body> <div id="app"> <input type="button" value="点击按钮" v-on:click="alert"> <input type="button" value="点击实现第二种方法" @click="alert2"> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ }, methods:{ alert:function() { console.log("第一种方法已经实现了"); }, alert2:function() { console.log("第二种简写方法已经实现了"); } } }) </script> </html>
v-show指令
v-show指令, 根据真假值,切换元素的显示状态
这个指令的属性值是boolean类型的，这个v-show标签可以绑定图片，然后控制图片的显示或者隐藏，当点击按钮时候，触发相应的事件，然后修改data中的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script> </head> <body> <div id="app"> <input type="button" value="点击" @click="changeShow"> <img v-show="isShow" src="./a.jpg" width="400px"> <img src="./b.jpg" width="400px"> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ isShow:true }, methods:{ changeShow:function(){ this.isShow = !this.isShow; } } }) </script> </html>
v-if 指令
根据表达值的真假,切换元素的显示和隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script> </head> <body> <div id="app"> <input type="button" value="点击" @click="changeShow"> <img v-if="isShow" src="./a.jpg" width="400px"> <img src="./b.jpg" width="400px"> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ isShow:true }, methods:{ changeShow:function(){ this.isShow = !this.isShow; } } }) </script> </html>
频繁切换使用 v-show ,反之使用v-if
v-bind 指令
设置元素的属性 （比如:src,title,class）
完整写法 v-bind:属性名，可以简写为 :属性名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script> </head> <body> <div id="app"> <!-- 使用v-bind设置src属性值 --> <img v-bind:src="imgSrc" alt=""> <!-- 简写 设置title --> <img :src="imgSrc" alt="" :title="imgTitle"> <!-- 设置class --> <div :style="{ fontSize: size + 'px'}">v-bind指令</div> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ imgSrc:"./a.jpg", imgTitle:"拉钩教育", size:100 } }) </script> </html>
v-for指令
v-for="(item,i) in list list是在data中的数组，i指的是数组下标，item指的是数组的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="app"> <p v-for="(item,i) in list">--索引值--{{i}} --每一项值--{{item}}</p> <p v-for="(key,value) in user">{{value}},{{key}}</p> </div> </body> <script> var VM = new Vue({ el: "#app", data: { list: [6, 7, 8, 9, 10], user: { id: 1, name: '托尼.贾', gender: '男' } } }) </script> </html>
v-mode 指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script> </head> <body> <!-- 第二步：写html页面 --> <div id="app"> <input v-model="name"> <h2>{{name}}</h2> </div> </body> <script> // 创建vue对象 var VM = new Vue({ el: '#app', data:{ name:"张子怡", } }); </script> </html>
axios
axios.get(地址?key=value&key2=value2).then(function(response){},function(error) {});
axios.post(地址,{key:value,key2:value2}).then(function(response) {},function(error){})
钩子函数
