VUE初学知识点记录

1. vue基础构成
   

HTML: 
      <div id="app" v-on:click="doClick"> {{title}} </div>  
js: 
      var vm = new Vue({
          el: '#app', //实例 ，区域元素
          data: {
               title : 'Vue标题', //存放el用到的数据
            },
          methods: {
              doClick(){
                  //事件，方法
               }
            }
        });

2.  vue符号： 
    1). 双向绑定数据： {{data}}
    2). HTML标签符号： v-text="data"， 类似于{{data}}
                   :  v-html="msg", //可以将内容当html放置解析
                   :  v-bind:, 绑定属性，比如v-bind:title="the_title", 缩写  :， 比如  :title,
                   :  v-on:, 方法绑定， 例如v-οnclick="doClick", 缩写@, 例如 @click="doClick"
3. 事件修饰符
   在事件后面添加修饰符， 比如@click.stop="clickFun"
     .stop : 阻止冒泡
     .prevent : 阻止默认行为， 如a标签中有href链接， 该修饰符可阻止链接跳转
     .capture : 捕获触发事件
     .self : 实现只有点击当前元素， 才会触发事件。 不同于.stop， .self只阻止自己身上冒泡行为的触发， 不会影响其他元素（比如父元素）的冒泡行为
     .once : 只触发一次事件
4. 绑定样式
   1). 绑定class
      1. 使用v-bind, 直接传递数组
         <div :class="['divStyle1', 'divStyle2']">
      2. 使用三元表达式
         <div :class="['divStyle1', flag ? 'divStyle2' : '']">
         //js
         data：{
             flag: true
         }
      3. 使用对象来代替三元表达式
         <div :class="['divStyle1', {'divStyle2' : flag}]">
      4. 直接绑定对象
         <div :class="classObj">
         //js
         data：{
             classObj: {divStyle1 : true, divStyle2 : false}
         }
    2). 绑定行内样式
      1.  <div :style="{color: 'red', 'font-weight': 200}">

      2. 使用数组
          <div :style="[styleObj1, styleObj2]">
          data: {
              styleObj1: {color: 'red', 'font-weight': 200},
              styleObj2: {'margin-top': '20px'}
          }
5. v-for
      1. 迭代数组
        <p v-for="item in items"> {{item}} </p>
        <p v-for="{item, i} in items"> 索引值：{{i}} </p>
      2. 迭代对象
        <p v-for="{val, key i} in user"> {{val}} </p>
      3. 迭代数字
        <p v-for="count in 10"> {{count}} </p> 
        //从1开始
      4. 注意点： 在组件的使用v-for的时候，必须要有key属性，且必须使用绑定的形式， 这是为了指定唯一的字符串/数字类型
       <p v-for="user in users" :key="item.id">
          <input type="checkbox"> 
          {{user.id}} --- {{user.name}} 
       </p>
6. v-if / v-show
      v-if： 每次都会重新删除或创建元素。性能切换消耗较高
      v-show: 每次不会进行DOM的删除和创建操作， 只是切换元素的display:none样式