vue学习笔记

<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>

Vue 的生命周期
created:function(){实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，需要初始化处理一些数据时会比较有用},
mounted:function(){el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始},
beforeDestroy:function(){实例销毁之前调用。主要解绑一些定时器，addEventListener监听等}

插值与表达式
{{}} 显示双向绑定的数据,可以做简单的运算，三元运算
v-pre   跳过这个元素和它的子元素的编译过程
v-mode="data"  绑定vue的数据，修改内容会改变vue数据
v-html="data"  直接显示数据内容，内容不会被渲染

过滤器 处理简单的文本转换
{{date|formatDate}}
filters : { 
    formatDate :function((value)){//TODO}
}
可以串联多个过滤器，可以传参数，第一个参数是数据本身

计算属性
{{fullname}}
computed:{
    fullname: function{
    	get: function(){
    	    //计算属性可以使用当前Vue实例this，也可以使用其他实例的数据
    		return this.firstName+' '+this.lastName;
	}
}
区别于methods  
computed适用需要缓存和处理大数据的情况，Date.now()不会动态更新
methods不会缓存是实时更新的，Date.now()会动态更新

操作样式

绑定class  
v-bind:class 简写 :class
<div class="static" :class="{'active':isActive,'error':isError}">aaaaaa</div>
data:{
		isActive:true,
		isError:false,
		classA:'active',
		classB:'noactive',
		classC:'error'
	}
渲染结果<div class="static active"></div>
使用三元表达式
<div :class="[isActive ? classA:classB,classC}">aaaaaa</div>
使用计算属性
<div :class="classes"></div>
computed: {
    classes:function (){ 
        return { 
            active:this.isActive && !this.error, 
            'text-fa': this.error && this.error.type === 'fail'
            }
        }
    }
使用数组
<div :class="[activeCls,errorCls]"></div> 
data : {  
    activeCls:'active', 
    errorCls:'error'
}

绑定内联样式
<div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>
data:{
    color:'red',
    fontSize:14
}
css属性使用驼峰命名或短横分隔，渲染结果
<div :style="color:red;font-size:14px;">文本</div>
复杂样式最好写在data或computed
<div :style="styles">文本</div>
data:{
    styles:{
        color:'red',
        fontSize:14+'px'
    }
}
应用多个样式数据
<div :style="[styleA,styleB]">文本</div>

内置指令

1,常用指令

1，v-bind    动态更新 HTML 元素上的属性，简写为 ：
<a v-bind:href="url">链接</a
2，v-on      用来绑定事件监听器，简写为 @ 
<button v-on:click＝"handleClose">点击隐藏</button>
方法都写在Vue实例的methods属性内,还可绑定dblclick keyup,mousemove等
方法与方法可以互相调用
3，v-once  定义它的元素或组件只渲染一次，包括元素或组件的所有子节点
<span v-once>{{ message }}</span> 

条件渲染指令

1，v_if、v_else_if、v_else
<p v-if="status === 1">当 status为 1 时显示该行</p>
<p v-else-if="status === 2">当 status 为2 时显示该行</p>
<p v-else>否则显示该行</p>
默认会复用组件，不会重新渲染，不需要复用可以在组件上加上 key属性
<template v-if="type ==='name'">
<label>用户名 </label>
<input placeholder="输入用户名" key="name-input">
</template> 
<template v-else> 
<label>邮箱 </label>
<input placeholder="输入邮箱" key="eail-input">
</template> 
<button @click="handleToggleClick">切换输入类型</button>
methods:{
    handleToggleClick: function() { 
        this.type=this.type ==='name'?'mail':'name'; 
}}

2，v_show 用法与v_if基本一致。
v_if与v_show的区别 
v_show只是改变CSS的display，无论条件是否成立都会被编译渲染，适用于频繁切换
v_if 会根据条件销毁和重建元素，表达式初始为fals，这一开始就不会被渲染，条件成立才会开始编译

列表渲染指令

v-for="item in items"  使用in 和of 一样，可选index
<ul id="app">
	<li v-for="(book,index) of books">{{index}}-{{book.name}}</li>
</ul>
data:{books:[{name:'aaJavaScripaa'},{name:'bbbavaScrip'},{name:'cccc'},{name:'ddd'}]}
遍历属性对象 
<span v-for="value in user">{{value}} </span> 
data:{user:{name:'熊大',age:14,weight:'69kg',job:'开发'}}
<li v-for= "(value,key,index) of user">
    {{index}} - {{key}} : {{value}} 
</li> 
遍历数组时，操作数组会实时更新视图
push() 
pop() 
shift() 
unshift()
splice() 
sort()
reverse()
app.books.push({name:'fffff'});
不会改变原始数据的方法:
filter()
concat()
slice()
app.books=app.books.filter(function(item){
        return item.name.match(/Scrip/);
    }
)
修改数组，无法通过app.books[3]={...}修改，正确方式：
Vue.set(app.books,3,{name:'《java进阶》'});
或者
app.books.splice(3,1,{name:'《java进阶》'})
webpack中
this.$set(app.books,3,{name:'《java进阶》'})

过滤与排序
<template v-for="book in filterBooks">
    {{name}}
</template>
computed:{ 
        //过滤
	    filterBooks:function(){ 
	        return this.books.filter(function (book) { 
	            return book.name.match(/Scrip/); })
	    },
	    //排序
	    sortBooks:function(){
	        return this.books.sort(function(a,b){
	            return a.name.length<b.name.length;
	        })
	    },
	    //过滤+排序 串联方法
	    filterAndSort:function(){
	            return this.books.filter(function (book) { 
	                return book.name.match(/Scrip/); })
    	            .sort(function(a,b){
    	                return a.name.length<b.name.length;
    		        })
		    }
	    
    }

方法与事件

v-on:  简写为@    Vue提供特殊变量$event  可以访问原生DOM事件
<a href="http://www.apple.com" @click="handleClick('禁止打开',$event)">打开链接</a>
methods:{ 
    handleClick:function (message,event){
        event.preventDefault(); 
        window.alert(message);
    })
}
修饰符
.stop     阻止事件
.prevent  不再重载
.capture  使用事件捕获模式
.self     只当事件在该元素本身（而不是子元素）触发时回调
.once     只触发一次

监听键盘事件，使用按键修饰符,例如：
<!--只有在 keyCode 13 时调用 submit()-->
<input @keyup.13="submit">
自定义全局KeyCode 
Vue.config.keyCodes.fl = 112;
定义之后可以使用 @keyup.fl
常用快捷keyCode别名
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
这些按键修饰符也可以组合使用，或和鼠标一起配合使用：
.ctrl
.alt
.shift
.meta  (Mac 下是 Command 键， Windows 下是窗口键）
组合使用示例
<!--Shift + S-->
<input @keyup.shift.83="handleSave">
<!-- Ctrl + Click --> 
<div @click.ctrl="doSomething">Do something</div> 

表单与v-model

文本框与文本域使用 v-model 绑定数据，元素初始写入的内容不会显示

单选按钮  
单独使用可以直接使用v_bind绑定一个布尔值，
组合使用可以使用value和v-model配合
<input type='radio' v-model='picked' value='html'><lable for='html'>HTML</lable></br>
<input type='radio' v-model='picked' value='js'><lable for='js'>JavaScript</lable></br>
<input type='radio' v-model='picked' value='css'><lable for='css'>CSS</lable></br>
<p>选择的是：{{picked}}</p>
data:{picked:'js'}

复选框    
单独使用v-model绑定布尔值
组合使用 多个复选框绑定到一个数组类型的数据，勾选某一项value的值会自动push到这个数组中
<input type='checked' v-model='checked' value='html'><lable for='html'>HTML</lable></br>
<input type='checked' v-model='checked' value='js'><lable for='js'>JavaScript</lable></br>
<input type='checked' v-model='checked' value='css'><lable for='css'>CSS</lable></br>
<p>选择的是：{{checked}}</p>
data:{checked:['html','css']}

单选下拉列表
<select v-model="selected">
	<option value="html">html</option>
	<option value="js">js</option>
	<option value="css">css</option>
</select>
data:{selected:'css'}
多选下拉列表
<select v-model="selected" multiple>
	<option value="html">html</option>
	<option value="js">js</option>
	<option value="css">css</option>
</select>
data:{selected:['css','html']}

绑定值