今天学到的知识点：
实例化vue对象，数据&方法，属性的绑定
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app 是根容器 -->
<div id="vue-app">
<!--一定要加括号，不然不知道这是个方法-->
<h1>{{greet('afternoon')}}</h1>
<p>{{name}}</p>
<p>{{job}}</p>
<!--绑定值举例-->
<a v-bind:href="website">web开发</a>
<input type="text" v-bind:value="name">
<p v-html="websiteTag"></p>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
/*
* 实例化vue对象
* */
new Vue({
el:"#vue-app",
data:{
name:"Grace",
job:"web开发",
website:"http://www.baidu.com",
websiteTag:"<a href='http://www.baidu.com'>百度官网</a>"
},
methods:{
greet:function (time) {
return 'Good '+ time + ' ,' + this.name + '!';
}
}
});
/*
* el:element 我们需要获取的元素，一定是html中的根容器元素
*data: 用于数据的存储
* methods: 用于存储各种方法
* Vue属性绑定： v-bind（绑定属性）
* v-html（绑定标签）
* */
事件(单击事件，双击事件，鼠标事件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<style>
#canvas{
width: 600px;
padding: 200px 20px;
text-align: center;
border: 1px solid #333;
background-color: lightcyan;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app 是根容器 -->
<div id="vue-app">
<h1>Event</h1>
<!--鼠标单击事件-->
<!--在这个里面的方法括号是可加可不加的，因为vue是知道这是个方法的-->
<!--如果传参的话就需要加括号-->
<button @click="add(1)">涨一岁</button>
<button v-on:click="sub(1)">减一岁</button>
<!--鼠标双击事件-->
<button @dblclick="add(5)">涨五岁</button>
<button v-on:dblclick="sub(5)">减五岁</button>
<p>My age is {{age}}.</p>
<!--鼠标事件-->
<div id="canvas" v-on:mousemove="updateXY">
{{x}},{{y}}
</div>
</div>
<script src="app.js"></script>
</body>
</html>
/*
* 实例化vue对象
* */
new Vue({
el:"#vue-app",
data:{
age:19,
x:0,
y:0
},
methods:{
add:function (num) {
this.age += num;
},
sub:function (num) {
this.age -= num;
},
updateXY:function (event) {//鼠标事件event
//console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
}
}
});
事件修饰符（once:prevent:stop）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app 是根容器 -->
<div id="vue-app">
<h1>Event</h1>
<!--once表示只能点击一次-->
<button @click.once="add(1)">涨一岁</button>
<button v-on:click="sub(1)">减一岁</button>
<!--鼠标双击事件-->
<button @dblclick="add(5)">涨五岁</button>
<button v-on:dblclick="sub(5)">减五岁</button>
<p>My age is {{age}}.</p>
<!--鼠标事件-->
<div id="canvas" v-on:mousemove="updateXY">
{{x}},{{y}} -
<!--<span style="width: 30px; border: 1px solid #333" v-on:mousemove="stopMoving"> Stop Moving!</span>-->
<!--stop表示停止事件的触发-->
<span style="width: 30px; border: 1px solid #333" v-on:mousemove.stop=""> Stop Moving!</span>
</div>
<!--阻止事件的发生-->
<a v-on:click.prevent="alert()" href="http://www.baidu.com">百度官网</a>
</div>
<script src="app.js"></script>
</body>
</html>
/*
* 实例化vue对象
* */
new Vue({
el:"#vue-app",
data:{
age:19,
x:0,
y:0
},
methods:{
add:function (num) {
this.age += num;
},
sub:function (num) {
this.age -= num;
},
updateXY:function (event) {//鼠标事件event
//console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
},
stopMoving:function (event) {//阻止事件的冒泡
event.stopPropagation();
},
alert:function () {
alert("即将跳转去百度官网");
}
}
});
键盘事件及键值修饰符(alt:enter)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app 是根容器 -->
<div id="vue-app">
<h1>键盘 Events</h1>
<label>姓名:</label>
<!--触发enter回车键才会触发里面的函数-->
<input type="text" v-on:keyup.enter="logName">
<label>年龄:</label>
<!--需要alt+enter键才能触发函数-->
<input type="text" v-on:keyup.alt.enter="logAge">
</div>
<script src="app.js"></script>
</body>
</html>
/*
* 实例化vue对象
* */
new Vue({
el:"#vue-app",
data:{
},
methods:{
logName:function () {
console.log("你正在输入名字");
},
logAge:function () {
console.log("你正在输入年龄");
}
}
});
双向数据绑定
和input,select,textarea有关，一定有一个是输入，有一个是输出的地方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app 是根容器 -->
<div id="vue-app">
<h1>双向数据绑定 / input / select / textarea</h1>
<label>姓名:</label>
<!--用ref给input标签做标记-->
<!--<input ref="name" type="text" v-on:keyup.enter="logName">-->
<!--双向数据绑定提供了v-model这个指令-->
<!--
v-model的工作流程：
1.先绑定了app.js中的name属性，一绑定就会出现这个属性的值
2.其次会决定你在index.html中输出的部分
就实现了双向绑定
-->
<input ref="name" type="text" v-model="name">
<span>{{name}}</span>
<label>年龄:</label>
<!--<input ref="age" type="text" v-on:keyup.enter="logAge">-->
<input ref="age" type="text" v-model="age">
<span>{{age}}</span>
</div>
<script src="app.js"></script>
</body>
</html>
/*
* 实例化vue对象
* */
new Vue({
el:"#vue-app",
data:{
name:'',
age:''
},
methods:{
logName:function () {
//console.log("你正在输入名字");
//this.name = this.$refs.name.value;
//console.log(this.$refs.name.value);
},
logAge:function () {
//console.log("你正在输入年龄");
//this.age = this.$refs.age.value;
}
}
});
计算属性Computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app 是根容器 -->
<div id="vue-app">
<h1>Computed 计算属性</h1>
<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>
<script src="app.js"></script>
</body>
</html>
/*
* 实例化vue对象
* */
new Vue({
el:"#vue-app",
data:{
a:0,
b:0,
age:20
},
/*
* 会把methods里面的方法全部执行一遍，性能不好
* */
methods:{
/*addToA:function () {
console.log('Add to A');
return this.a + this.age;
},
addToB:function () {
console.log('Add to B');
return this.b + this.age;
}*/
},
/*当耗时或者需要大量搜索的时候才会使用这个计算属性来优化这个项目*/
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样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app 是根容器 -->
<div id="vue-app">
<h1> 动态 CSS Class </h1>
<h2>示例 1</h2>
<!--颜色来回切换-->
<!--<div v-on:click="changeColor = !changeColor" v-bind:class="{changeColor:changeColor}">
<span>Grace</span>
</div>-->
<h2>示例 2</h2>
<button v-on:click="changeColor = !changeColor">change color</button>
<button v-on:click="changeLength = !changeLength">change length</button>
<!--用到计算属性,获取两个属性-->
<div v-bind:class="compClasses">
<span>Angela</span>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
span{
background: red;
display: inline-block;
padding: 10px;
color: #fff;
margin: 10px 0;
cursor: pointer;
}
.changeColor span{
background: green;
}
.changeLength span:after{
content: "length";
margin-left: 10px;
}
/*
* 实例化vue对象
* */
new Vue({
el:"#vue-app",
data:{
changeColor:false,
changeLength:false
},
methods:{
},
computed:{
compClasses:function () {
return{
changeColor: this.changeColor,
changeLength: this.changeLength
}
}
}
});
条件语句：v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app 是根容器 -->
<div id="vue-app">
<h1> v-if 条件 </h1>
<button v-on:click="error = !error">Toggle Error</button>
<button v-on:click="success = !success">Toggle Success</button>
<!--v-if不占位，没有显示出来就是没有这行代码-->
<!--<p v-if="error">网络连接错误：404</p>
<p v-else-if="success">成功：200</p>-->
<!--v-show是会占位的，不显示的话就有display:none-->
<p v-show="error">网络连接错误：404</p>
<p v-show="success">成功：200</p>
</div>
<script src="app.js"></script>
</body>
</html>
/*
* 实例化vue对象
* */
new Vue({
el:"#vue-app",
data:{
error: false,
success: false
},
methods:{
},
computed:{
}
});
循环语句:v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app 是根容器 -->
<div id="vue-app">
<h1> v-for 循环 </h1>
<!--数组下标获取-->
<!--{{characters[0]}}
{{characters[1]}}
{{characters[2]}}-->
<!--数组遍历-->
<ul>
<li v-for="character in characters">
{{character}}
</li>
</ul>
<ul>
<li v-for="(user, index) in users">
{{index + 1}} : {{user.name}} - {{user.age}}
</li>
</ul>
<!--会对容器再创建一遍-->
<!--<div v-for="(user, index) in users">
<h3>{{index + 1}} : {{user.name}} - {{user.age}}</h3>
</div>-->
<!--这样就不会多次渲染标签-->
<template v-for="(user, index) in users">
<div v-for="(val, key) in user">
<p>{{val}} - {{key}}</p>
</div>
</template>
</div>
<script src="app.js"></script>
</body>
</html>
/*
* 实例化vue对象
* */
new Vue({
el:"#vue-app",
data:{
characters:["Mario","Angle","Grace"],
users:[
{name:"Henry",age:30},
{name:"Bucky",age:25},
{name:"Emily",age:18},
]
},
methods:{
},
computed:{
}
});
