Vue.js基础

Vue.js:渐进式JavaScript框架 没有太多的限制


1.引入cdn：

<script src="https://unpkg.com/vue"></script>

或者：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.实例化vue对象：

new Vue({
	el:"#vue-app"         //elment 需要获取的元素，一定是html中的根容器元素
	data:{                //用于数据的存储
		name:"啊啊啊啊";
		job:"web开发";
		website:"http://www.baidu.com",                           
		websiteTag:"<a href='http://www.baidu.com'>the new web</a>"
	}
	methods:{             //用于存储方法
		greet:function(time){
			return 'Good'+time+""+this.name+"！";
		}
	}
});

<div id="vue-app">
	<h1>{{greet(morning)}}</h1>
	<p>{{ name }}</p>
	<p>{{job}}</p>
	<a v-bind:href="website">web</a>      
	<p v-html="websiteTag"></p>
</div>

3.Vue-属性绑定：v-bind:  绑定值、标签
例如:

<input type="text" v-bind:value="name">

Vue-数据和方法
el:elment 需要获取的元素，一定是html中的根容器元素
data:用于数据的存储
methods:用于存储各种方法
data-binding:给属性绑定对应的值


4.Vue-事件:点击、双击、鼠标事件(event)

<div id="vue-app">
	<h1>Event</h1>
	<button v-on:click="age++">涨一岁</button>
	<button v-on:click="age--">减一岁</button>
	<p>my age is {{age}}</p>
</div>

new Vue({
	el:"#vue-app",
	data:{
		age:30
	}
});

加方法实现：

<div id="vue-app">
	<h1>Events</h1>
	<button v-on:click="add">涨一岁</button>
	<button v-on:click="subtract">减一岁</button>
	<p>my age is {{age}}</p>
</div>

new Vue({
	el:"#vue-app",
	data:{
		age:30
	},
	methods:{
		add:function(){
			this.age++;
		},
		subtract:function(){
			this.age--;
		}
	}
});

上面的例子双击：

<button v-on:dblclick="add(10)">双击涨十岁</button>
<button v-on:dblclick="subtract(10)">双击减十岁</button>

methods:{
		add:function(inc){
			this.age +=inc;
		},
		subtract:function(dec){
			this.age -=dec;
		}
	}

鼠标事件，获取X，Y的坐标

<div id="canvas" v-on:mousemove="updataXY">{{x}},{{y}}</div>

data:{
	x:0,
	y:0
},
methods：{
	updateXY:function(event){
		this.x=event.offsetX;
		this.y=evetn.offsetY;
	}
}

最后：v-on:click 与@click 作用相同


5.Vue-事件修饰符(once:prev:stop)
鼠标移到span上事件停止

<div id="canvas" v-on:mousemove="updataXY">
	{{x}},{{y}} -
	<span @mousemove.stop> Stop Moving</span>   
</div>

点击只触发一次

<button v-on:click.once="add">涨一岁</button>

阻止默认事件的修饰符prevent
原本点击a标签会弹出警示框，并且跳转网页，添加prevent之后不会跳转网页了

<a @click="alert()" href="http://www.baidu.com"></a>

methods：{
	alert:function(){
		alert("Holle word!");
	}
}

6.Vue-键盘事件及键值修饰符
键盘监听事件

<div id="vue-app">
		<h1>键盘 Events</h1>
		<label>姓名：</label>
		<input type="text" v-on:keyup="logName">
		<label>年龄：</label>
		<input type="text" @keyup="logAge">
</div>

methods:{
		logName:function(){
			console.log("你正在输入名字");
		},
		logAge:function(){
			console.log("你正在输入年龄");
		}
	}	

键值修饰符

<input type="text" @keyup.enter="logAge"> 

  按回车enter触发


7.Vue-双向数据绑定 /input/select/textarea
ref 标记  调用：this.$refs.name.value   例子：

<label >姓名：</label>
<input ref="name" type="text" @keyup="logName">
<span >{{name}}</span>
<label >年龄：</label>
<input ref="age" type="text" @keyup="logAge">
<span >{{age}}</span>

data:{
	name:"",
	age:""
},
methods:{
	logName:function(){
		this.name = this.$refs.name.value;
	},
	logAge:function(){
		this.age = this.$refs.age.value;
	}
}

v-model=""  后面绑定输出的属性  例子：
不用方法双向绑定

<label >姓名：</label>
<input type="text" v-model="name">
<span>{{name}}</span>
<label >年龄：</label>
<input type="text" v-model="age">
<span>{{age}}</spa

data:{
		name:"",
		age:""
	}

8.Vue-计算属性Computed  //一般用于复杂的计算。例子：

<button @click="a++">Add to a</button>
<button @click="b++">Add to b</button>
<p>A-{{a}}</p>
<p>B-{{b}}</p>
<p>Age + A = {{addToA}}</p>     //computed不能加括号（方法）
<p>Age + B = {{addToB}}</p>

data:{
	a:0,
	b:0,
	age:20
},
computed:{
	addToA:function(){
		return this.age + this.a;
	},
	addToB:function(){
		return this.age + this.b;
	}
	}	

9.动态绑定css样式 v-bind:class=""
例子：绑定一个class，值在data里，通过点击改变data里面的值false取反变成true，从而改变颜色，实现动态改变
html部分：

<div @click="changeColor = !changeColor" v-bind:class="{changeColor:changeColor}">
	<span>frank</span>
</div>

JS部分：

data:{
	changeColor:false,
}

CSS部分：

.changeColor span{
	background: green;
	}

点击按钮变颜色、变长：
v-bind:class="compClasses" 把整个对象返回
HTML部分：

<button @click="changeColor=!changeColor">change color</button>
<button @click="changeLength=!changeLength">change length</button>
<div v-bind:class="compClasses">
	<span>henry</span>
</div>

JS部分：

data:{
	changeColor:false,
	changeLength:false
},
computed:{
	compClasses:function(){
		return {
			changeColor:this.changeColor,
			changeLength:this.changeLength
		}
	}
}

CSS部分：

span {
	padding: 10px;
	display: inline-block;
	background: red;
	margin: 10px 0;
	color: #fff;
}
.changeColor span{
	background: green;
}
.changeLength span:after{
	content: "length";
	margin-left: 10px;
}

10.vue-指令v-if 条件渲染
例子：如果是false不显示，点击false取反变真就显示。 else-if否则，与if只能取一
<button @click="error = !error">Toggle Error</button>
<button @click="success = !success">Toggle Success</button>
<p v-if="error">网络连接错误：404</p>
<p v-else-if="success">网络连接成功：200</p>


data:{
error:false,
success:false
},
额外：v-show，把display属性改变


11.vue-指令v-for 循环
遍历数组、对象
<ul>
<li v-for="i in characters">
{{i}}
</li>
</ul>


<ul>
<li v-for="(user,index) in users">
{{index+1}}.{{user.name}} - {{user.age}}
</li>
</ul>


data:{
characters:["frank","lucy"],
users:[
{name:"frank",age:20},
{name:"lucy",age:18}
]
},

template,渲染多个元素


12.vue实战demo
例子：实现点击按钮进度条变短，进度条为0的时候图片变换，点另一个按钮重新开始
用到：v-on:click 点击，v-bind绑定class/style ，v-show展示
<div id="vue-app">
<!--图片  -->
<div id="bag" v-bind:class="{burst:ended}"></div>

<!-- 进度情况 -->
<div id="bag-health">
<div v-bind:style="{width:health + '%'}"></div>
</div>


<!-- 控制按钮 -->
<div id="control">
<button v-on:click="punch" v-show="!ended">使劲点</button>
<button v-on:click="restart">重新开始</button>
</div>
</div>


data:{
health:100,
ended:false
},
methods:{
punch:function(){
this.health -= 10;


if(this.health<=0){
this.ended = true;
}
},
restart:function(){
this.health = 100;
this.ended = false;
}
},


13.Vue实例化多个vue对象
JS部分：
var one = new Vue({
el:"#vue-app-one",
data:{
title:"app-one的内容"
},
methods:{


},
computed:{
greet:function(){
return "holle app one";
}
}
});


var two = new Vue({
el:"#vue-app-two",
data:{
title:"app-two的内容"
},
methods:{
changeTitle:function(){
one.title="已经改名了";   //在第二个对象里改变第一个对象的数据
}
},
computed:{
greet:function(){
return "holle app two";
}
}
});
tow.title="two的title改变"  //直接在外部改变
HTML部分：能在各自的VUE对象中使用
<div id="vue-app-one">
<h2>{{title}}</h2>
<p>{{greet}}</p>
</div>


<div id="vue-app-two">
<h2>{{title}}</h2>
<p>{{greet}}</p>
<button v-on:click="changeTitle">改变one</button>
</div>


14.Vue-初识组件的应用
JS里添加方法component:
Vue.component("greeting",{
template:'<p>大家好</p>'
})  
在HTML里直接调用  <greeting></greeting>就会在页面显示P标签
Vue.component("greeting",{
template:'<p>{{name}}:大家好</p>',   //添加名字
data:function(){
return {
name:me  //直接在里面改变名字
}
}
}) 
JS:
Vue.component("greeting",{
template:'<p>{{name}}:大家好 <button v-on:click="changeName">改名</button> </p>',//在里面添加按钮，点击名字改变
data:function(){
return {
name:"me"
}
},
methods:{
changeName:function(){      //改变名字的方法
this.name = "you";
}
}
});


15.Vue搭建脚手架CLI
 1）脚手架是通过webpack搭建的开发环境
 2）使用ES6语法
 3）打包和压缩JS为一个文件
 4）项目文件在环境中编译，而不是浏览器
 5）实现页面自动刷新
步骤：(1)安装node.js   http://nodejs.org/en/
 (2)Vue网站，点击 起步->安装->名命令行工具，安装全局cli ：npm install --global vue-cli
 (3)切换目录，创建一个基于 webpack 模板的新项目：vue init webpack my-project
 安装完成打开安装的目录会有以下文件夹
 build:构建客户端和服务端，可以改变端口号
 config:对应的一些配置
 src：assets放对应的图片，components放对应的一些组件，App.vue根组件
 static:放对应的静态文件


16.组件嵌套
在http://localhost:8080中测试
把整个安装的my-project导入sublime