Vue基础2

知识点

1. 双大括号语法
   • this._data.msg
   • this.$data.msg
   • this.msg
   • msg
   • _ / $ / # 这三种形式都是内部私有属性的一种标识，不希望外用

模板语法

mustache语法是支持写js的

1. 用法：
   • 内容：必须加{{js语法}}
   • 属性：属性中属性值可以直接写js语法，并且属性值中的数据相当于全局变量
     • 给一个标签加一个自定义属性/已有属性

     img中的src就是已有属性
     <img src = ""/>
     
     //data-index就是自定义属性，web网页中建议我们使用data-形式来定义自定义属性
     <img data-index = "0"/>
     

     • 思考：Vue现在想要在html中使用自己的属性，并且要和它的语法和数据结合？
       • 咋整？
       • 分析：如果我能够标识出哪一个属性是具有vue标志的那就好了，属性前加v
         • Vue给这种带v标识的属性，起了一个名字：指令【借鉴angular】

       <div v-html = "msg">
       
       </div>
       ```
     

2. 研究它js的支持性
   • 数据类型
     • 市场上js的数据类型分类有两种？
       • 第一种
         • 初始数据类型：number、boolean、string、null、undefine
         • 引用数据类型：object[function array…]
       • 第二种
         • 基础数据类型：number string boolean
         • 特殊数据类型：null undefine
         • 复杂数据类型：Object[function array…]
   • 输出语法
     • console
     • alert
   • 表达式/运算符
     • 三元表达式
3. 总结
   • null和undefined是不会显示的，其他数据类型都是支持的的，可以显示的
   • 挂载在window身上的全局属性，我们都不能用的：比如：console、alert
   • {{}}不写流程控制
     • for
     • if
     • while
     • do…while
   • {{}}支持三元表达式，同样也支持运算符
     • 短路原则也是支持的

指令

指令的目的是做什么：操作DOM
解释：MVVM vm->v 数据驱动
所以：今天开始，我们不像二阶段一样操作dom，改成操作数据，数据要想操控DOM，那么我们需要依赖指令，因为指令是直接绑定在dom身上的

1. v-html：转义输出，也就是可以解析xml数据
2. v-text：非转义输出，也就是无法解析xml类型数据
3. v-bind
   • 将数据和属性进行单向数据绑定：将vue中数据赋值给属性值

      <img v-bind:src = "src"/>
      <div v-bind:class = "">
      
      </div>
      <div v-bind:style = "">
      
      </div>
     

   • 简写形式

     <img v-bind:src = "src"/>
     <img :src = "src"/>
     

   • 类名绑定
     • 用法
       对象形式用法

       <p :class = "{ bg: true,size: true }"></p>
       <p :class = "{ bg: true,size: false }"></p>
       <p :class = "{ [classA]: true,[classB]: true }"></p>
       

       数组形式用法

       <p :class = "[ 'size','bg' ]"></p>
       <p :class = "[ classA,classB ]"></p>
       <p :class = "[ classA,classB,5>3?'a':'b']"></p>
       

   • 样式绑定
     • 用法
       对象形式用法

       <p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p>
       <p :style = "styleObj"></p>
       

       数组形式用法

       <p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p>
       <p :style = "[size,bg]"></p>
       

条件渲染

1. v-if
2. v-else-if
3. v-else
4. v-show条件展示

        <h3> 条件渲染 - 单路分支 </h3>
        <p v-if="flag"> A </p>


        <h3> 条件渲染 - 双路分支 </h3>
        <p v-if="flag"> A </p>
        <p v-else> B </p>


        <h3> 条件渲染 - 多路分支 </h3>
        <p v-if="type === '美食'"> 美食 </p>
        <p v-else-if=" type === '游戏' "> 游戏 </p>
        <p v-else> 睡觉 </p>

        <h3> 条件展示 </h3>

        <p v-show=" showFlag "> 条件展示 </p>

5. 思考总结

        思考： v-if  vs  v-show  
        1. 效果看起来一样
        2. why Vue要出两个相似的指令？
            v-if控制的是元素的存在与否
            v-show控制的是元素的display:none属性

        思考？ 如果出事条件为假时？ v-if   v-show 谁的性能损耗较高？
           v-show

        总结： 项目中如何选择哪一个？
          频繁切换用  v-show
          如果不是很频繁的切换，那我们用 v-if   

列表渲染

v-for指令

        <h3> 数组 </h3>
        <ul>
            <li v-for="(item,index) in arr" :key=" index ">
                {{ item }} -- index{{ index }}
            </li>
        </ul>
        <h3> 对象 </h3>
        <ul>
            <li v-for="(item,key,index) of obj" :key="index">
                {{ item }} -- {{ key }} -- {{ index }}
            </li>
        </ul>
        <h3> json </h3>
        <ul>
            <li v-for="item in json" :key="item.id">
                <span> 商品名称： {{ item.shop_name }} </span>
                <span> 商品价格： {{ item.price }} </span>
            </li>
        </ul>

        <h3> 循环嵌套 </h3>

        <ul>
            <li v-for="item in lists" :key="item.id">
                <h3> 商品类型： {{ item.shop_name }} </h3>
                <ul>
                    <li v-for="item in item.type" :key="item.id">
                        <p> 制造商： {{ item.maker }} </p>
                    </li>
                    <!-- <li v-for = "ele in item.type" :key = "ele.id">
            <p> 制造商： {{ ele.maker }} </p> 
          </li> -->
                </ul>
            </li>
        </ul>

        <h3> 循环number / string </h3>

        <p v-for="item in 10"> {{ item }} </p>
        <p v-for="item in 'abc'"> {{ item }} </p>

总结：

• 列表渲染参数可以写三个，分别是item key index
• 列表渲染，要在渲染的元素身上加一个key，作为这个元素唯一的标识，
  • 思考：这是为什么？
  • 这个key最好是id，因为id唯一？思考：为什么不能是index
• 循环嵌套式，参数名字可以式一致的
• in/of都可以使用

事件处理器

        <button onclick = "alertHandler()"> 点击 </button>
        js中事件添加
        DOM 一级事件  on 
        1. on添加事件只写书写一次
        
         DOM 二级事件  事件监听
        1. 可以有多个
        2. 事件监听有兼容 【 现代浏览器 / IE低版本 】
          addEventListener 
          attachEvent

      事件包含部分
        事件源: box
        事件类型: click
        事件处理程序: function () {}
        box.onclick = function () {}

      事件执行形式有两种
        1. js执行
        2. html中执行

      通过上面的案例，告诉你： Vue选择了第二种作为事件添加的形式

1. v-on指令 简写可以是@

    事件： 
    事件对象： 事件对象记录了整个事件的信息
    事件参数
    形式参数: 定义函数/方法时的参数
    实际参数: 调用函数/方法时传入的参数
      
    注意： 当一个事件处理程序中有多个参数，其中一个参数是事件对象式，我们在调用这个方法时，要添加一个实际参数 $event 与之对应
    <button @click = 'fn'> 点击 </button>
    <button @click = "eventHandler"> 事件对象 </button>
    <button @click = "argumentHandler( a,b,$event )"> 事件参数 </button>

2. 事件修饰符

    <h3> 按键修饰符 </h3>
    <div class="big" @click.stop = 'bigHandler'>
      <div class="middle" @click.stop = "middleHandler">
        <div class="small" @click.stop = "smallHandler"></div>
      </div>
    </div>

    <h3> 键盘修饰符 </h3>
    <input type="text" @keyUp.13 = "getValue">
    <input type="text" @keyUp.enter = "getValue">
    
    Vue中对事件的功能的扩展
    * 修饰符 - 修饰事件
      * 按键修饰符
        - stop
        - self
        - once
        - ...
      * 键盘修饰符
    2. 自定义按键修饰符
    Vue.config.keyCodes.f1 = 112
    1. 先以一个案例的形式来讲述一下这个修饰符的好处
    - 事件冒泡
    - 回车弹出input的value