vue
Posted roadlandscape
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue相关的知识，希望对你有一定的参考价值。
1.插值表达式：
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
Vue.js 都提供了完全的 javascript 表达式支持。
{{ number + 1 }}
{{ true ? ‘YES‘ : ‘NO‘ }}
2.VueJS 常用系统指令
2.1 v-on：
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
2.1.1 v-on:click
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on:click</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> {{message}} <button v-on:click="fun1(‘我变了‘)">vue的onclick</button> </div> </body> <script> new Vue({ el: "#app", data: { message: "hello vue" }, methods: { fun1: function (msg) { alert("hello"); this.message = msg; } } }) </script> </html>
2.1.2 v-on:keydown
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on:keydown</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <input type="text" v-on:keydown="fun($event)"> </div> </body> <script> new Vue({ el: "#app", methods: { fun: function (event) { // 只能输入数字 if(!(event.keyCode >= 48 && event.keyCode <= 57)){ event.preventDefault(); } } } }) </script> </html>
2.1.3 v-on:mouseover
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on:mouseover</title> <style> #div { background-color: red; height: 300px; width: 300px; } </style> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <div @mouseover="fun1" id="div"> <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea> <!--<textarea @mouseover="fun2($event)">这是一个文件域</textarea>--> </div> </div> </body> <script> new Vue({ el:‘#app‘, //表示当前vue对象接管了div区域 methods:{ fun1:function(){ alert("div"); }, fun2:function(event){ alert("textarea"); event.stopPropagation();//阻止冒泡 } } }); </script> </html>
2.1.4 事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop：阻止冒泡行为
.prevent：阻止事件本身行为
.capture：改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
.self：只是阻止自身不执行冒泡触发，不会阻止冒泡继续向外部触发，.stop是从自身开始不向外部发射冒泡信号
.once：将事件设置为只执行一次
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on:事件修饰符</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <form @submit.prevent action="http://www.baidu.com" method="get"> <input type="submit" value="提交"/> </form> <div @click="fun1"> <a @click.stop href="http://www.baidu.com">百度</a> </div> </div> </body> <script> new Vue({ el: "#app", methods: { fun1: function () { alert("hello"); } } }) </script> </html>
2.1.5 按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
全部的按键别名：
.enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on:按键修饰符</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <input type="text" @keyup.enter="fun1"> <p><!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div> </div> </body> <script> new Vue({ el:‘#app‘, methods:{ fun1:function(){ alert("你按了回车"); }, clear: function () { alert(‘Alt + C‘); }, doSomething: function () { alert(‘Ctrl + Click‘); } } }); </script> </html>
v-text与v-html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-text与v-html</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <div v-html="message"></div> <div v-text="message"></div> </div> </body> <script> new Vue({ el: "#app", data: { message: "<h1>我是标题1</h1>" } }) </script> </html>
2.3 v-bind：
插值表达式不能用于HTML标签的属性取值，遇到这种情况应该使用 v-bind指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-model</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <font size="5" v-bind:color="ys1">红色</font> <font size="5" :color="ys2">绿色</font> <hr> <!-- +word 前后不能有任何空格 --> <a v-bind={href:"http://www.baidu.com/s?wd="+word}>百度</a> </div> </body> <script> new Vue({ el:‘#app‘, data:{ ys1: "red", ys2: "green", word: "vue" } }); </script> </html>
2.4 v-model：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-model</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> 姓名:<input type="text" id="username" v-model="user.username"><br> 密码:<input type="password" id="password" v-model="user.password"><br> <input type="button" @click="fun" value="获取"> </div> </body> <script> new Vue({ el:‘#app‘, data:{ user:{username:"",password:""} }, methods:{ fun:function(){ this.user.username="tom"; this.user.password="11111111"; } } }); </script> </html>
2.5 v-for：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-for遍历</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <ul> <!-- 数组或list集合 --> <li v-for="(item,index) in arr">{{item+" "+index}}</li> </ul> <ul> <!-- 对象 --> <li v-for="(value,key) in product">{{key}}--{{value}}</li> </ul> <!-- 对象数组 --> <table border="1"> <tr> <td>编号</td> <td>名称</td> <td>价格</td> </tr> <tr v-for="p in products"> <td> {{p.id}} </td> <td> {{p.pname}} </td> <td> {{p.price}} </td> </tr> </table> </div> </body> <script> new Vue({ el:‘#app‘, data:{ arr:[1,2,3,4,5,6], product:{ id:1, pname:"电视机", price:6000 }, products:[ {id:1,pname:"电视机",price:6000}, {id:2,pname:"电冰箱",price:8000}, {id:3,pname:"电风扇",price:600} ] } }); </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-for遍历对象数组</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <table border="1"> <tr> <td>序号</td> <td>编号</td> <td>编号</td> <td>名称</td> <td>价格</td> </tr> <tr v-for="(p,index) in products"> <td> {{index}} </td> <td> {{p.id}} </td> <td> {{p.pname}} </td> <td> {{p.price}} </td> </tr> </table> </div> </body> <script> new Vue({ el:‘#app‘, data:{ products:[ {id:1,pname:"电视机",price:6000}, {id:2,pname:"电冰箱",price:8000}, {id:3,pname:"电风扇",price:600} ] } }); </script> </html>
2.6 v-if与v-show
v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-if与v-show</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <span v-if="flag">hello</span> <span v-show="flag">word</span> <button @click="toggle">切换</button> </div> </body> <script> new Vue({ el:‘#app‘, //表示当前vue对象接管了div区域 data:{ flag:false }, methods:{ toggle:function(){ this.flag = !this.flag; } } }) </script> </html>
3.VueJS ajax
axios：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
get请求：
//通过给定的ID来发送请求
axios.get(‘/user?ID=12345‘).then(function (response) {
console.log(response);
}).catch(function (err) {
console.log(err);
});
//以上请求也可以通过这种方式来发送
axios.get(‘/user‘, {
params: {
ID: 12345
}
}).then(function (response) {
console.log(response);
}).catch(function (err) {
console.log(err);
});
post请求：
axios.post(‘/user‘, {
firstName: ‘Fred‘,
lastName: ‘Flintstone‘
}).then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
});
为方便起见，为所有支持的请求方法提供了别名：
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
以上是关于vue的主要内容，如果未能解决你的问题，请参考以下文章