vue笔记
官网
http://cn.vuejs.org/
mvvm 框架--比angular更小巧，文档阅读方便，全部组件化
版本2.0
vue
指令以 v-xxx
一段html代码 加一个json 再new出一个vue实例
适合做移动端开发 比较小巧
上手简单
angular 适合pc 端开发
上手难
指令一 ng-xxx
属性和方法都在$scope上
这两个都不兼容ie低版本ie8以下不兼容
第一步 拿到vue 的 库文件
vue.min.js 最新的2.0以上版本
思想：
m 数据 data
v 视图 html
c 控制器 new vue()
--------------------------------------
vue的雏形
要求：展示一条数据
html：
<div id="box">
{{msg}}
</div>
js：
var c = new Vue({ new出Vue额对象
el:'#box', 选择器，和jquery一样
data:{ data里可以放字符串，json ，数组， 布尔，数字
msg:'document' 要展示的数据内容
num:12,
boor:true
.......
}
});
注意： 这里的c是可以任意起名的，也可以不写，不写的话就是this。想要拿到里面的num的值，可以这样 this.data.num
----------------------------------
vue常用的指令
v-model 一般放在表单元素上 双向数据绑定
html
<div id="box">
<input type="text" v-model="msg" />
<input type="text" v-model="msg" />
</div>
v-repeat 循环
<!--循环-->
<!--2.0版本后$key,$index,失效了？-->
<!--后来查阅了文档才知道，这是因为在Vue2.0中，v-for迭代语法已经发生了变化：
丢弃了:
新数组语法
value in arr
(value, index) in arr
新对象语法
value in obj
(value, key) in obj
(value, key, index) in obj
-->
html
<div id="box" >
<ul>
<li v-for=" (value, index) in arr">
{{value}} {{index}}
</li>
<hr />
<li v-for='(key,value,index) in json'>
{{value}} {{key}} {{index}}
</li>
</ul>
</div>
------------------------------------------------------------------
事件--- v-on
click
var c = new Vue({
el:'#box',
data:{
arr:['1','2','age'],
json:{'a':11,'b':22,'c':33}
},
methods:{ 事件方法到dethods里
事件名:function(){
alert(1)
//要求弹出json的c的值
alert(this.json.c)
}
}
});
v-on:click = "事件名()"
ddlclick mouseover mouseout ......
==========
深入：
v-on:click="show()" 一般是这样
@click="show()" 这是简写 建议用
---
事件对象：
$event定死的，必须有$
@click(show($event))
methods:{
show:function(ev,n){
alert(ev.clientX)
alert(n)//n也可以拿到
//这里可以拿到事件对象，可以用原生写了
}
}
<input id="btn" type="button" value="按钮" @click="show($event,3)" />
---
事件冒泡：
1. ev.cancelBubble=true;
事件对象 加 原生里的阻止冒泡方法cancelBubble=true
2. @click.stop="show()" 火狐，谷歌支持，ie不测试
直接在c事件后加stop
阻止事件默认行为：
1. ev.preventDefaule=true;
事件对象 加 原生里的阻止默认行为
2. @contextmenu.prevent="show1()"
键盘事件：
onkeydown onkeyup
ev.keycode 获取到键码
也可以@keydown.enter="show()"
up 上
left 左
常用键都封装了。字母没有
等 方便快速
-----------------------------------------
显示隐藏
v-show
v-show='true/false'; true是显示 false是隐藏
要求点击一个按钮让一个对象隐藏：
html：
<input type="button" v-on:click="a=false"/>
<div v-show='a'></div>
在data里设置a=true，意思就是刚开始是显示的 在点击按钮后把数据a变成false传给v-show
data{
a:true
}
要求点击一下隐藏再点一下显示依次往下走：
核心代码：
show:function(){
if(this.a==false){
this.a=true;
}else{
this.a=false;
}
}
<input type="button" v-on:click="show()"/>
写个方法判断a的值并且赋值
留言信息表例子思路
数据第一，有数据vue自会给你渲染视图
1.v-on:click把input里的数据存到data里 再用v-for渲染（注意数据格式），在此之前在input上加v-model（把数据存在this上）
2.删除一个的时候需要拿到本条的index在data里删数据（一般是数组）。
3.删除全部需要存一个变量newIndex=index，这样在下面调用的时候就可以删除，详细看demo
==============================
属性：
<img src="{{url}}"/>
<img v-bind：src='url' />
简写 <img :src='url' />
v-bind 是vue专门绑定属性的
<!--<img src="{{url}}" id="img"/>-->
<!--属性数据中 被2.0丢弃这种写法 ，之前这样写会有效果但是会报404错，所以用以下这种方法：-->
<img v-bind:src="url" id="img"/>
<img :src="url" id="img" :width='a'/>
特殊属性
class
1. :class=[red,blue] 对应的是数据
data{
red:'red',
blue'blue'
}
2. :class="{red:a,blue:b}" 对应的是 类名和数据
data{
a:true,
b:false
}
3. 也可以吧json直接写到数据里，看起来更舒服-推荐
：clsss="json";
data{
json:{
red:true,
blue:false
}
}
==========
style 和class的用法一样
1. :styel=[c,d];/.每一个样式都是一条json
data:{
c:{color:'red'},
d:{backgroundColor:'blue'}//复合样式用驼峰命名法
}
2. :style={json};
data:{
json{
color:"red",
background:"blue"
}
}
========================
模版
http://www.cnblogs.com/jiangxiaobo/p/6068025.html
{{msg}} 数据双向绑定 数据更新模版也会跟着更新
{{*msg}} 数据只绑定一次 数据更新不更新模版 已失效
<p v-once>{{msg}}</p>
<!--之前是{{*msg}} 2.0 后 需要加v-once 作用是 添加一次性模版 不支持数据更新-->
{{{msg}}} 数据转译输出 转成html 已失效
<p v-html='msg'>{{msg}}</p>
新的指令 v-once 和 v-html 需要绑定数据
==============
vue2.0之前 过滤器
体统提供一些过滤器
{{msg| 过滤器1}}
{{msg| 过滤器1 | 过滤器2}}
常用的过滤器有
uppercase
lowercase
capitalize
vue2.0之后废除过滤器，所以需要自己定义过滤器
语法：
Vue.filter('过滤器名',function(){})
例如首字母大写的过滤器这样写
<div id="app">
{{message|uppercase}}
</div>
//过滤器
Vue.filter('uppercase', function(value) {
if (!value) { return ''}
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
过滤器必须写在vue对象之前才会生效
var vm = new Vue({
el:'#app',
data: {
message: 'test'
}
}
-------------
常用过滤器 封装
//全部大写
Vue.filter('Uppercase',function(value){
if(!value){return ''}
value = value.toString();
return value.toUpperCase();
})
//全部小写
Vue.filter('lowercase',function(value){
if(!value){return ''}
value = value.toString();
return value.toLowerCase();
})
//把时间戳转换成北京时间---1
Vue.filter('time', function (value) {
return new Date(parseInt(value) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
})
//把时间戳转换成北京时间---2 比较麻烦了（原生）优点不依赖框架
Vue.filter('time',function(value){
function toDou(n){
return n<10?'0'+n:''+n;
}
var oDate = new Date(value*1000);
return oDate.getFullYear()+'-'+toDou(oDate.getMonth()+1)+'-'+toDou(oDate.getDate())+' '+toDou(oDate.getHours())+':'+toDou(oDate.getMinutes())+':'+toDou(oDate.getSeconds());
})
//补零
Vue.filter('todou', function (n) {
return n<10?'0'+n:''+n;
})
----------------
==================================
交互
本身vue.js不提供交互，需要引vue的交互模块
vue-resource.min.js
get
获取数据
methods:{
show:function(){
this.$http.get('22.txt').then(function(res){
alert(res.data)
},function(res){
alert(res.status)
})
}
}
2.0 之后get发送数据貌似不好使，没深究，用post就行了 ----不使用min版js就行
发送数据
post
methods:{
show:function(){
this.$http.post('get.php',{
a:2, //参数 json 发送数据
b:3
},{
emulateJSON:true//加个声明
}).then(function(res){
alert(res.data)
},function(res){
alert(res.status)
})
}
}
jsonp
<!--
vue-resource.min.js 不能用于jsonp 还有 连接php文件时有问题
请使用 vue-resource.js 太坑了 以后再也不用min版了。
-->
获取接口
https://sug.so.360.cn/suggest?word=a 好搜的接口
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd= 百度
js:
methods:{
show:function(){
this.$http.jsonp('https://sug.so.360.cn/suggest',{ //接口末尾不能有空格
word:'a' //搜索的内容
}).then(function(res){
console.log(res.data.s)
},function(res){
alert(res.status)
})
}
}
-------------------------------------------------------
百度搜索下拉
看 dome 吧
get 练习 微博留言板
注意事项
数据data中数据变量名 和 事件函数名不要一样 不然找事件会找不到 this先在数据变量里找 再去 找事件
此片博文是转载 Lookforto 作者
