VUE初学知识点记录

心已赠人 2022-05-12 08:22 213阅读 0赞

**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样式