Vue 基础

模板语法

(1)插值

使用script标签引入，那么会暴露一个 Vue的全局变量
Vue是一个构造器函数
我们要在模板中书写js语法，那么我们使用了一个叫做 mustache 的语法糖（ 双大括号 ）

我们将js的语法写在{{}} 里面

new Vue的到的实例，我们这边称之为 根实例

很实例也是一个组件

组件： 组件是一个具有 html  css  js等的一个聚合体


数据改变，视图就会跟着改变，这种形式我们称之为： 数据驱动视图

M  ->  VM 


问题： 
  1. 为什么script标签引入之后，就会有一个全局变量呢？

      ( function ( global ) {
          console.log( global ) //window对象
          global.Vue = function(){}
        })( this )

  2. 为什么模块化引入( npm/cnpm/yarn  )也可以呢？

        vue使用了  Module.exports / amd 
        
        ( typeof exports ==='object' ) && ( typeof module !== 'undefined' )  ?

        module.exports = factory() // Vue  :  
        typeof define === 'function' && define.amd ? define(factory) :

(global = global || self, global.Vue = factory());

看Vue.js源代码
  1. 是有匿名函数来进行封装的
    ( function () {})()

    第一个() 是匿名函数的定义

    第二个() 是匿名函数调用

    匿名函数好处：
        1. 安全性高
        2. 解决命名冲突

    ( function ( global, factory ) {
      // global 指的全局对象
      // factory  工厂函数
    })( this, function () {})
    
  2. Vue是如何即可以使用Vue全局变量，也可以模块化安装
  3. 它是利用原型来进行封装的

  4. 原型的使用

    function Fn ( options ) {
      //this   实例中 fn的到的结果   实例     var fn = new Fn()
    }

    Fn.protype.name = "Gabriel Yan "
    Fn.protype.init = function () {
      console.log( '功能' )
    }

jsx: javascript + xml
可以让我们在dom结构中输写javascript

{{ msg }}
  是   this.msg 简写

  this.$data.msg -> this.msg -> msg

mustache语法糖对数据类型的支持（ js语法的支持 ）

数据类型：
  第一种划分：
    基础数据类型： number string boolean
    复杂数据类型: Object( array  function )
    特殊数据类型: null undefined
  第二种划分：
    初始数据类型: number string boolean null undefined
    引用数据类型: object( array function )

结论： mustache支持我们js的数据类型的

conosle.log  和  alert  在我们mustache语法中是不支持的

mustache语法糖对数据类型的支持（ js语法的支持 ）

数据类型：
  第一种划分：
    基础数据类型： number string boolean
    复杂数据类型: Object( array  function )
    特殊数据类型: null undefined
  第二种划分：
    初始数据类型: number string boolean null undefined
    引用数据类型: object( array function )

结论： mustache支持我们js的数据类型的

conosle.log  和  alert  在我们mustache语法中是不支持的

mustache 绑定 dom的属性


案例： v-html
分析： 发现dom元素直接有了一个内容
      这种属性绑定就是为了操作dom

结论： 这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字
        Vue 1.0 叫它 属性指令（ 借鉴Angular来的 ）
        Vue 2.0 统称为 ‘指令’

        指令是用一个  v-xxx   表示

        指令是用来操作dom

    Vue中不允许直接操作dom

    mustache语法   ---  属性写法 的属性值是直接写数据的，不需要使用 {{ }} 

a.文本 {{}}
b.纯HTML
v-html ，防止XSS,CSRF
c.表达式

问题： 我们说vue是 MVVM 框架， 那么谁是 M 谁是 V 谁是 VM

  M： Model    数据
  V： View     视图
  VM: ViewModel  视图模型（  new Vue() ）(2)指令：是带有 v- 前缀的特殊属性

v-bind
v-if v-show
指令： ( 是绑定在dom属性上 )
v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（ 相当于使用了 innerHTML ）)
v-text：可以将一个数据展示在一个dom的内容中（ 相当于使用了 innerHTML ）
条件渲染的指令
v-show
可以控制一个dom的显示隐藏（ 这个指令操作的是dom的display属性 ）
v-if
可以控制一个dom的存在与否（ 创建 和 销毁 ）
v-else
v-else-if

面试题（ 实用题 ） 【 钻石 】
    1. v-if  vs  v-show 区别
    2. 实用： 项目中 如何选择这两个使用

      - v-if 操作的是dom元素（ 组件 ） 的创建或是销毁
      - v-show 操作的是dom元素的display属性
      - v-if可以有多种使用形式： 单路分支， 多路分支， 双路分支
      - v-show 只能写一个单路形式

      一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
      因此，如果需要非常频繁地切换，则使用 v-show 较好；
      如果在运行时条件很少改变，则使用 v-if 较好。

v-for
1. 数组 v-for = " (item,index) in arr " item是arr中每一个元素
2. 对象 v-for = "(item,key,index) in obj " item是obj的属性值
3. json类型数据
4. 嵌套类型数据

key: 
  给没一个循环的列表添加一个唯一的标识

  使用指令 v-bind 来绑定 key

  


  如果有id，那么我们就使用id，如果没有，我们才会选择index

  v-bind: 单项数据绑定： 将一个数据绑定在一个dom的属性上

  简写

  

v-on:click
v-for
(3)缩写
v-bind:src => :src
v-on:click => @click

class 与 style

(1)绑定HTML Class
样式的绑定：
v-bind: style = “”
1. 对象的形式
2. 数组的形式
vue中如何给dom添加类名
1. 直接在dom上绑定类名
2. vue中类名绑定 - 对象形式
目的： dom身上属性class 要和 数据绑定
解决：v-bind
数据中key，我们起的和绑定的对象中的key一样，但是你得知道这两个东西不一样

          

              size是自定义的属性， 它的属性值是undefined， 相当于是false
          

              size也是自定义属性，他的属性是true,那么就会加上去
          

            
      格式： v-bind:class = "{ 属性： boolean }"
      格式： v-bind:class = "{ [data]： boolean }"

  3. vue中类名绑定的形式 - 数组的形式    【 推荐 】
    格式： v-bind:class = "[ 数据 ]"

  4. 类名绑定不会覆盖原先的类名

  5. 为什么要绑定类名
      指令是用来操作dom
      目的： 为了将来通过数据来操作类名，类名操作dom-对象语法

-数组语法
(2)绑定内联样式
-对象语法

事件
问题： javascript事件添加有几种形式
1. 事件绑定
dom.onclick = function () {}
dom: 事件源
on: 绑定事件的形式
click: 事件类型
function（）{} 事件处理函数

      2. 事件监听 ： addeventListener 
      3. 直接在标签中绑定事件
          


      vue采用了第三种，也是通过属性的形式绑定在dom身上 

          
-数组语法

条件渲染

(1)v-if
(2)v-else v-else-if
(3)template v-if ,包装元素template 不会被创建
(4)v-show

列表渲染

(1)v-for (特殊 v-for=“n in 10”)
a. in
b. of
(2)key：
*跟踪每个节点的身份，从而重用和重新排序现有元素
*理想的 key 值是每项都有的且唯一的 id。
(3)数组更新检测
a. 使用以下方法操作数组，可以检测变动
push() pop() shift() unshift() splice() sort() reverse()
b. filter(), concat() 和 slice() ,map(),新数组替换旧数组
c. 不能检测以下变动的数组
vm.items[indexOfItem] = newValue
解决 (1)Vue.set(example1.items, indexOfItem, newValue)
(2)splice
(4)应用:显示过滤结果

事件处理

(1)监听事件-直接触发代码
(2)方法事件处理器-写函数名
(3)内联处理器方法-执行函数表达式
(4)事件修饰符 https://cn.vuejs.org/v2/guide/events.html
(5)按键修饰符

表单控件绑定/双向数据绑定

v-model
(1)基本用法
-购物车
(2)修饰符
.lazy :失去焦点同步一次
.number :格式化数字
.trim : 去除首尾空格