Vue 基础 （二）

一.Vue基础

1.模板语法

1. 插值
   a.文本{{ }} （mutache 语法糖，后面会详细讲解mutache）
   b.纯HTML
   c.表达式
2. 指令：是带有v-前缀的特殊属性

• v-bind
• v-if v-show
• v-on:click
• v-for
  3.事件绑定
• v-bind:src=>:src
• v-on:click=>@click

mutache

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语法 — 属性写法 的属性值是直接写数据的，不需要使用 {{ }} 指令： ( 是绑定在dom属性上 ) v-html: 可以解析标签型数据(
可以将一个数据展示在一个dom的内容中（ 相当于使用了 innerHTML ）) v-text：可以将一个数据展示在一个dom的内容中（
相当于使用了 innerHTML ） 条件渲染的指令

2.class与style

1. 绑定html class

• 对象语法
• 数组语法

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

参考下面这个栗子：

html代码：

    
 v-class 
    

    
 vue中类名添加第一种 
    

    

    
 vue中类名添加第二种 - 对象的形式
    

    

    

    

    

    
 vue中类名添加的第三种形式 - 数组形式（ 推荐 ）

    


    


    

    


  
  -----------------------------------------------------------------------------------
  script代码：
   new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js',
      s: 'size',
      bg_color: 'bg_color',
      flag: true
    }
  })
  var a = {
    name: 'gfly'
  }
  var b = {
    name: 'lww'
  }

3.条件渲染

1. v-if

• v-if
  可以控制一个dom的存在与否（ 创建 和 销毁 ）

2. v-else、 v-else-if
3. template v-if,包装元素template不会被创建
4. v-show

参考下面这个栗子：

html代码：

    
 v-show 
      
 v-show指令 
    

    
 v-if - 单路分支 
      
 v-if - 指令的单路分支 
    
 v-if - 双路分支 
      
  双路分支 成立  
      
 双路分支不成立 

    
 v-if - 多路分支 
    
 A 
    
 B 
    
 C 
  
  script 代码：
  var vm = new Vue({
    el: '#app',//给跟实例一个模板（ 挂载 ）
    data: { 
      showFlag: true,
      ifFlag: false,
      type: 'A'
    }
  })

v-if 与 v-show的区别

• v-if 操作的是dom元素（ 组件 ） 的创建或是销毁
• v-show 操作的是dom元素的display属性
• v-if可以有多种使用形式： 单路分支， 多路分支， 双路分支
• v-show 只能写一个单路形式
  一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
  因此，如果需要非常频繁地切换，则使用 v-show 较好；
  如果在运行时条件很少改变，则使用 v-if 较好。

4.列表渲染

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[indexOfltem]=newValue
   解决方法：
   (1) Vue.set( example1.items,indexOfltem,newValue)
   (2) splice
4. 应用：显示过滤效果

v-for

• 数组 v-for = " (item,index) in arr " item是arr中每一个元素
• 对象 v-for = "(item,key,index) in obj " item是obj的属性值
• json类型数据
• 嵌套类型数据
  举个栗子：

html代码：
 

    
 数组 
    

      

        
 item :{{ item }} --  index: {{ index }}
      
    
    

    
 对象 
    

      
 
        
 value: {{ item }} -- key: {{ key }} -- {{ index }} 
      
    
    

    
 json 
    

      

        
 id: {{ item.id }} 
        
 task: {{ item.task }} 
        
 {{ index }} 
      
    
    

    
 嵌套 
    

      

        
 id: {{ item.id }} 
        

          

            todos中的数据 -- {{ todo }}
          
        
      
    
  
  script代码：
  new Vue({
    el: '#app',
    data: {
      arr: [1,2,3,4],
      obj: {
        id: 1,
        name: '皮卡丘',
        sex: 'man',
        age: 18
      },
      json: [
        {
          id: 1,
          task: '放电'
        },
        {
          id: 2, 
          task: '卖萌'
        }
      ],
      lists: [
        {
          id: 1,
          todos: {
            id: 1,
            name: '杰尼龟'
          }
        },
        {
          id: 2,
          todos: {
            id: 2,
            name: '妙蛙种子'
          }
        }
      ]
    }
  })

5.事件处理

1. 监听事件-直接触发代码
2. 方法事件处理器-写函数名
3. 内联处理器方法-执行函数表达式
4. 事件修饰
5. 按键修饰符

提到事件，那么问题来了在javascript中事件添加有几种形式？

1. 事件绑定
   dom.onclick = function () {}
   dom: 事件源
   on: 绑定事件的形式
   click: 事件类型
   function（）{} 事件处理函数
2. 事件监听 ： addeventListener
3. 直接在标签中绑定事件

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

v-on使用
事件源
事件绑定形式
事件类型
事件处理程序
v-on:eventType = " handlerName "
简写 v-on: — > @

html代码：

     点击 
     点击 
  
  
 script代码：
 var vm = new Vue({
    el: '#app',
    methods: {
      // 存放事件处理程序
      helloHandler () {
        alert( 'hello' )
      }
    }
  })
  console.log( 'vm', vm )

那么如果我们通过length = 0,来清空一个数组，那么vue检测不到这个这个变动
解决方法： 1.使用splice
举个栗子：

html代码：
 

         + 
         - 
         修改第二条数据 
        

            

                {{ item.task }}
            
        
        

         修改第二条数据 
        

            

                {{ item }}
            
        
    
script代码：
new Vue({
        el: '#app',
        data: {
            arr: [1, 2, 3],
            lists: [{
                id: 1,
                task: '锻炼1'
            }, {
                id: 2,
                task: '敲代码'
            }]
        },
        methods: {
            add() {
               
                this.lists.push({
                    id: this.lists.length + 1,
                    task: '打篮球'
                })
            },
            remove() {
                this.lists.pop()
            },
            indexHandler() {
               
                this.lists[1] = {
                    id: 2,
                    task: 'gfly'
                }

                // 将整个列表清空
                this.lists.length = 0

                // this.lists.splice( 0 )加上之后才能检测到
            },
            arrChange() {
                this.arr[1] = 'gfly' //不可以检测到的
            }
        }
    })

解决方法：2使用 Vue.set / this.$set
将arrChange中的代码换成下面这行

 this.$set(this.arr, '1', 'gfly')

v-model
双向数据绑定
默认绑定value值
v-model应用于表单元素
举个栗子：

html代码：

    
    
 {{ msg }} 
  
script代码：
new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js'
    }
  })