【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删除指定的某个元素
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是远远不够的，原生JS,移动端开发如果你不够熟练，是非常吃亏的。
物联网+时代，很多场景都是线上线下相互结合，导致移动端用户量激增。另一方面，以Angular,React,Vue为主的MVVM框架和NodeJS,ES6等前端新技术的出现和快速迭代，让前端得到前所未有的发展空间。
很多同学面试的过程中，被问到原生知识或底层原理，就答非所问。虽然使用Vue很久，但其中的响应式数据原理，Vue路由懒加载原理，Vue生命周期，这些理论知识却十分空白。更重要的是，面试官考察的，不仅是理论知识，还有你的编码习惯，拆分问题，解决问题的思维方式。我们要做的，就是夯实原生知识，设计模式，从前端走到后端，时刻关注前端动态，才能成为一名合格的前端开发工程师。
前文摘自以下链接的文章《学习Vue你需要你知道的前置知识》，有兴趣可以点进去看看还有很多技术干货，个人学前端觉得还挺有帮助的。
前端vue是什么？
Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js；同时比起 React + Redux 相对复杂的架构，Vue.js 更加轻量级也更加容易上手，是初创项目的首选前端框架。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
今天带领大家来了解一款渐进式JavaScript框架——Vue。
近年来，前端开发领域，旧浏览器逐渐淘汰，移动端开发需求逐年增加，前端交互越来越多，功能越来越复杂。架构从传统后台MVC向REST API + 前端MV* 迁移。
MV*相当于MVC即：
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示前端的学习都是需要不断的学习，学一天停一停相当于白学，学习效果很差，如果你想有人一起学习可以来这个扣裙，首先是132 中间是667最后是127 都是零基础的同学，大家相互鼓励 共同努力 只是学着玩就不建议来了!!!数据（数据库记录）。
Controller（控制器）处理输入（写入数据库记录）。
MVP
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示数据（数据库记录）。
Presenter（表示器）负责逻辑处理业务。
与MVC差别在于：
1、View与Model完全隔离。
2、Presenter与View的具体实现技术无关。
3、可以进行View的模拟测试。
MVVM（Vue就是一种MVVM框架）
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示数据（数据库记录）。
ViewModel（观察者）负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
优点：高内聚，低耦合（可重用性、可移植性）。
Vue是一款数据驱动+组件化的前端开发框架，对比于Angular和React，Vue.js更轻量，gzip后大小只有26K （Angular 56K,React 44K），同时更易上手，学习曲线平稳，吸收两家之长，借鉴了angular的指令和react的组件化。