Vue基础

1.Vue基础介绍

Vue.js是目前最火的一个前端框架， React是最流行的一个前端框架,React除可以开发网站还可以开发手机APP,Vue语法也是可以用于手机APP开发的,但是需要借助于Weex。
Vue.js是前端的主流框架之一，和Angular.js、React.js,是目前前端的三大主流框架！！！
Vue.js是一套构建用户页面的框架，是一套渐进式的框架，主要是面向数据为了操作数据，上手简单,但是越到后面越难，Vue有专门配套的第三方库，整合起来可以做大型项目的开发。
Vue.js是一个MVVM框架,也可以说是MVC框架，MVVM是MVC繁衍出来的变体，说是MVVM框架更准确一点，MVC之前是后端的一种是想、是后端的一个产物,主要是为了前后端的分离。

2.为什么要学习框架

• 提高开发效率,不再重复操作。

• 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑

• 提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js

3.Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别

• MVC 是后端的分层开发概念；
• MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
• - 前端里面MVC分层（分离js）:表现、数据、业务分离
• M代表的数据层，可以复用
• V代表视图表现层，展示数据、创建元素，变色，运动 可以复用
• C代表 插值表达式|指令|属性,一般不复用

4.Vue基本使用

• 安装:https://cn.vuejs.org/v2/guide/installation.html直接点击安装你想要的版本

• 引入文件: 直接下载并用script标签引入

案例:

• 基本使用：就是new出来一个Vue的实例，传一堆配置参数，控制一片html

Vue的MVVM:

• VM: 响应系统 - > vDOM做标记 ->一个循环周期结束后->操作DOM

new Vue 返回 VM
new Vue({
el:‘选择器’ 要控制的那片html代码
data:{key:value}数据
methods:{fnName:fn} 方法
})

• M: 初始化数据

   data 选项里面的类型： number/string/boolean/array/json/undefined/null
  

• V: 数据绑定 插值表达式|指令|属性
  

• 差值表达式
   在HTML页面中我们需要获取Vue中的数据，这时我们可以通过插值表达式来获取，如下

注意：插值表达式有闪缩的问题,在输出过程中会短暂出现{{duanluo}},可以通过v-cloak解决这个问题 如下

• v-text

和插值差不多，也可以从vue对象中获取信息，v-text默认是没有闪烁问题的，但是会覆盖掉原有的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空，如下

• v-html
  默认我们从Vue对象中获取的信息如果含有HTML标签的话只会当做普通字符串显示，如果我们要显示标签的语义，那么需要使用v-html指令如下

• v-bind
   v-bind是 Vue中，提供的用于绑定属性的指令,可简写为":",属性中的内容其实写的是js表达式，可以做类似的处理，见代码。

• v-on
  Vue 中提供了 v-on: 事件绑定机制,具体使用如下:
  
  
  每点击一下加一

• 最后说一下特殊情况

按需渲染是根据遍历数组来渲染数组里面的值val in arr 相当于js里面的for in
条件渲染是通过布尔值来判断是否渲染