vue基础（1）

实例与数据

el是vue实例必不可少的选项，它可以是HTMLElement，也可以是css选择器

<div id="app"></div>
var app = new Vue({
    el:document.getElementById('app') //或者是'#app'
})

挂载成功后可以通过app.$el来访问该元素

---

通过vue实例的data选项，可以声明应用内需要的双向绑定数据。 

var app new Vue({
    el:"#app",
    data:{
        a:2
    }
})

console.log(app.a); //2

除了直接声明数据外，可以指向一个已有的变量，并且它们之间默认建立了双向绑定，改变其中任意一个，另一个也会一起变化。

var myData = {
    a:1
}
var app = new Vue({
    el:'#app',
    data:myData
})

console.log(app.a);//1
app.a = 2;
console.log(myData.a);//2
myData.a = 3;
console.log(app.a);//3

 声明周期

Vue生命比较常用的有：

created 实例创建完后调用，$el不可用，初始化处理一些数据时用

mounted el挂载到实例上调用，第一个业务逻辑的开始

beforeDestroy 实例销毁前调用，主要解绑一些使用addEventListener监听的事件

var app = new Vue({
    el:'#app',
    data:{
        a:2
    },
    created:function(){
        console.log(this.$el);//undefined
    },
    mounted:function(){
        console.log(this.$el);//<div id="app"></div>
    }
})

插值与表达式

1.使用双大括号{{}}是最基本的文本插值方法，自动会将双向绑定的数据实时显示出来

2.有时候想直接输出html，就是解析过标签的html,可以使用v-html

3.如果想显示{{}}标签，使用v-pre可跳过编译过程

<div id="app">
	{{link}} //<a href="#">一个链接</a>
    <span v-html="link"></span>//一个链接
    <span v-pre>{{link}}</span>//{{link}}
</div>
<script>
    var app = new Vue({
    	el:'#app',
    	data:{
    		link:'<a href="#">一个链接</a>'
    	}
    })
</script>

 过滤器

1.对数据进行过滤，用于格式化文本（比如字母全部大写等）

2.过滤器可以串联 {{ message | filterA | filterB }}

3.接收参数 {{ message | filterA('arg1','arg2') }} 这里的字符串arg1和arg2将分别传给过滤器的第二个和第三个参数，第一个是数据本身

<div id="app">
	{{date | formatDate}}
</div>
<script>
    var padDate = function(value){
    	return value < 10 ? '0' + value : value;
    }
    var app = new Vue({
    	el:'#app',
    	data:{
    		date:new Date()
    	},
    	filters:{
    		formatDate:function(value){//value就是要过滤的数据
    			var date = new Date(value);
    			var year = date.getFullYear();
    			var month = padDate(date.getMonth() + 1);
    			var day = padDate(date.getDate());
    			var hours = padDate(date.getHours());
    			var miuntes = padDate(date.getMinutes());
    			var seconds = padDate(date.getSeconds());
    			return year + '-' + month + '-' + day + ' ' + hours + ':' + miuntes + ':' + seconds;
    			
    		}
    	},
    	mounted:function(){
    		var _this = this;//声明一个变量指向Vue实例this，保证作用域一致
    		this.timer = setInterval(function(){
    			_this.date = new Date();//修改数据Date
    		},1000)
    	},
    	beforeDestroy:function(){
    		if(this.timer){
    			clearInterval(this.timer);//在实例销毁前，清除定时器
    		}
    	}
    })
</script>

指令与事件

指令带有前缀v-，指令的主要作用是当表达式的值改变时，相应的将某些行为应用到DOM上。当show值为true时，p元素会被插入，为false时会被移除。

v-bind基本用途是动态更新html元素上的属性，如id，class。

v-on用来绑定事件监听器，除了click外，还有dblclick、keyup、mousemove。

<div id="app">
    <p v-if="show">显示</p>
    <a v-bind:href="url">链接</a>
    <button v-on:click="DianJi">点击</button>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            show:true,
            url:'https://www.baidu.com'
        },
        methods:{
            DianJi:function(){
                this.show = false
            }
        }
    })
</script>

语法糖

v-bind和v-on指令提供了语法糖

<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
<!--缩写为-->
<a :href="url">链接</a>
<img :src="imgUrl">

v-on可以直接用@来缩写
<button v-on:click="dianji">点击</button>
<button @click="dianji">点击</button>