VUE初学知识点记录

1. vue基础构成
   

HTML: 
      
{{title}}
  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, 直接传递数组
         


      2. 使用三元表达式
         

         //js
         data:{
             flag: true
         }
      3. 使用对象来代替三元表达式
         

      4. 直接绑定对象
         

         //js
         data:{
             classObj: {divStyle1 : true, divStyle2 : false}
         }
    2). 绑定行内样式
      1.  

      2. 使用数组
         


          data: {
              styleObj1: {color: 'red', 'font-weight': 200},
              styleObj2: {'margin-top': '20px'}
          }
5. v-for
      1. 迭代数组
       

{{item}}


       

索引值:{{i}}


      2. 迭代对象
       

{{val}}


      3. 迭代数字
       

{{count}}

 
        //从1开始
      4. 注意点: 在组件的使用v-for的时候,必须要有key属性,且必须使用绑定的形式, 这是为了指定唯一的字符串/数字类型
       


           
          {{user.id}} --- {{user.name}} 
       


6. v-if / v-show
      v-if: 每次都会重新删除或创建元素。性能切换消耗较高
      v-show: 每次不会进行DOM的删除和创建操作, 只是切换元素的display:none样式

你可能感兴趣的:(Vue,Vue)