vue介绍---Vue.js
Vue.js 是什么
是一套用于构建用户界面的 渐进式 框架.
Vue 被设计为可以 自底向上 逐层应用
Vue 的核心库只关注视图层
便于与第三方库或既有项目整合
单页面应用 --- 只有一个页面 --- （局部刷新）
组件化的开发 ----- 模块化的开发
（组件化的开发 带 结构，模块化开发 只 逻辑）
如何使用vue
- 使用 cdn 服务器上的 vue连接 （cdn） - 初学者极力推荐
拓展： 内容分发网络，构建在现有网络基础之上的智能虚拟网络，
依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。 ------ 你需要jquery，你把jquery上传到自己的服务器请求，和使用 cdn 服务器上请求， cdn请求的优势 --- 减少了自己服务器的http请求数（性能优化），cdn服务器响应速度快 ----- 使用script的src属性直接链接即可 ------------------ 是什么，怎么样，怎么做，你是怎么做的 ---- 经验
// 开发环境下的cdn链接 ----- 开发阶段
// 开发环境版本，包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
// 生产环境下的cdn链接 ----- 项目上线运维维护
// 生产环境版本，优化了尺寸和速度 - 没有所谓的console
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
拓展： 环境： 开发环境 + 测试环境 + 生产环境
拓展： 接口： 开发接口 + 测试接口 + 生产接口
拓展： 有的公司环境以及接口是不分的
- 使用npm模块安装（临时安装）
cnpm / npm i vue
复制vue.js 以及vue.min.js至项目中
- 命令行工具 ---- 脚手架 ---- express --- 后续介绍
体验vue
<body>
<div id="app">
<h1>{{ msg }}</h1>
<ul>
<li v-for="item of list">{{ item }}</li>
</ul>
<ul>
<li v-for="item of cartlist">
{{ item.name }} - {{ item.price }} - {{ item.num }}
</li>
</ul>
总数： {{ totalNum }}
总价 {{ totalPrice }}
</div>
</body>
<script>
// 便捷 --- 无DOM操作
new Vue({
el: '#app',
data: {
msg: 'hello vue',
list: ['a', 'b', 'c', 'd'],
cartlist: [
{
name: '苹果手机',
num: 10,
price: 6000
},
{
name: '华为手机',
num: 5,
price: 4000
}
]
},
computed: {
totalNum () {
let num = 0
this.cartlist.map(item => {
num += item.num
})
return num
},
totalPrice () {
// 复习 数组的相关操作的方法
return this.cartlist.reduce((sum, item) => {
return sum + item.price * item.num
}, 0)
}
}
})
</script>
熟悉MVX
MVC / MVP / MVVM
- MVC
model view Controller
模型 视图 控制器
模型：用户 - 用户id 用户名 联系方式 .....
视图：用户的展示形式
控制器：把数据从数据库中提取出来，供给视图
是一种业务逻辑、数据、界面展示分离的方法的组织代码，将业务会聚集到一个部件里面，在改进和个性化定制界面及交互的同时，不需要重新编写业务逻辑
express - 数据库集合（model） + 路由（controller）+ ejs (view)
优点： 耦合性低，重用性高，生命周期成本低，部署快，可维护性高，有利于软件工程化管理
弊端：由于模型model和视图view要严格的分离，给前端程序带来了很大的困难，每次操作需要彻底的测试 ---- 方向多，问题不好找 - angualrjs --- 1系列版本 ---- 2系列以后叫angular
- MVP ---- 设想中的一种模式
model view presenter
MVP其实就是MVC架构的一种演变。交互都发生在发布层，view跟model没有关系
各部分之间的通信 都是双向的
View 是非常薄的，不部署任何的业务逻辑，---- 被动视图
presenter 非常厚，所有的业务逻辑都在此
- MVVM
model view viewmodel
是一种基于MVC的设计，在HTML标签上通过一些指令绑定，就能在Model 和 viewmodel保持不变的情况下，方便UI设计与业务逻辑分离，大大减少了DOM操作
model 整个应用所需要的数据模型，含有大量的信息，但并不具备任何的行为逻辑，它只是数据，不会影响浏览器的展示数据
- 用户信息的model （姓名、年龄等属性）
view 是具有主动性的，包含了 数据的绑定、事件、行为。会影响到
model和viewmodel，负责自身的展示行为，并且还要把自身的改变同步到viewmodel。
viewmodel 看成是view之后的好帮手，他把view需要的数据暴露给他，并且赋予view一定的行为能力
---- 中介
vue数据双向绑定的原理
模板语法
插值
文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<body>
{{ msg }}
<div id="app">
{{ msg }} - {{ num }} - {{ flag }} - {{ obj.b }} - {{ arr[1] }}
</div>
</body>
<script>
// new Vue 实例 ---- vue的语法，包含很多的选项
new Vue({
el: '#app', // DOM节点，表明哪一段HTML标签内要使用Vue语法 - element
data: { // 当前vue实例中需要使用到的初始化的数据
msg: 'hello vue',
num: 100,
flag: true,
obj: {
a: 1,
b: 2
},
arr: ['a', 'b', 'c']
}
})
</script>
纯HTML - 原生HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令， ---- 解析 输出
v-text : 转义输出 --- 类似于 {{}}
<body>
<div id="app">
{{ detail }}
<div v-html = "detail"></div>
<div v-text = "detail"></div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
detail: '<div style="color:red;">这里就是产品的详情数据</div>'
}
})
</script>
表达式
<body>
<div id="app">
{{ 1 + 1 }} - {{ a + 7 }} - {{ flag ? '真': '假' }} - {{ msg.split('').reverse().join('') }} - {{ 1 + '12' }}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
a: 5,
flag: true,
msg: 'hello'
}
})
</script>
指令
<body>
<div id="app">
<h2>绑定属性用 v-bind 指令</h2>
<h1 v-bind:testattribute="test"></h1>
<h1 :testattribute="test"></h1>
<div :class="active"></div>
<h2>条件判断 v-if v-else v-else-if v-show</h2>
<h2>列表循环 v-for</h2>
<h2>事件绑定 v-on</h2>
<a href="https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4">vue中的指令</a>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
test: '11111111111',
active: 'active'
}
})
</script>
缩写
v-bind:attr="" ==> :attr=""
v-on:click="" ==> @click=""
绑定属性
参照指令章节案例
