vue2.0 小白入门教程 --- 第一章 vue2.0 小白入门教程-CDN
第一章 vue2.0 小白入门教程-CDN
目录
课时1： 使用git获取课程代码
网址：https://github.com/hemiahwu/vue-basic/tree/master
切换分支：
git获取到本地目录：
- 本地建立文件夹，cmd进入该文件夹
- git clone https://github.com/hemiahwu/vue-basic/tree/master
- cd 进入下载的vue-basic文件夹里，开始里面只有一个readme文件
4. 输入命令： git checkout lesson-1 可获得lesson-1里的代码
同理 git checkout lesson-2 可切换到lesson-2中的代码
课时2：vue-初识vue及进入CDN
一句话，很火，很火。。。。。。。
建立如下index.html文件和空的style.css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/vue/dist/vue.js">
</head>
<body>
</body>
</html>课时3：Vue-实例化vue对象
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
</div>
<script src="app.js"></script>
</body>
</html>app.js
/**
* Created by jingling on 2019/3/13.
*/
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
name:"米斯特吴",
job:"web开发",
}
});
/*
el:element 需要获取的元素，一定是html中的根容器元素
data:用于数据的存储
*/
课时4：Vue-数据和方法
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
<!--方法一-->
<!--<h1>{{ greet() }}</h1>-->
<!--方法二（传递参数）-->
<h1>{{ greet('afternoon')}} </h1>
<p>Name: {{ name }}</p>
<p>Job: {{ job }}</p>
</div>
<script src="app.js"></script>
</body>
</html>app.js
/**
* Created by jingling on 2019/3/13.
*/
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
name:"米斯特吴",
job:"web开发",
},
methods:{
/* 无参数定义时
greet: function(){
return 'Good Morning!';
}
*/
greet: function(time){
return 'Good '+time +" "+ this.name +'!';
}
}
});
/*
el:element 需要获取的元素，一定是html中的根容器元素
data:用于数据的存储
methods:用于存储各种方法
data-binding: 给属性绑定对应的值
*/
课时5：属性绑定
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
<!--方法一-->
<!--<h1>{{ greet() }}</h1>-->
<!--方法二（传递参数）-->
<h1>{{ greet('afternoon')}} </h1>
<p>Name: {{ name }}</p>
<p>Job: {{ 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
/**
* Created by jingling on 2019/3/13.
*/
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
name:"米斯特吴",
job:"web开发",
website:"http://www.thenewstep.com",
websiteTag:"<a href='http://www.thenewstep.com'>Thenewstep</a>"
},
methods:{
/* 无参数定义时
greet: function(){
return 'Good Morning!';
}
*/
greet: function(time){
return 'Good '+time +" "+ this.name +'!';
}
}
});
/*
el:element 需要获取的元素，一定是html中的根容器元素
data:用于数据的存储
methods:用于存储各种方法
data-binding: 给属性绑定对应的值
*/
结果
课时6：Vue-事件（点击: 双击：鼠标事件）
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app是根容器 -->
<div id="vue-app">
<h1>Events</h1>
<!-- 单击事件和双击事件（不含参数时）-->
<!--
<button v-on:click="add">涨一岁</button>
<button v-on:click="subtract">减一岁</button>
<button v-on:dblclick="add">涨一岁</button>
<button v-on:dblclick="subtract">减一岁</button>
-->
<!-- 含参数时-->
<button v-on:click="add(10)">涨10岁</button>
<button v-on:click="subtract(10)">减10岁</button>
<p>My age is {{age}}</p>
</div>
<script src="app.js"></script>
</body>
</html>app.js
/**
* Created by jingling on 2019/3/13.
*/
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
age:30
},
methods:{
/* 不含参数
add: function(){
this.age++;
},
subtract: function(){
this.age--;
}
*/
/* 含参数*/
add: function(inc){
this.age +=inc;
},
subtract: function(dec){
this.age -=dec;
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app是根容器 -->
<div id="vue-app">
<h1>Events</h1>
<!-- 单击事件和双击事件-->
<button v-on:click="add(1)">涨一岁</button>
<button v-on:click="subtract(1)">减一岁</button>
<button v-on:click="add(10)">涨10岁</button>
<button v-on:click="subtract(10)">减10岁</button>
<p>My age is {{age}}</p>
</div>
<script src="app.js"></script>
</body>
</html>/**
* Created by jingling on 2019/3/13.
*/
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
age:30
},
methods:{
add: function(inc){
this.age +=inc;
},
subtract: function(dec){
this.age -=dec;
}
}
});
鼠标事件
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://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app是根容器 -->
<div id="vue-app">
<h1>Events</h1>
<!-- 单击事件和双击事件-->
<button @click="add(1)">涨一岁</button>
<button v-on:click="subtract(1)">减一岁</button>
<button @click="add(10)">涨10岁</button>
<button v-on:click="subtract(10)">减10岁</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>app.js
/**
* Created by jingling on 2019/3/13.
*/
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
age:30,
x:0,
y:0
},
methods:{
add: function(inc){
this.age +=inc;
},
subtract: function(dec){
this.age -=dec;
},
updateXY: function(event){
//console.log(event);
this.x=event.offsetX;
this.y=event.offsetY;
}
}
});
style.css
#canvas{
width:600px;
padding:200px 20px;
text-align: center;
border: 1px solid #333;
}课时7：Vue-事件修饰符（once:prev:stop）
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://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app是根容器 -->
<div id="vue-app">
<h1>Events</h1>
<!-- 单击事件和双击事件-->
<button @click="add(1)">涨一岁</button>
<button v-on:click="subtract(1)">减一岁</button>
<button @click="add(10)">涨10岁</button>
<button v-on:click="subtract(10)">减10岁</button>
<p>My age is {{age}}</p>
<div id="canvas" v-on:mousemove="updateXY">{{x}} ,{{y}}-
<!-- 阻止事件：法一 -->
<!--
<span v-on:mousemove="stopMoving">Stop Moving</span>
-->
<!-- 阻止事件：法二 -->
<span v-on:mousemove.stop="">Stop Moving</span>
</div>
</div>
<script src="app.js"></script>
</body>
</html>app.js
/**
* Created by jingling on 2019/3/13.
*/
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
age:30,
x:0,
y:0
},
methods:{
add: function(inc){
this.age +=inc;
},
subtract: function(dec){
this.age -=dec;
},
updateXY: function(event){
//console.log(event);
this.x=event.offsetX;
this.y=event.offsetY;
},
stopMoving: function(event){
event.stopPropagation();
}
}
});
style.css
#canvas{
width:600px;
padding:200px 20px;
text-align: center;
border: 1px solid #333;
}可实现，鼠标移动到 Stop Moving 上是显示的坐标不再变化
<button @click.once="add(1)">涨一岁</button>once使得事件只有第一次可以被触发
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://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app是根容器 -->
<div id="vue-app">
<h1>Events</h1>
<!-- 单击事件和双击事件-->
<button @click.once="add(1)">涨一岁</button>
<button v-on:click="subtract(1)">减一岁</button>
<button @click="add(10)">涨10岁</button>
<button v-on:click="subtract(10)">减10岁</button>
<p>My age is {{age}}</p>
<div id="canvas" v-on:mousemove="updateXY">{{x}} ,{{y}}-
<!-- 阻止事件：法一 -->
<!--
<span v-on:mousemove="stopMoving">Stop Moving</span>
-->
<!-- 阻止事件：法二 -->
<span v-on:mousemove.stop="">Stop Moving</span>
</div>
<a v-on:click="alert()" href="http://www.thenewstep.com">The new step</a>
</div>
<script src="app.js"></script>
</body>
</html>app.js
/**
* Created by jingling on 2019/3/13.
*/
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
age:30,
x:0,
y:0
},
methods:{
add: function(inc){
this.age +=inc;
},
subtract: function(dec){
this.age -=dec;
},
updateXY: function(event){
//console.log(event);
this.x=event.offsetX;
this.y=event.offsetY;
},
stopMoving: function(event){
event.stopPropagation();
},
alert: function(){
alert("hello world！");
}
}
});
style.css
#canvas{
width:600px;
padding:200px 20px;
text-align: center;
border: 1px solid #333;
}点击 The new step 后出现弹窗，后跳转到其他页面
<a v-on:click.prevent="alert()" href="http://www.thenewstep.com">The new step</a>增加prevent修饰符后，会阻止事件跳转
课时8：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://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>键盘 Events </h1>
<label>姓名：</label>
<input type="text" v-on:keyup="logName">
<label>年龄：</label>
<input type="text" v-on:keyup="logAge">
</div>
<script src="app.js"></script>
</body>
</html>app.js
/**
* Created by jingling on 2019/3/13.
*/
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
},
methods:{
logName:function(){
console.log("你正在输入姓名！");
},
logAge: function(){
console.log("你正在输入年龄！");
}
}
});
<input type="text" v-on:keyup.enter="logName">
<label>年龄：</label>
<input type="text" v-on:keyup.enter="logAge">按下回车键出发方法
<input type="text" v-on:keyup.alt.enter="logAge">同时按下 alt+enter键出发方法
课时9： 双向数据绑定
实现：输入框中输入数据时，对应有输出
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://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>双向数据绑定/input/select/textarea </h1>
<label>姓名：</label>
<input ref="name" type="text" v-on:keyup.enter="logName">
<span>{{name}}</span>
<label>年龄：</label>
<input ref="age" type="text" v-on:keyup.alt.enter="logAge">
<span>{{age}}</span>
</div>
<script src="app.js"></script>
</body>
</html>app.js
/**
* Created by jingling on 2019/3/13.
*/
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
name:"",
age:""
},
methods:{
logName:function(){
//console.log("你正在输入姓名！");
this.name=this.$refs.name.value;
},
logAge: function(){
//console.log("你正在输入年龄！");
this.age=this.$refs.age.value;
}
}
});
结果：
课时10：Vue-计算属性Computed
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Tutorials</title>
<link href="styles.css" rel="stylesheet" />
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="vue-app">
<h1>Computed Properties</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>
</body>
<script src="app.js"></script>
</html>app.js
new Vue({
el: '#vue-app',
data: {
a: 0,
b: 0,
age: 20
},
methods: {
/*addToA: function(){
console.log('addToA');
return this.a + this.age;
},
addToB: function(){
console.log('addToB');
return this.b + this.age;
}*/
},
computed: {
addToA: function(){
console.log('addToA');
return this.a + this.age;
},
addToB: function(){
console.log('addToB');
return this.b + this.age;
}
}
});style.css
label{
display: block;
margin: 20px 0 10px
}课时11： 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://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1> 动态 CSS Class </h1>
<h2> 示例 1 </h2>
<!--
<div v-on:click="changeColor=!changeColor" v-bind:class="{changeColor:changeColor}">
<span>Herny</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>Henry</span>
</div>
<script src="app.js"></script>
</body>
</html>app.js
/**
* Created by jingling on 2019/3/13.
*/
//实例化vue对象
new Vue({
el:"#vue-app",
data:{
changeColor:false,
changeLength:false
},
methods: {
},
computed:{
compClasses: function(){
return{
changeColor:this.changeColor,
changeLength:this.changeLength,
}
}
}
});
style.css
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;
}