⑴ Vue基础篇
内容简介：
1）Vue指令
2）computed和watch
3）生命周期钩子
4）组件间的传参
5）插槽
6）修饰符
7）nextTick()
前端三大框架：
Vue：尤雨溪开发
React：Facebook主导开发
Angular：谷歌主导开发
为什么选择Vue?
1.国内Vue的市场份额占比多
2.简单易上手，非常适合前端开发初学者学习
前置知识：
1.HTML、CSS和JS基础
2.了解Node和npm
3.webpack（可选，vue-cli已经封装了打包功能）
使用Vue的两种方式：
1.直接script标签引入vue.js文件
2.基于Node环境创建Vue项目（使用vue-cli初始化一个Vue项目）
前端框架与库的区别
• jquery 库 -> DOM(操作DOM) + 动画+ ajax请求
• 框架 -> 全方位功能
一、指令
指令（Directives）是带有 v- 前缀的特殊属性。
插值表达式和v-text指令被直接解析为字符串；元素绑定 v-html 指令后，解析了msg 变量值里面的html标签，输出真正的html元素。
v-model也可用在自定义组件上。
5.v-for（列表渲染）
使用v-for时应绑定key属性，key属性可以用来提升v-for渲染的效率
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
由于 JavaScript 的限制，Vue 不能检测数组、对象的以下变化：1. 利用索引直接设置数组的某一项 2. 对象属性的添加或删除
二、computed和watch
三、生命周期钩子
什么是Vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。
总共分为8个阶段：创建前/后，挂载前/后，更新前/后，销毁前/后。
1）beforeCreate
此时实例上只有一些生命周期函数和默认的事件，此时data computed watch methods上的方法和数据均不能访问。
2）created
此时可以读取data的值，并可以对其进行操作，把方法、计算属性也都挂载到了实例。但是依旧不能访问el，不能获取到DOM元素。
在这个钩子函数中，我们可以进行http请求，把请求到的数据储存在data中。
3）模板编译，把data里面的数据和vue语法写的模板编译成HTML
4）beforeMount
将编译完成的HTML挂载到对应虚拟DOM，此时还未挂载到页面上
5）mounted
编译好的HTML已挂载到页面上
6）beforeUpdate和updated
数据更新时调用，通常使用计算属性或侦听器取而代之
7）beforeDestroy
销毁所有观察者、组件及事件监听
8）destroyed
组件已经完全销毁，组件中的数据、方法、计算属性、过滤器等都已不可用。
四、组件间的通信
1.父子组件间的通信
父子组件通信可以总结为props向下传递，事件向上传递。
单向数据流：父级 prop 的更新会向下流动到子组件中，但反过来不行。
每个Vue实例都实现了事件接口：子组件使用 this.$emit(eventName,optionalPayload) 触发自定义事件。父组件在使用子组件的地方直接用v-on来监听子组件触发的事件。
父组件通过ref直接调用子组件中的方法。
子组件调用父组件中的方法：
1）子组件中通过 this.$parent.fatherMethod() 来调用父组件的方法
2）子组件用$emit向父组件触发一个事件，父组件监听这个事件
3）父组件通过props把方法传入子组件中（type: Function），在子组件里直接调用这个方法
2.兄弟组件间的通信
其中一种方法是让父组件充当两个子组件之间的中间件（中继）；
另一种就是使用EventBus（事件总线），它允许两个组件之间直接通信，而不需要涉及父组件：
Vue原型上的方法：
五、插槽
3）作用域插槽
使用场景：
在使用ElementUI组件库的el-table组件时，表格的编辑和删除操作要用到作用域插槽。因为el-table组件，就是当前组件的子组件。通过作用域插槽很容易拿到当前表格行的索引和内容，这样就可以很方便地进行编辑、删除的操作。v-slot指令是Vue2.6之后，作用域插槽的新语法，旧语法（slot-scope）现在还保留，但3.0之后会移除。
六、修饰符
2.事件修饰符
vue提倡的是在方法中只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，所以提供了事件修饰符用于DOM的事件处理。
3.按键修饰符
七、nextTick()
定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。（当数据更新了，在dom中渲染后，自动执行nextTick的回调）
应用场景：需要在视图更新之后，基于新的视图进行操作。
⑵ Vue基础知识
数据双向绑定，组件化，单文件组件
全局api： vue.extend 、 vue.set
实例选项: new Vue() 、 el 、 data 、 compents 都是vue实例选项
实例属性和方法： vm.$on 、 vm.$data 、 vm.$destroy() 在$都是vue的实例和方法
指令： directive
内置组件： <components></compontents> 、 <keep-alive></keep-alive> 、 <router-view></router-view>
数组中不可用的方法：slice，concat；
直接修改数组list[i] = 值，不可以这样直接修改；
Vue.set(数组，索引，{值}) vue的全局方法set来更改数组的某一项的值
标签属性和条件渲染
标签属性： v-bind：href='link"; 等效于 :href="link" 动态绑定；
条件渲染： v-if 、 v-else 、 v-show ；
数据绑定： {{...}} 、 v-html (原始-HTML)、 v-text ；
事件绑定-内置事件绑定，自定义事件绑定
v-on:click="run" 等效于 @:click="run" 事件绑定；
自定义事件绑定： 父组件自定义事件
<my-compented @my-event='toggle'></my-compented>
子组件触发 my-event 自定义事件； this.$emit('my-event', opation)；
父组件执行toggle 函数；
计算属性和数据监听
computed选项 -计算属性：根据我们调用属性来跟新，调用的属性没有变更，我们computed选项里面的方法读取的是缓存；
页面内容响应数据v-once
如果你需要页面内容响应数据的变化，就不加v-once。
如果你需要页面内容渲染后，不随数据的变化而变化，就加上这个。
对于一些固定不变的组件，在调用时我们可以加上v-once，只在第一次渲染执行，保存数据在内存中，后面再调用直接从内容中提取，提高执行效率。
应用
组件的通信
<p:is = "动态的组件名"></p> 等同于 <动态的组件名></动态的组件名> 动态绑定组件
注：Vue有个单项数据流的概念：即父组件传递给子组件的参数，子组件不能直接修改；防止引用类型参数被修改后，如果父组件中其他地方也使用了此参数会受到影响。
子组件 props 接受的两种形式：
数组： ['first-name','two-name'] ，从父组件传递两个属性值；
动态展现： {{firstName}}
对象：
slot：插槽
父组件插件里面定义的内容放到子组件 slot 中：
子组件
vue高级功能--过渡和动画
自定义指令：
使用 vue-cli的优势：
成熟的vue项目架构设计；
本地测试服务器；
集成打包上线方案 webpack
npm install vue-cli -g ：全局安装vue-cli
vue init webpack my-project ：初始化项目
npm install 安装项目依赖
npm run dev ：在localhost启动测试服务器；
npm run bulid ：生成上线目录（部署）
a、安装 vue-router
b、配置路由
6、关闭eslint
dev模式下，默认会做eslint检测，若要关闭，打开 config/index.js ，设置 useEslint: false ，${}占位符，多行字符串
7、生命周期
8、支持es6
es6中很多新特性很好用class、promise、then、catch、...（数组转换符号）、函数设置参数默认值等
a、安装babel-polyfill
b、在入口main.js文件当中引入:
c、找到build文件夹下的webpack.base.conf.js
文章参考： 慕课网-欧米雪儿lyy
⑶ vue怎么学习（网营作业）
Vue基础部分
第一章：内部指令
1.v-if v-else v-show
2.v-for指令 ：解决模板循环问题
3.v-text & v-html
4.v-on：绑定事件监听器
5.v-model指令
6.v-bind 指令
7.v-pre & v-cloak & v-once
第二章：全局API
1.Vue.directive 自定义指令
2.Vue.extend构造器的延伸
3.Vue.set全局操作
4.Vue的生命周期（钩子函数）
5.Template 制作模版
6.Component 初识组件
7.Component 组件props 属性设置
8.Component 父子组件关系
第三章：选项
1.propsData Option 全局扩展的数据传递
2.computed Option 计算选项
3.Methods Option 方法选项
4.Watch 选项 监控数据
5.Mixins 混入选项操作
6.Extends Option 扩展选项
第四章：实例和内置组件
1.实例入门-实例属性
2.实例方法
3.实例事件
4.内置组件 -slot讲解
Vue全家桶部分
第五章：Vue-cli
1.Vue-cli安装和初始化
2.Vue-cli项目结构讲解
3.解读Vue-cli的模板
第六章：Vue-router
1.Vue-router入门
2.vue-router配置子路由
3.vue-router如何参数传递
4.单页面多路由区域操作
5.vue-router 利用url传递参数
6.vue-router 的重定向-redirect
7.alias别名的使用
8.路由的过渡动画
9.mode的设置和404页面的处理
10.路由中的钩子
11.编程式导航
第七章：Vuex
1.初出茅庐 来个小Demo
2.state访问状态对象
3.Mutations修改状态
4.getters计算过滤操作
5.actions异步修改状态
6.mole模块组
⑷ 想学vue.js框架，需要具备哪些知识基础
需要：
js 和 html 的基础.(就是最基本的js,ES6,ES5语法,还有html)
如果这些基础很扎实的话，学起来会很轻松的，加油吧
⑸ 【Vue】vue基础知识一（本地数据操作）
javaScript 框架
简化Dom的操作
响应式数据驱动
简单的vue程序：
1.导入开发版本的vue.is
2.创建vue实例对象，设置el属性和data属性
3.使用简介的模版语法把数据渲染到页面上
vue实例可以使用双标签挂载，不能使用HTML和BODy来进行
v-text . 设置标签的文本值 (覆盖标签中全部的内容 {{}} el只会替换相应的值)
v-html (1.内容中有html结构会被解析成标签 2.设置元素的innerHTML)
注：解析文本使用 v-text . 解析hml使用v-html
v-on(1.为元素绑定事件，2.事件名不需要写on,3.指令可以简写@ 4.绑定的方法定义在methods属性中5.方法内部可以通过this关键字访问定义data中的数据)
计数器（创建实例v-on事件和方法绑定，实时更改数据）
v-show(1.根据元素的真假切换元素的显示状态 2.原理是修改元素的display实现元素的隐藏)
v-if(1.根据表达式的真假切换元素的显示状态 2.本质是操作dom 3.表达式的值是true时，元素存在于dom树中，为否是从dom树中移除)
注：v-show和v-if的区别：
v-show：只是改变了display属性的操作
v-if：改变的是dom数
实际情况 频繁切换的使用v-show
v-bind (1.为元素绑定属性 2.完整写法v-bind:属性名 3.简写的话可以只写:属性名)
图片切换（1.用数组来存放元素 2.用v-on来绑定事件 3.用v-bing来修改元素的属性）
v-for(1.根据数据生成列表 2.v-for长和)
v-on (补充)（1.时间绑定的方法写成函数调用的形式，可以传入自定义参数
2.定义方法时定义形参数来接受传入的实参
3.通过.修饰符可以对事件进行限制）
例如：@keyup.enter
v-model(1.便捷的设置和获取表单元素的值
2.绑定的数据会和表单元素值相关联
3. 表单的 数据=绑定的数据)
记事本实战演练(1.增加 2.删除 3.隐藏 4.清空 )
注：shift()函数删除的是数组中的第一个元素 使用splice删除指定的某个元素