vue---零基础入门学习笔记

前端三大框架：
1.Angular.js，由google研发团队最先写出；
2.React.js，由facebook团队继Angular.js之后写出；
3.Vue.js，由中国前端开发工程师尤雨溪写出。

vue.js介绍

vue是一种渐进式JavaScript框架，所谓渐进式就是你需要用什么，就引入相应的插件，由浅入深。在前端开发时，需要什么，引入什么。

声明式渲染：在页面new一个vue实例，在data里声明变量，在模板里使用变量。
组件系统：需要组件系统时，定义一个component。
客户端路由：引入vue-router进行路由管理。
大规模状态管理：引入vuex，便于页面之间、不同组件之间共享状态，如用户信息。
构建工具：vue使用的是webpack，进行版本号管理、打包压缩、ES6解码、sass/less等的编译。

Vue是一个基于MVVM模式数据驱动页面的框架，它将数据绑定在视图上。属于实现单页面应用的技术。

vue优点：
(1)简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
(2) 数据驱动： 自动追踪依赖的模板表达式和计算属性。
(3)组件化： 用解耦、可复用的组件来构造界面。
(4) 轻量： ~24kb min+gzip，无依赖。
(5)快速： 精确有效的异步批量 DOM 更新。
(6)模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。

vue缺点：
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器

vue安装及使用说明

1.安装node：端开发框架和环境都需要node.js，vue的运行是要依赖于node的npm的管理工具来实现。（https://nodejs.org/en/） npm（Node Package Manager）是node的包管理工具，默认安装完node之后，npm会自动安装上。
查看安装版本【node –v 】、【npm -v】
2.安装vue:【npm install vue】
3.使用vue：
方式一：引入CDN
方式二：使用vue-cli脚手架
安装vue-cli【npm install –g vue-cli】、创建项目【 vue init webpack my-project 】

声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 Vue将数据和 DOM 建立了关联，所有东西都是响应式的

方式一：引入CDN

new一个vue对象时，可以设置其属性，包括：
el—element需要获取的元素，一定是html中的根容器元素
data:用于数据的存储
methods:用于存储各种方法
watch:设置对象的监听方法

方式二：使用vue-cli脚手架

命名规则

命名规则：camelCase（小驼峰）、PascalCase（大驼峰）、kebab-case（烤串）

• camelCase（小驼峰）：用于命名JS函数、变量
• PascalCase（大驼峰）：命名JS类、组件文件名称 TopTitle.vue
• kebab-case（烤串）：命名html标签，组件名Vue.component(‘top-title’,{})

vue模板指令

**模板语法：**Vue.js 使用了基于 HTML 的模板语法，所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
模板指令 (Directives) :带有 v- 前缀的特殊特性
数据绑定：v-text、v-html、{{}}、v-model
控制显示：v-if、v-else、v-else-if、v-show
渲染循环：v-for
绑定事件：v-on(简写为@)
绑定属性：v-bind(简写为:bind)


模板插值

• 文本插值：{{msg}}
• 一次性插值:v-once,这会影响到该节点上的其它数据绑定
• 插入原始HTML:v-html,易导致 XSS攻击，绝不要对UGC内容提供插槽。
• JavaScript表达式：{{gender==='male?‘Boy’:‘Girl’}}

条件渲染v-if/v-show

v-if “真正”的条件渲染，在切换过程中条件块内的事件监听器和子组件会被适当地被销毁和重建。v-if是惰性的：直到条件第一次变为真时，才会开始渲染条件块,切换成本较高，不适合频繁切换的需求。
v-show:带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display(block或none)

列表循环v-for

不推荐在同一元素上使用 v-if 和 v-for,非要用，记住 v-for 的优先级高于 v-if
使用v-for的时候必须v-bind:key
key 能提高diff的效率。
vue2.0中key只有在diff过程中的双指针都失效的情况才发挥作用。

事件绑定v-on

可简写为@

属性绑定v-bind

可简写为:bind

vue数据驱动

所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。
jq是简化了dom操作，而react和vue则是通过使用虚拟dom的方式，不需要频繁的更改ui界面，而是通过更改数据的方式来更新界面。
比如说我们点击一个button，需要元素的文本进行是和否的切换。在jquery中，对于页面的修改我们一般是这样的一个流程，我们对button绑定事件，然后获取文案对应的元素dom对象，然后根据切换修改该dom对象的文案值。
Vue: 在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。


Vue通过MVVM实现数据绑定和自动同步。View层就是视图层，即DOM，ViewModel是创建的vue实例，Model是模型层，即原生js对象。
当用户发生了一个行为修改了DOM元素之后，这个修改的行为会被ViewModel监听，ViewModel监听到之后，会去修改Model的数据，最后通过ViewModel的数据拼装，改变View。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，并且Model 和 ViewModel 之间的交互是双向的。因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

vue组件化

单文件组件：

• 提供了更好的封装性；
• 优雅的模板支持 ；
• scoped CSS 支持，避免全局污染；
• 通过 vue-loader可以配合各种预处理器进行构建。

-每一个应用界面都可以看作是组件构成的。例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。每一个组件都可以看做是一个ViewModel

组件注册
（1）全局注册
使用Vue.component 创建的组件都是全局注册的，全局注册的组件可以在任何地方使用
缺点：易导致项目体积不可控。在工程最终打包中，会将所有组件都打包进去。如果后续有组件被弃用，将会造成不必要的体积增大。
（2）局部注册
在单文件组件中，我们可以局部注册一个组件供当前的组件使用，首先import组件，然后通过components 导入，然后就可以在模板中使用了。

按需载入
为了解决项目体积不可控的问题，特别是在引入一些三方组件库的时候，也许我们只使用了其中的某一些组件，但我们可能要在最终发布的时候打包所有的组件，为了解决这个问题，我们可以使用 babel-plugin-import 这个插件来实现组件的按需载入

总结

Vue是一个基于MVVM模式数据驱动页面的框架，它将数据绑定在视图上。属于实现单页面应用的技术。.总结起来的几大特点：
（1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化