1.vue基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.min.js" ></script>
<script>
window.onload=function(){
var c = new Vue({
el:"#box", //选择器
data:{ //数据
msg:'welcome to vue'
},
methods(){
show:function(){
alert(1);
}
}
});
};
</script>
</head>
<body>
<div id="box">{{msg}}</div>
</body>
</html>
2.v-model="msg" //双向数据绑定，msgdata中的数据
3.v-for //循环
v-for=“value in arr” //循环 value是每一项值，arr代表一个数组或json数据，{{$index}} //是循环的每一项的索引值，数组，json都有，{{$key}} //json数据的键
v-for="(k,v) in json" //循环json数据，得到{{k}}-->key、{{v}}-->value
4.事件 事件都需要在methods里面注册一下才可以使用
v-on:click="show()"-->点击事件,show()就是要执行的函数
v-on:可以用@来替换
5.显示与隐藏
v-show=“true/false”
6.传参与组织与事件
1-1.)在执行事件时，我们传进一个参数$event，会得到一个对象，其中要好多方法，例如，ev.cancelBubble = true; //组织冒泡事件等
1-2.)组织冒泡事件还有另一种方法，在事件后面直接跟.stop，例如：@click.stop=“show()”
2-1.)阻止默认行为，以右击为例 @contextmenu="show($event)"//右击方法 ev.preventDefault();//阻止默认弹出框
2-2.)组织默认行为，以右击为例 @contextmenu.prevent=“show()”
3-1.)键盘事件传参 @keydown="show($event)" ev.keycode; //得到键盘每个键的键码
3-2.)键盘事件，按固定键触发 @keydown.13="show()" //按键码为13时触发，13代表enter键
3-3.)键盘事件，按固定键时触发 @keydown.enter="show($event)" //按enter键触发
7.class
一、
①、在css中写一个.red{color:red;}.blue{background-color:blue;}
②、在data中写两个数据r:‘red’,b='blue'
③、在<p :class="[r,b]">文字</p>
二、
①、在css中写一个.red{color:red;}.blue{background-color:blue;}
②、在<p :class="{red:true,blue:false}">文字</p>
三、
①、在css中写一个.red{color:red;}.blue{background-color:blue;}
②、在data中写两个数据json：{red:true,blue:false}
③、在<p :class="json">文字</p>
8.style(数据中写复合样式注意用驼峰命名法)
一、
①、在html中直接写<p :style="{color:'red'}">这里是文字</p>
二、
①、在html中直接写<p :style="[c]">这里是文字</p>
②、在data中写样式数据 c:{color:'red'}
三、
①、在html中直接写<p :style="[c,b]">这里是文字</p>
②、在data中写样式数据 c:{color:'red'},b:{backgroundColor:'blue'}
四、
①、在css中写一个.red{color:red;}.blue{background-color:blue;}
②、在data中写两个数据json：{red:true,blue:false}
③、在<p :style="json">文字</p>
9.数据绑定 v-model
1.)在data中定义一个数据msg
2.)在html中用{{msg}}接受数据 {{msg}}双向绑定数据值 {{*msg}}数据只绑定一次 {{{msg}}} html转义
10.过滤器
1.){{msg | uppercase}} 数据转大写
2.){{msg | lowercase}} 数据转小写
3.){{msg | capitalize}}数据首字母大写
4.){{12 | currency}} 转为钱的标志，默认为$ ,若转为￥，{{12 | currency ‘￥’}}
5.)@keyup="show() | debounce 5000" //五秒后执行show()事件
6.)limitBy 2 // 取（默认前）2个数据 limitBy 2 1 //取2条数据，从1开始 limitBy 2 arr.length-2 //取倒数2条数据，arr为这个数组
7.)filterBy ‘p’ //得到数据中包含p的数据
8.)orderBy //排序 参数可以为1正序，-1倒叙