Vue学习笔记(一)
来源:互联网 发布:网络监控能监控qq吗 编辑:程序博客网 时间:2024/05/22 10:47
最近在学习vue.js,和大家分享一下,共同进步:
1、vue基本模型:
一段html代码配合json,再new 处理vue实例。
html代码:
<div id="box">
{{msg}} //json格式的数据
</div>
vue.js:
var vm = new Vue({
el:'#box', //选择器
data:{
msg:'welcome to vue' //数据
},
methods:{ //回掉函数
methodName:function() {
}
}
})
2、常用指令:
2.1、v-model 绑定数据
<input type="text" v-model="msg"/>
<div id="box">
{{msg}}
</div>
new Vue({
el:'#box',
data:{
msg:'' //初始化msg
}
})
2.2、v-for 循环
语法:
2.2.1、v-for="value in array"
{{value}} {{$index}}
2.2.2、v-for="value in json"
{{value}} {{$key}} {{$index}}
2.2.3、v-for="(k,v) in json"
{{k}} {{v}} {{$key}} {{$index}}
如果有重复的数据:
track-by='索引' ====>> track-by='$index/uid'
2.3、v-on: 绑定事件
2.3.1、v-on:click="回掉函数" ====>>> 可以简写为: @click=""
v-on:click/mouseout/mouseover/dbclick/mousedown......
vue.js代码:
new Vue({
el:'',
data:{
}
methods:{
回掉函数:function() {
}
}
})
2.3.2、事件对象:
@click="show($event)"
2.3.3、事件冒泡:(事件行为依次向上传递)
阻止冒泡:
①.ev.cancelBubble = true;
②.@click.stop
2.3.4、默认行为(默认事件)
阻止默认行为:
①.ev.preventDefault();
②.@contextmenu.prevent
2.3.5、键盘事件:
@keydown @keyup ......
常用键:
回车:
①.@keyup.13
②.@keyup.enter
上/下/左/右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
2.4、v-show 显示/隐藏 //后面跟的是boolean值
v-show="true" //显示该控件
v-show="false" //隐藏该控件
2.5、v-bind: 绑定属性
v-bind:src="" ====>>> 可以简写为: :src=""
new Vue({
el:'',
data:{
url:'https://www.baidu.com/img/bd_logo1.png'
},
methods:{
}
})
<img src="{{url}}" alt=""> //效果能出来,但是在浏览器的控制台中会报一个404错误
<img v-bind:src="url" alt=""> //效果可以出来,而且不会报错
2.6、v-cloak 防止闪烁,防止用户看到花括号标记
3、自定义指令
3.1、自定义属性指令
格式:
Vue.directive(指令名称,function(参数){
this.el...
}
<div v-red="参数"></div>
★注意:指令名称:v-red 必须以"v-"开头,且在js里面的指令名称去掉"v-"
举例:
<script>
Vue.directive('red',function(color){
this.el.style.background=color;
});
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
}
});
};
</script>
<div id="box">
<span v-red="a">
asdfasd
</span>
</div>
3.2、自定义元素指令:(用处不大)
格式:
Vue.elementDirective('指令名称',{
bind:function() {
this.el.style.background='red';
}
});
4、class和style
:class="" <<======>> v-bind:class=""
:style="" <<======>> v-bind:style=""
class:
:class="[red]" //red是vue.js中data的数据
:class="[red,a,b,c]"
:class="{red:a, blue:false}" //这里的red是html中的属性名,a是vue.js中data的数据
:class="json" //json的型式为:
data:{
json:{red:a,blue:false}
}
style:
style与class的用法类似
:style="[c]"
:style="[c,d]"
:style="json"
5、模板
msg:
data:{
msg:'<strong>welcome to vue</strong>'
}
{{msg}} //数据更新,模板变化,等价于===><span v-text>{{msg}}</span>
{{*msg}} //数据只绑定一次,即:数据更新,模板不会发生变化,等价于===><span v-once>{{msg}}</span>
{{{msg}}} //html转义输出,即:html标签会以html格式进行处理,等价于===><span v-html>{{msg}}</span>
6、过滤器
格式:{{msg|filterA}}
{{msg|filterA|filerB}}
举例: {{'welcome'|uppercase}}
vue提供过滤器:
capitalize uppercase currency....
debounce 参数(毫秒) 配合事件,延迟执行
数据配合使用过滤器:
limitBy 参数1 限制几个
limitBy 参数1 参数2 取几个,从哪儿开始
filterBy 参数 过滤数据
orderBy 1/-1 1:正序; -1:倒序
自定义过滤器格式:
Vue.filter(name,function(input) {});
举例: 时间转换器
<div id="box">
{{a | date}}
</div>
<script>
Vue.filter('date',function(input){
var oDate=new Date(input);
return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
});
var vm=new Vue({
data:{
a:Date.now()
},
methods:{
}
}).$mount('#box');
</script>
双向过滤器*
7、交互
$http (ajax)
如果vue想做交互,要引入:vue-resouce
get方式:
①.获取一个普通文本数据:
this.$http.get('a.txt')
.then(function(res){
alert(res.data);
},function(res){
alert(res.status);
})
②.给服务器发送数据:
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res) {
alert(res.data);
},function(res) {
alert(res.status);
});
post方式:
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res) {
alert(res.data);
},function(res) {
alert(res.status);
});
jsonp方式:
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //callback名字,默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
8、vue的生命周期:
钩子函数:
created:实例已经创建
beforeCompile:编译之前
compiled:编译之后
ready:插入到文档中
beforeDestroy:销毁之前
destroyed:销毁之后
举例:
<div id="box">
{{msg}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
msg:'well'
},
created:function(){
alert('实例已经创建');
},
beforeCompile:function(){
alert('编译之前');
},
compiled:function(){
alert('编译之后');
},
ready:function(){
alert('插入到文档中');
},
beforeDestroy:function(){
alert('销毁之前');
},
destroyed:function(){
alert('销毁之后');
}
});
/*点击页面销毁vue对象*/
document.onclick=function(){
vm.$destroy();
};
</script>
- Vue学习笔记(一)
- Vue学习笔记一
- Vue学习笔记一 创建vue项目
- Vue学习笔记(一)
- Vue.js学习笔记(一)
- Vue 学习笔记(一)
- vue学习笔记(一)
- vue学习笔记(一)
- vue学习笔记(一)
- vue学习笔记—vue基础(一)
- Vue.js - 学习笔记 (一)
- Vue.js学习笔记(一)
- vue.js学习笔记(一)
- VUE学习笔记(一)基础
- vue 学习笔记一之Quick Start
- Vue.js(慕课网学习笔记一)
- vue学习笔记【基础篇一】
- vue.js学习笔记,一、安装部署
- 小白入手mui的学习路线
- spark之pageRank
- list对象去重
- Android运行时报错:In <declare-styleable> ConstraintSet
- 详解Linux运维工程师打怪升级篇
- Vue学习笔记(一)
- android面试基础知识要点
- Restful API接口调试工具推荐(Postman, HTTPie)
- PHP tp5 使用,连接 postgres 问题
- 第一章 算法在计算中的作用
- ACM头文件、常用函数、宏定义
- 有了这些免费无限次的API 接口,再也不愁没有服务器开发不了APP了,也可以自己开发小程序了
- java基础---->Base64算法的使用
- 这样讲TCP的恋爱和分手大家都懂了