目录
安装Vue使用Vue之前先安装vue.js，有两种方式安装Vue.js。
课程简介
Vue 框架是最年轻、发展最快的框架之一。它是一种基于MVVM 设计模式，轻量级，并且具有高效数据绑定和灵活组件系统的现代化的JavaScript 框架。在本教材中，我们将循序渐进、深入浅出地为大家呈现Vue 框架的全貌。本课程以Vue 框架为核心，对Vue 的基本语法、双向数据绑定、常用指令、计算属性、侦听属性、组件创建、组件注册、组件使用、插槽以及Ant Design of Vue 框架的使用进行了讲解，带领大家进入Vue 的新前端开发之旅。
文章简介
提供课本示例部分代码以及学生实践练习部分代码，仅供参考。
第一章 初识Vue.js
1.1Vue概述
近几年，互联网前端行业发展得依旧迅猛，涌现出了很多优秀的JavaScript框架，同时这些JavaScript框架也正在逐渐改变统的前端开发方式。
在这些新出现的JavaScript框架中，最具代表性的框架有Angular.js、React.js和Vue.js。
安装Vue
使用Vue之前先安装vue.js，有两种方式安装Vue.js。
安装独立版本
<script src=“js/vue.min.js"></script>
使用CDN引入
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
1.2Vue的使用
示例1.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>欢迎页面</title>
<script src="js/vue.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> -->
</head>
<body>
<div id="app">
<fieldset>
<legend>welcom to you</legend>
<p>
<label for="txtFirstName">姓：</label>
<input type="text"id="txtFirstName"v-model="firstName" />
</p>
<p>
<label for="txtFirstName">名：</label>
<input type="text"id="txtLasttName"v-model="lastName" />
</p>
</fieldset>
<p>
欢迎您！{{firstName+lastName}}
</p>
</div>
<script>
var user={
firstName:"",
lastName:""
};
var vm=new Vue({
el:"#app",
data:user
});
</script>
</body>
</html>
1.3Vue的生命周期
示例1.3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<script>
var vm = new Vue({
// 选项参数
});
</script>
<div id="app"></div>
<script>
var vm = new Vue({
el: document.getElementById("app") // 或者是#app
});
</script>
<div id="app"></div>
<script>
var vm = new Vue({
el: "#app",
data: {
title: "",
user: {
name: "",
age: 0
}
}
});
</script>
<script>
var vm = new Vue({
el: "#app",
data: {
title: "",
user: {
name: "",
age: 0
}
},
methods: {
doSave: function() {
console.log("姓名：", this.user.name)
}
}
});
</script>
<script>
var vm = new Vue({
el: "#app",
data: {
title: "",
user: {
name: "",
age: 0
}
}
});
// 在Vue实例外部访问data中的数据
console.log(vm.user.name);
</script>
</body>
</html>
学生实践练习1.3.3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/antd.min.css" />
<style>
#app {
text-align: center;
padding: 50px;
}
.banner {
width: 600px;
height: 150px;
line-height: 150px;
text-align: center;
box-shadow: 5px 5px 10px #888888;
font-size: 48px;
font-weight: bolder;
background-color: #033592;
color: #FFF;
margin: 0px auto;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="banner">
{{adTitle}}
</div>
</div>
<script src="js/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
ads: [],
index: 0,
adTitle: ""
},
created: function() {
this.ads = [
"地球交通服务提醒您:",
"道路千万条",
"安全第一条",
"行车不规范",
"亲人两行泪"
];
this.adTitle = this.ads[0];
},
mounted: function() {
var_this = this;
this.timer = setInterval(function() {
if (_this.index < _this.ads.length - 1) {
_this.index++;
} else {
_this.index = 0;
};
_this.adTitle = _this.ads[_this.index];
}, 3000);
},
beforeDestroy: function() {
if (this.timer) {
clearInterval(this.timer);
}
}
});
</script>
</body>
</html>
1.4Vue过滤器
示例1.4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#app {
text-align: center;
padding: 50px;
}
.banner {
width: 600px;
height: 150px;
line-height: 150px;
text-align: center;
box-shadow: 5px 5px 10px #888888;
font-size: 32px;
font-weight: bolder;
background-color: #033592;
color: #FFF;
margin: 0px auto;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="banner">
{{ text | tranformFilter }}
</div>
</div>
<script src="js/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
text: "actions speak louder than words."
},
filters: {
tranformFilter: function(val) {
var strs = val.split(' ');
var result = "";
for (var i = 0; i < strs.length; i++) {
result += strs[i].charAt(0).toUpperCase() + strs[i].substring(1) + ' ';
}
return result;
}
}
});
</script>
</body>
</html>
学生实践练习1.4.2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style>
#app {
text-align: center;
padding: 50px;
}
.banner {
width: 600px;
height: 150px;
line-height: 150px;
text-align: center;
box-shadow: 5px 5px 10px #888888;
font-size: 30px;
font-weight: bolder;
background-color: #033592;
color: #FFF;
margin: 0px auto;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="banner">
当前日期时间：{{ date|formatDate }}
</div>
</div>
<script src="js/vue.min.js"></script>
<script>
var padDate = fuction(val) {
return val < 10 ? "0" + val : val;
};
var vm = new Vue({
el: "#app",
data: {
date: null
},
created: fuction() {
this.date = new Date();
},
mounted: function() {
var_this = this;
this.timer = setInterval(function() {
_this.date = new Date();
}, 1000);
},
beforeDestroy: function() {
if (this.timer) {
clearInterval(this.timer);
}
},
filters: {
formatDate: function(val) {
var currdate = new Date(val);
var year = currdate.getFullYear();
var month = padDate(currdate.getMonth() + 1);
var day = padDate(currdate.getDate());
var hours = padDate(currdate.getHours());
var minuties = padDate(currdate.getMinutes());
var seconds = padDate(currdate.getSeconds());
return year + "-" + month + "-" + day + "" + hours + ":" + minuties + ":" + seconds;
}
}
});
</script>
</body>
</html>
本章总结（THIS CHAPTER SUMMARIZES）
1.Vue是什么?
数据绑定和灵活的组件尔玩,是一套
库,是一个通过简洁的 API提供高效的
Vue是构建Web界面的 JavaScript
用于构建用户界面的渐进式框架。
2.Vue 双向数据绑定的执行过程是什么?
当创建了ViewModel后，双向数据绑定按下面的过程执行:
DOM元素的变化,如果有变化,
(1）从 View侧看， ViewModel 中的 DOM Listeners工具会帮忙监测页面.
则更改 Model中的数据。
会更新页面中的DOM元素。
(2）从 Model侧看,当用户更新Model中的数据时，Data Bindings工具
3.在 Vue 实例的生命周期中比较常用的钩子函数有哪些?
在Vue 实例的生命周期中比较常用的钩子函数如下:
(1）created()函数:实例建立完成后调用。此阶段完成了数据的观测等，
但尚未挂载,$el此时还不可用,需
要初始化处理一些数据时会比较有用。
(2）mounted()函数:el挂载到实例
上后调用。一般开发者的第一个业务逻辑会在这里开始,也可以在此处调
用AJAX来获取服务器端的数据。
(3） beforeDestroy()函数:实例被销毁之前调用。主要解绑一些使用add
IEventListener监听的事件等。
4.在 Vue中创建过滤器的方式有哪些？
创建过滤器有两种方式:
(1）全局创建过滤器:全局创建过滤器可以在整个页面中使用"
ue 千后-法filter)方法来建。
(2）局部创建过滤器:局部创建过滤器在Vue 实例的作用域中有效,通过
给Vue实例添加洗而filters来设置。
300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
