el 和data的使用
- el：element 填写需要获取的元素，一定是html中的根容器元素
- data:用于数据的存储，写入想要展示的内容
- 实例化vue对象
new Vue({
el: "#vue-app", /*根元素*/
data:{
name:"hello world"
}
});
- 在
<body></body>中使用
<!-- vue-app:根容器 -->
<div id="vue-app">
<p>{
{
name }}</p> <!--使用：`{
{ name }}`获取内容-->
</div>
<!--引入.js文件-->
<script src = "source.js"></script>
数据和方法
- methods：用于存储各种方法
1.如何在html中引用vue方法
同样，在标签总使用{ { }}，在双括号内写入想要引用的方法，例如：<p>{ { greet() }}</p>
new Vue({
el: "#vue-app",
data:{
name:"hello world"
} ,
methods:{
greet: function(time){
return 'Good ' + time + "!";
}
}
});
2.如何在方法中引用name
在方法中用this来获取
methods:{
greet: function(time){
return 'Good ' + time + " " + this.name + "!";
}
}
属性绑定
将website、websiteTag的内容在html中显示
data:{
website:"http://www.thenewstep.com",
websiteTag:"<a href = 'http://www.thenewstep.com'>Thenewstep</a>",
} ,
1.v-bind
- 用于引入只有内容的
<a v-bind:href="website">web开发</a>
2.v-html
- 用于引入带有标签的
<p v-html = "websiteTag"></p>
事件点击-双击-鼠标事件
1.单击事件
v-on:click = " 方法名"/@:click = " 方法名
methods:{
add: function(){
this.age++;
},
subtract:function(){
this.age--;
}
}
<button v-on:click = "add">涨一岁</button>
<button v-on:click = "subtract">减一岁</button>
<p>My age is {
{
age}}</p>
2.双击事件
v-on:dblclick = " 方法名"/@:dblclick = " 方法名
3.鼠标点击事件
通过鼠标点击事件获取x，y坐标数据
- 鼠标事件对象：
event
new Vue({
el: "#vue-app",
data:{
x:0,
y:0,
} ,
methods:{
updateXY:function(event){
//鼠标事件对象：event
//console.log(event); //打印event
this.x = event.offsetX; //获取x坐标数据赋给x
this.y = event.offsetY;
}
}
});
<div id = "canvas" v-on:mousemove = "updateXY">{
{
x}},{
{
y}}</div>
- 传参：为更方便减少或增加年龄，可以定义一个参数变量，在html中，
<button v-on:click = "add(5)">涨五岁</button>
methods:{
add: function(inc){
this.age += inc;
},
subtract:function(dec){
this.age -= dec;
}
}
事件修饰符once-prev-stop
1.stop
当鼠标停留在Stop Moving上时，坐标数值不在发生变化
<div id = "canvas" v-on:mousemove = "updateXY">{
{
x}},{
{
y}}-
<span v-on:mousemove.stop = "">Stop Moving</span>
</div>
- 也可使用方法来实现
StopMoving:function(event){
event.stopPropagation();
}
<span v-on:mousemove = "StopMoving">Stop Moving</span>
2.once
- 添加后表示：事件只能触发一次
- 添加后，点击“涨五岁”，只能增长一次
<button v-on:click.once = "add(5)">涨五岁</button>
3.prev
- 阻止默认事件
- 阻止网页跳转
<a v-on:click.prevent = "alert" href="http://www.thenewstep.com">website</a>
alert:function(){
alert("turn out");
}
键盘事件及键值修饰符alt-enter
1.键盘事件
- 用户每次进行键盘输入操作时，控制台都会显示：“你正在输入（正在输入的东西）”
- 创建
logName()、logAge()方法
new Vue({
el: "#vue-app",
data:{
} ,
methods:{
logName:function(){
console.log("你正在输入名字！");
},
logAge:function(){
console.log("你正在输入年龄！");
}
}
});
- 在html中触发方法
<div id="vue-app">
<h1>键盘 Events</h1>
<label type="text">姓名：</label>
<input type="text" v-on:keyup = "logName">
<label>年龄:</label>
<input type="text" v-on:keyup = "logAge">
</div>
注： 当我们不想每输入一次就触发一次方法时，可以使用enter/alt-enter
- 在输入完内容后，按下“enter”或者“enter和alt”键，才触发方法
<input type="text" v-on:keyup-enter = "logName">
双向数据绑定
获取输入的内容，并显示出来
1.ref = ""
<input ref = "name" type="text" v-on:keyup = "logName">
<span>{
{
name}}</span>
- 通过
$refs获取input中输入的内容，并传给data中的属性name
methods:{
logName:function(){
//console.log("你正在输入名字！");
this.name = this.$refs.name.value; //this.$refs.name.value:这里面的'name'，跟'ref = "name"'的一致
//console.log(this.$refs.name.value); //控制台实时获取在输入框输入的内容，并显示
},
}
2.v-model = ""
- 省略方法赋值部分，直接使用
v-model = "name"能实现相同效果 - 绑定的是
data中定义的属性
<input ref = "name" type="text" v-model = "name">
<span>{
{
name}}</span>
计算属性Computed
在需要大量的计算时会用到计算属性（优化性能），并不是所有时候都需要用到
Computed是一个计算属性，并不是方法，所以在用双括号{ {}}调用方法时不用加上()：<p>age + a = { {addToA}}</p>
<div id="vue-app">
<button v-on:click = "a++">Add to a</button>
<button v-on:click = "b++">Add to b</button>
<p>a = {
{
a}}</p>
<p>b = {
{
b}}</p>
<p>age + a = {
{
addToA}}</p>
<p>age + b = {
{
addToB}}</p>
</div>
computed:{
addToA:function(){
console.log("Add to a");
return this.a + this.age;
},
addToB:function(){
console.log("Add to b");
return this.b + this.age;
}
}
动态绑定css样式
1.一个属性作用于一个标签
<style>
span{
background: red;
display: inline-block;
padding:10px;
color: #fff;
margin: 10px 0;
}
.changeColor span{
background: green;
}
.changeLength span:after{
content: "length";
margin-left: 10px;
}
</style>
- 给标签动态添加class：
v-bind:class = "{ClassName : data中的属性名}"
new Vue({
el: "#vue-app",
data:{
isChangeColor:false,
changeLength:false,
} ,
});
isChangeColor的值为true时，可通过鼠标点击事件给动态添加ClassName，并更改css属性，原来span背景为红色，点击后为绿色
<div v-bind:class = "{changeColor:isChangeColor}" v-on:click = "isChangeColor = !isChangeColor">
<span>Hello</span>
</div>
isChangeColor的值为true时，通过<div v-bind:class = "{changeColor:isChangeColor}"> </div>，就可以动态的给div添加一个ClassName，<div class = "changeColor"></div>
2.两个属性作用于一个标签
给一个span动态的添加两个css样式
<button v-on:click = "isChangeColor = !isChangeColor">change color</button>
<button v-on:click = "isChangeLength = !isChangeLength">change length</button>
<div v-bind:class = "compClasses">
<span>Hello</span>
</div>
v-bind:class = ""内写入方法，通过return将两个classname返回给方法
computed:{
compClasses:function(){
return{
changeColor:this.isChangeColor,
changeLength:this.isChangeLength,
}
}
}
指令v-if
点击按钮，如果显示了“网络连接失败：404”，则“网络连接成功：200”不显示
<div id="vue-app">
<button v-on:click = "isError = !isError">Toggle Error</button>
<button v-on:click = "isSuccess = !isSuccess">Toggle Success</button>
<p v-if = "isError">网络连接失败：404</p>
<p v-else-if ="isSuccess">网络连接成功：200</p>
</div>
new Vue({
el: "#vue-app",
data:{
isError:false,
isSuccess:false,
} ,
});
v-show：效果跟v-if相似，未点击按钮时，p标签会被添加style = "display:none;"样式，表示标签内容被隐藏，点击后该样式会去除，但是“网络连接失败：404”和“网络连接成功：200”可以同时显示
指令v-for
实战DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue base</title>
<script src="vue.js"></script>
<style>
#bag{
width:200px;
height: 500px;
margin: 0 auto;
background: url(img/bag.png) center no-repeat;
background-size: 80%;
}
#bag.burst{
background-image: url(img/bag-burst.png);
}
#bag-health{
width:200px;
border:2px #000 solid;
margin: 0px auto 20px auto;
}
#bag-health div{
height: 20px;
background: crimson;
}
#controls{
width: 200px;
margin:0 auto;
}
#controls button{
margin-left: 20px;
}
</style>
</head>
<body>
<!-- vue-app:根容器 -->
<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="controls">
<button v-on:click = "punch" v-show = "!ended">点击</button>
<button v-on:click = "restart">重新开始</button>
</div>
</div>
<script src = "source.js"></script>
</body>
</html>
new Vue({
el: "#vue-app",
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;
}
},
computed:{
}
});
实例化多个vue对象
- 像这样，写两个
new vue(){}，改变el，在html中的引用跟只有一个实例化对象时一样
var one = new Vue({
el: "#vue-app-one",
data:{
} ,
methods:{
},
computed:{
}
});
var two = new Vue({
el: "#vue-app-two",
data:{
} ,
methods:{
},
computed:{
}
});
- 通过
one.title = "app-ones title is change!";`，可以在第二个实例化对象中对第一个做出改变
初始组件的应用
- 把共有的东西放到组件中
Vue.component("greeting",{
template: //只能有一个根标签
'<p>{
{name}}:国庆放四天假<button v-on:click = "changeName">改名</button></p>',
data:function(){
return{
name:"教育部"
}
},
methods:{
changeName:function(){
this.name = "学校";
}
}
})
new Vue({
el: "#vue-app-one",
});
new Vue({
el: "#vue-app-two",
});
<div id="vue-app-one">
<greeting>{
{
template}}</greeting>
</div>
安装路由模块
指令：npm install vue-router --save-dev