vue是什么
官网地址： https://cn.vuejs.org/
官方解释：渐进式javascript框架
区别前端技术叫法：
- 库
- 提供了可调用的API，自己组织功能代码，调用API实现功能。例如：jquery zepto
- 插件
- 基于js或者基于jquery来实现某一个特定专项的功能。例如：jquery.color.js
- ui框架
- 关注于用户界面功能，有一套自己的样式风格，提供了很多网站开发常用的功能控件（下拉框，对话框，分页...）。例如：bootstrap，layer，layui，easyui... 基于jquery的。
- js框架
- js框架约定好了开发的套路，使用框架提供的规则来进行开发。例如：vue react angular
总结：vue是一个js框架，提供了一套开发规则，按照这个开发规则可提高开发效率。
补充：渐进式意思是，vue.js本身功能局限，一旦配合其他的工具可以增加其能力。
- vue-router
- vuex
- axios
- nuxt
vue做什么
区分下项目类型：
-
传统类型项目
- 前后端在一个项目中，然后网站场景的切换通过页面跳转来实现。
- 例如：阿里百秀 大事件
-
SPA类型的项目（前后端分离）
- single page application 单页面应用程序
- 大白话：把一个网站的所有功能在一个页面中实现，没有真正的页面跳转。
- 例如：
- https://music.163.com/ 网易云音乐
- http://zhoushugang.gitee.io/hm-toutiao-pc-93/ 黑马头条
- 这种类型的项目业务复杂度非常高，所以会使用js框架来实现。
总结：vue适用于开发SPA类型的系统。
vue的核心
- 数据驱动视图（页面）
以前：根据数据和模板解析成html格式的代码，自己手动的渲染到对应的位置。需要大量的操作dom。
现在：你只需要修改绑定的数据（页面上依赖数据），就能对应的更新视图（页面），极大的解放了操作dom的工作，提供开发效率。
- MVVM模式
- M 数据模型 model
- V 视图（页面）view
- VM 数据模型和视图的控制器 viewmodel
- 数据双向绑定
- 组件化开发
- 把页面按照界面功能（导航，侧边栏，下拉框）拆分业务，每一个组件时一个独立的功能，提高代码可维护性，和复用度。
总结：vue的核心功能，数据驱动视图，双向数据绑定（MVVM）,组件化开发。
vue的安装
通过script引入
- 本地下载
- https://cn.vuejs.org/js/vue.js 下载地址
- 放在本地项目，script引入即可
- cdn的方式
通过npm安装
- 下载
npm i vue - 导入
const Vue = require('vue')import Vue from 'vue' - 注意 前端开发，在浏览器运行不行。
- 需要借助一些工具才能支持 以上写法。
总结：在基础学习阶段，建议大家使用本地下载引入的方式。
体验vue
例子代码：
01-vue体验
{{msg}}
和mvvm联系起来
★选项-el
作用：为实例化好的vm对象（vue实例）指定它管理的容器（标签）视图。
如何指定(el可以写什么)：
- 选择器
#app - dom对象
document.getElementById('app')
Document
{{msg}}
{{msg}}
注意：el不能使用body和html标签作为视图容器
总结：el指定vue实例管理哪个容器（视图）
★选项-data
作用：在模板（视图）中需要使用的数据必须在data当中声明，任何格式数据都可以。
特点：data中显性声明的数据都是响应式数据（当数据发生变化的时候，使用数据的视图也自动更新）
演示数据驱动视图，就需要去改数据
-
const vm = new Vue()在全局变量中 vm 对象就是vue的实例 - 通过vue的实例，可以去访问数据，可以去修改数据
- 通过
vm.$data可访问当选项data传入给Vue构造函数的数据，传入的data挂载到$data. - 使用
vm.$data.msg = '10086'修改msg数据，数据驱动视图的更新。 - 但是每次
vm.$data才能访问到数据和修改数据，略显的麻烦。 - vue把
vm.$data上的每一项数据代理在vm对象上（vue实例上），所以直接通过vm即可访问- 在实例化的对象中有this就是vm就是vue实例，在对象内部访问数据直接使用this即可。
- 所以 修改数据
vm.msg = 10010即可
注意：如果想声明成响应式数据，一定要是显性的声明。
data: {
msg: '123'
user: {
// 没有声明任何字段
// 但是将来 vm.user = {name:'tom'}
// name字段就不是显性声明
}
}
Document
{{msg}}
{{user.name}}
总结：
- data中声明的数据是响应式数据
- 如果模板中使用的字段，建议在data中提前声明（显示声明）
- 在模板中如果使用
{{字段名称}}即可输出字段对应的数据
★选项-methods
作用：在vue程序中，vue实例中，需要使用的函数统一在methods进行定义。
大白话：你需要的业务函数都写在methods选项中，类型是对象可以写很多函数。
使用：
- 在模板中可以使用定的函数
- 在vue实例中也可以使用函数
{{say2()}}
{{say3()}}
{{say4()}}
总结：
- mehtods选项声明函数，建议使用属性简写方式
say(){} - 函数中的this就是vm实例（vue实例）
- 通过vm使用，通过this使用，在模块中省去this直接使用，会输出return的结果。
术语-插值表达式
作用：在模板中输入内容，把数据对应的值插入到模板当中（视图中）
语法：在被vue管理的视图中 {{ 任何js表达式 }}
可以使用任何js表达式
- 运算
1 + 1 - 三元表达式
10 > 100 ? '1':'2' - 访问数据
msg - 访问函数
say() - ....
但是不能使用js语句
-
if else分支语句 -
for()循环语句 -
var a = 10声明变量
{{count>=10?'十位数':'个位数'}}
{{count}}
{{say()}}
总结：
- 在模板中的
{{}}就是插值表单式 - 里面可以写任意js表达式，输出期结果到模板中
- 模板：el指定的容器，理解成是模板。
术语-指令
什么是指令：在标签上以 v- 开头的属性，在vue中称之为指令。例如：v-model
作用：vue通过指令的方式可以去扩展 标签 的功能。
- 比如：v-model 指令给表单元素扩展双向数据绑定功能
- 还可以扩展其他功能：
- 通过数据控制标签的内容
- 通过数据控制标签的属性值
- 通过数据去控制标签的显示和隐藏
- 条件渲染
- 扩展标签的遍历功能
- ...
- vue提供了很多指令来实现这些功能。
总结：指令就是vue提供的v-开头的属性，用了扩展标签的原有功能的。
指令-v-text和v-html
作用：可以通过数据去控制标签的内容
两个指令可以实现：
-
v-text- 在使用该指令的标签中更新替换所有标签的内容，格式是文本
- innerText 作用相似
-
v-html- 在使用该指令的标签中更新替换所有标签的内容，格式是HTML
- innerHTML 作用相似
区别下插值表达式
- 指令会完全更新标签中的所有内容
- 但是插值表达式可以，局部替换对应的内容
案例代码：
总结：
- v-text 更新替换标签的文本内容
- v-html 更新替换标签的html内容
指令-v-show和v-if
作用：控制标签的显示和隐藏(表象)
这个两个指令的区别：
v-show 是通过控制样式
display:none来实现 (频繁切换的时候建议使用)v-if 是通过 创建 和 移除 标签来实现，消耗性能多一些。
案例代码：
总结：
- v-show 在频繁切换元素显示隐藏
- v-if 在一次渲染，次数不多的情况下，切换元素的显示隐藏。
指令-v-on
作用：v-on在基于vue的程序中绑定事件
语法： 简写 @
代码：
补充：绑定函数的时候加不加（）这个问题
- 如果函数不需要自己传参，加不加都一样。
- 如果需要自己绑定事件的时候传入参数，必须加括号。
- 特殊情况需要事件对象，可以加可以不加，写法不同而已。
fn () {
console.log('fn函数执行了')
},
fn2 (age) {
console.log(`小明今年${age}岁了`)
},
fn3 (e) {
// 绑定函数的时候如果不带括号，函数会有一个默认的参数，就是事件对象
// e 事件对象
console.log(e)
},
fn4 (e) {
console.log(e)
},
总结：
- 如果绑定事件
@事件名称="函数|js表达式" - 函数带不带括号，分情况而论。
指令-v-bind
作用：动态的去绑定属性的值，说白了--->通过数据去改变属性的值。
语法： 简写 :
注意：有些属性的值不是简单的字符串，class style 属性以后单独讲解。
代码：
总结：
- v-bind动态绑定属性的值，可以简写
:
指令-v-for
作用：通过数据动态遍历标签
语法：
- 遍历4次 i是从1开始序号
- 数组类型 list = [{},{},...]
- item就是每次遍历的选项数据
- item就是每次遍历的选项数据，i就是索引
- 对象类型 obj = {a:1,b:2}
- v属性值，k属性名，i索引
规范：
- 在v-for指令使用的时候，需要带上一个属性 key 且指定唯一的标识
- 目的：给遍历的每一个元素加上唯一标识，提高操作的性能。
- 语法：
v-for="" :key="唯一标识"建议使用ID，不得已情况下才会使用索引。
代码：
名字：{{item.name}}
名字：{{item.name}} 索引{{i}}
值：{{v}} 键：{{k}} 索引：{{i}}
总结：
- 今后的使用 'v-for' 配合 ‘：key’ 来进行遍历 。
- v-for不能和v-if同时使用。