vue 的定义、指令、双向绑定的原理、vue全家桶

框架

框架：与业务无关的代码快，但是封装了很多方法方便与我们进行项目开发
框架的分类：js框架和 ui框架

js框架：里面封装了很多代码模块（功能）

ui框架：帮助我们快速的创建页面

HTML属性：就是写在开标签中，并且 属性='属性值‘ 通过属性可以扩展html标签的功能 src=“2367”

vue是什么？

vue是一套构建用户界面的渐进式的自底向上增量开发的MVVM框架
渐进式：只会对自己影响的范围内生效 ，可以很好的和第三方框架进行整合
自底向上增量开发 先完成页面的开发 然后再完成向上层级的数据操作
M 模型数据
V 视图 用户可以看的见的界面
VM 试图模型 就是用于在数据 m层 和 视图 v层中间 进行数据传递的

1. 淘宝镜像

打开cmd命令框
下载：npm install -g cnpm --registry=http://registry.npm.taobao.org
下载vue的步骤：
获取vue核心包

(1)把cmd的路径切换到你想要下载的位置

(2)初始化 npm init -y

(3)开始下载 npm install --save vue@2

2.模板语法–{{}}

将data里面的数据展示到视图层 括号里面的数据可以进行数据的运算

3.数据渲染方式

命令时渲染

我们想把数据渲染在页面上的时候 需要一步步的指挥程序的运行 数据才能插入

声明式渲染

我们只需要告诉程序 在那个位置插入什么 程序会自动把内容插入

4.指令

什么是指令

指令就是在vue 带有v-前缀的html特殊属性
在vue中 使用v- 前缀的指令 可以扩展html标签的功能
指令的语法: 写在html的开标签中 并且 v-指令=“指令值”
v-model
作用：在表单元素中进行数据的双向绑定（视图边模型边）

5.双向绑定的原理

是基于数据劫持 和 发布者订阅者模式 来实现的
数据劫持：数据拦截（是通过Object.defineProperty()这个方法对data模型数据进行劫持）因为拦截上数据之后 就可以知道数据什么时候发生了改变
发布者订阅者模式
就是一个一对多的关系 一个发布者可以对应无数个订阅者 只要发布者改变了 所有的使用数据的地方都会改变

6. v-show

控制元素的显示和隐藏 （通过css的 display: none; 方式进行元素的显示和隐藏）
语法： v-show=“布尔值” true显示 false隐藏

7.v-on

就是绑定事件
语法: v-on:事件名=“函数” 简写写法 @事件名=“函数” 事件名不加on
**注意：**函数需要写在与el data 同级的位置 使用methods来进行包裹
<span @click=“fun()”>

8.v-for

便利data数据
语法: v-for=“(v便利的值,i便利的下表) in 你要便利的数据”

• {{v}}------{{i}}
• ### 9.v-blind 改变属性后面的内容为变量 # if全家桶 1. v-if 作用 就是根据条件来渲染指定dom内容（从用户的角度和v-show效果一样） 语法： v-if="布尔值" true就是渲染 false就是不渲染 ##### 2. v-if与v-show的区别 相同点：在用户的角度 都是可以对dom元素的显示和隐藏进行设置 不同点： v-show是使用css的方式控制元素的显示和隐藏 因为隐藏的时候 使用css所以不安全 初始化消耗内存 高频切换的时候v-show省资源

  v-if 是使用dom元素的添加和删除进行删除和隐藏的 因为是移除dom 所以安全 初始化节省内存 高频切换的时候v-if消耗资源

  3. v-else

  必须配合v-if使用 不能单独使用 当if不成立的时候执行v-else
  中间不能有第三者
  语法 ： v-else

  4.v-else-if

  多重if判断

      <h1 v-if="false">吃饭</h1>
      <h1 v-else-if="false">睡觉</h1>
      <h1 v-else-if="false">在吃</h1>
      <h1 v-else-if="false">在睡</h1>
      <h1 v-else-if="false">上厕所</h1>
      <h1 v-else>什么都没有干</h1>
  

  5.v-text

  就是在dom上插入文本内容 {{}}就是和他一个作用
  就是当用户网络很慢加载的过程中可能{{}}就会出现在页面之上 然后随着内容加载完成 一瞬间内容又变成正确数据 这个过程就是屏幕闪烁

  解决方式
  1.全部使用v-text绑定数据
  2.v-cloak指令 等待内容加载完毕之后 在调用
  首先把这个属性绑定在外部的容器，在用[v-cloak]在style设置他的样式为display：none

  6.v-html

  插入字符串标签 将data的标签数据转成正常html解析的样式输出

  7.v-once

  一次插值 当第一次插值后 数据双向绑定修改的时候是不会变得