Vue
Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。
有一些和Vue相关的概念:
Soc:关注点分离原则
HTML + CSS + JS : 视图 : 给用户看,刷新后台给的数据
网络通信 : axios
页面跳转 : vue-router
状态管理:vuex
Vue-UI : ICE , Element UI
1、前端的核心概念
Vue概念
Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库(如: vue-router: 跳转,vue-resource: 通信,vuex:管理)或既有项目整合
前端三要素
- HTML (结构) :超文本标记语言(Hyper Text Markup Language) ,决定网页的结构和内容
- CSS (表现) :层叠样式表(Cascading Style sheets) ,设定网页的表现样式
- JavaScript (行为) :是一种弱类型脚本语言,其源代码不需经过编译,而是由浏览器解释运行,用于控制网页的行为
JavaScript框架
-
Query: 大家熟知的JavaScript框架,优点是简化了DOM操作,缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;
-
Angular: Google收购的前端框架,由一群Java程序员开发,其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念,与微软合作,采用TypeScript语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代,除了名字,基本就是两个东西;截止发表博客时已推出了Angular6)
-
React: Facebook出品,一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作,在内存中模拟DOM操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一门[JSX] 语言;
-
Vue:一款渐进式JavaScript框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;
-
Axios :前端通信框架;因为Vue 的边界很明确,就是为了处理DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;
前端三大框架:Angular、React、Vue
2、第一个Vue程序
什么是MVVM(Model View ViewModel)
MVVM 源自于经典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel层,负责转换Model中的数据对象来让数据变得更容易管理和使用,其作用如下:
- 该层向上与视图层进行双向数据绑定
- 向下与Model层通过接口请求进行数据交互
- ViewModel 能够观察到数据的变化,并对视图对应的内容进行更新
- ViewModel 能够监听到视图的变化,并能够通知数据发生改变
至此,我们就明白了,Vue.js 就是一个MVVM的实现者,他的核心就是实现了DOM监听与数据绑定
Hello Vue
- 在Idea中下载Vue插件,然后重启
- 新建一个html,导入vue的CDN
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
- 编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{
{haha}}
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
haha: "hello vue"
}
});
</script>
</body>
</html>
- 测试
- 我们在控制台中修改,不需要刷新,页面就可以更新
这,就是MVVM的思想(我们只是体会到了数据变了,视图变;视图变了,数据变还要在后面)
3、Vue语法
判断
if判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--if - else 判断-->
<h1 v-if="ele">OK</h1>
<h1 v-else>No</h1>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
ele: true
}
});
</script>
</body>
</html>
if-else判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-if="ele==='A'">A</h1>
<h1 v-else-if="ele==='B'">B</h1>
<h1 v-else-if="ele==='C'">C</h1>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
ele: "A"
}
});
</script>
</body>
</html>
循环
for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody v-for="item in list">
<tr>
<td>{
{item.name}}</td>
<td>{
{item.age}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
list: [
{
"name":"faro_z","age":21},
{
"name":"DIO","age":17},
{
"name":"JOJO","age":11},
{
"name":"KKK","age":30}
]
}
});
</script>
</body>
</html>
4、属性绑定 v-bind
可以简写为:
属性绑定,就是为标签里获得的属性起个别名,然后可以在Vue.component
里
- 通过
props[]
来获取这个自定义属性
- 或者让标签里的属性来使用Vue里的值