vue

vue.js的指令

1.插值表达式{{}},双大括号表达式,不能直接写在html标签上
v-bind,html标签上的插值指令
<div id="app">		//vue接管区域不能是body标签
    {{message}}		//插值表达式中的变量必须赋值
    <input value="{{message}}"/>	//报错,双大括号插值指令不能直接作用在html标签上
    <input v-bind:value="message"/>		// 成功显示message
</div>
<script>
    new Vue({
        el: "#app",		//id选择器,表示当前vue对象接管了指定id的div区域
        data:{			//插值表达式的数据来源
            message:	"Hello Vue..."
        },
        created:function(){
		//TODO ..当Vue对象创建完成后,自动执行
		}
    });
</script>
注意:表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析,每个绑定都只能包含单个表达式
	{{message1;message2}}不合法
	{{var a = 1}}不合法
	{{if(true){...}}}不合法

2.v-on指令,监听 DOM 事件,并在触发时运行一些JavaScript代码,可以简写为:@
2.1 v-on:click 监听单机事件
@click
<div id="app">
    <input type="text" v-on:click="fun()"/>
</div>
<script>
    new Vue({
        el: "#app",
        methods: {		//注意:methods来指定触发的方法
            fun:function(){
                alert(1);
            }
        }
    });
</script>

2.2 v-on:keydown 监听键盘按下事件
@keydown
原生JS的API: 
	event.keyCode 获取键盘按下的键的十进制属性值
	event.preventDefault()	阻止系统默认事件
	event.stopPropagation() 停止事件传播(某个操作触发了多个事件,停止这行代码后的所有事件)
<div id="app">
    <input type="text" onkeydown="fun1()"/>
    <input type="text" v-on:keydown="fun2($event)"/>
</div>
<script>
    //原生JS的键盘按下事件
    function fun1(){	
        //event代表触发当前时间的对象,event.keyCode获取按下键的十进制数据,比如按下"A"-->65
        var keyCode = window.event.keyCode;		
        if(65<=keyCode&&keyCode<97){
            event.preventDefault();		//阻止默认事件发生,即:按"A"--"Z"无效
        }
    }
    //使用Vue的键盘按下事件
    new Vue({
        el: "#app",
        methods: {		//注意:methods来指定触发的方法
            fun2:function($event){
                $event.preventDefault();	//阻止事件发生
            },
            fun3:function($event){
                if($event.keyCode==13){
                    consonle.info('你按下了回车键...');
                }
            }
        }
    });
</script>

2.3 v-on:mouseover 监听鼠标移动到某区域指令
<div id="div1" v-on:mouseover="fun1()">
    外面...
    <div id="div2" @mouseover="fun2($event)">
        里面...
	</div>
</div>
<script>
    new Vue({
        el:"#app",
        methods:{
            fun1(){ 
             	alert("移动到外面...");	   
            },
            fun2(){ 
                alert("移动到里面...");	   
             //因为div1包裹着div2,因此移动到div2会触发两个事件,使用sopPropagation()可以停止事件的传播
                $event.stopPropagation();	
            }
        }
    });
</script>

2.4 事件修饰符
.stop		-->event.stopPropagation();
.prevent	-->event.preventDefault();
.capture
.self
.once
<form v-on:submit.prevent action="www.baidu.com">
    <input type="submit" value="提价"/>	//结果:提交按钮无效
</form>
<div v-on:click="fun()">
    <a v-on:click.stop href="www.baidu.com">跳转</a>	//结果:fun()不执行
</div>
<script>
    new Vue({
        el:"#app",
        methods:{
            fun:function(){ ... }
        }
    });
</script>

2.5按键修饰符
监听键盘事件时添加按键修饰符
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
<div id="app">
    <inopt v-on:keydown.enter="fun()"/>
</div>
<script>
    new Vue({
        el:"#app",
        methods:{
            fun:function(){ alert('按下了回车键');}	//只有按回车键才触发
        }
    });
</script>

3.v-text与v-html
v-text:相当于document.getElementById("#id").innerText
v-html:相当于document.getElementById("#id").innerHTML
<div v-text="message">	//<h1>Hello</h1>
</div>
<div v-html="message">	//html版:<h1>Hello</h1>
</div>
<script>
    new Vue({
        el: "#app",
        data:{
            message:'<h1>Hello</h1>'
        }
    });
</script>

4.v-for循环指令,注意,循环的时候是(value,key)
<div id="app">
    <ul>
        <li v-for="(value,index) in arr">{{index}}  :   {{value}}</li>
         <li v-for="(value,key) in arr">{{index}}  :   {{value}}</li>
    </ul>
</div>

5. v-if与v-show
v-if是根据表达式的值来决定是否渲染元素,如果为false直接不在dom上挂载div
v-show是根据表达式的值来切换元素的display css属性,如果为false在dom上挂载div,但是不显示
<div v-if="flag">div1</div>	
<div v-show="flag">div2</div>
<script>
    new Vue({
        el:"#app",
        data:{
            flag:true
        }
    });
</script>

6. v-model vue中的双向绑定

vue发送ajax请求

<!--联网引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
或者
<script src="js/axios-0.18.0.js"></script>
1.get请求
get请求的请求参数,如果使用json格式提交必须指定在params属性下:
get("url",{params:{...}});
axios.get("url",{请求参数,key:value}).then(function(response){
    //success
}).catch(function(response){
    //error
});
2.post请求
post,随意
axios.post()....

由axios发送的一步请求,响应数据response会携带一些其他信息;要想获得真正服务器的返回值,可以通过data属性
即: response.data
由于vue中没有$scope来代表当前页面对象,所以需要用this,但是如果是在axios的异步请求中使用this,this代表的是axios对象,所以:
data:{
    userList:[]
}
methods:{
    findAll:function(){
        var _this = this;  //此时的this 代表的仍然是vue对象
        axios.get("/user/findAll.do").then(function(response){
            //如果使用this.userList报错,此时的this代表axios对象
            _this.userList = response.data;
        });
    }
}

new Vue()的原理

<script>
	new Vue({
        el:"#app",	 //id选择器
        data:{
            name:'张三',
            age:18
        },
        methods:{
            fun1:function(){
            	alert(this.name);	//张三
            }
        }
	});
</script>
	当js代码执行到new Vue(),进入Vue的构造方法,底层会对new对象的参数options,调用mergeOptions(options),将options合并到Vue对象中,并返回一个新的$options;所以最终我们使用Vue的某个方法或者属性,可以直接用this.message;而不是视觉上ognl的用法

vue的生命周期

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue的生命周期</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function() {
console.log(this);
showData('创建vue实例前', this);
},
created: function() {
showData('创建vue实例后', this);
},
beforeMount: function() {
showData('挂载到dom前', this);
},
mounted: function() {
showData('挂载到dom后', this);
},
beforeUpdate: function() {
showData('数据变化更新前', this);
},
updated: function() {
showData('数据变化更新后', this);
},
beforeDestroy: function() {
vm.test = "3333";
showData('vue实例销毁前', this);
},
destroyed: function() {
showData('vue实例销毁后', this);
}
});
function realDom() {
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
}
function showData(process, obj) {
console.log(process);
console.log('data 数据：' + obj.message)
console.log('挂载的对象：')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
vm.message="good...";
vm.$destroy();
</script>
</body>
</html>