Vue基础指令

vue指令

1. 写在双括号里面（{{}}）

	<p>{{ nul }}</p>
    <p>{{ obj.name }}</p>
    <p>{{ arr[ 0 ] }}</p>
    <p>{{ fn() }}</p>
    <p>{{ 1+2 }}</p>
    <p>{{ 2 > 5 ? '真': '假' }}</p>
    <p>{{ 2 < 5 && '真'|| '假' }}</p>

2. 写在dom属性上(添加v-属性)

    <p v-if = "bol"> 猫</p>
    <p v-else>狗</p>

指令

1. v-html
   • 解析html格式
2. v-text
   • 解析文本格式
3. v-show
   • 使用display:none属性来控制内容是否显示
4. v-if
   • 一个标签的创建或销毁
   • 这是if的单路分支

      <p v-if = "f">12121</p>
   

   3. 这是if的双路分支

   <p v-if = "f">A</p>
   <p v-else>B</p>
   <!-- f是布尔值 -->
   

   4. 这是v-if的多路分支

   <p v-if = "type == 'A'">A</p>
   <p v-else-if = "type == 'B'">B</p>
   <p v-else>C</p>
    <!-- type输入为A显示A，输入值为B显示B输入值为其他则显示C -->
   

5. v-show和v-if之间的对比
   • 效果看起来是一样的
   • v-if控制的是元素的存在与否
   • v-show控制的是元素的display:none属性
   • v-if和v-show谁的性能损耗较高？
     • 是v-show的性能损耗高
   • 总结：项目中的选择：平凡切换使用v-show，不平凡切换使用v-if
6. v-bind

   • 解决以下问题我们使用v-bind

     • img src
     • dom class
     • dom style

   • v-bind的使用格式

     • 格式：v-bind:属性（attr）= 数据

     •    <img v-bind:src="img" alt="">
          <!--  img是在data中的图片地址 -->
       

   • v-bind的简写

     • 简写格式：:属性=数据

      <!-- 简写 -->
     <img :src="img" alt="">
     

   1. 类名绑定的形式

      • 定义属性

        <style>
            .box{
              width: 100px;
              height: 100px;
              background: black;
            }
            .red{
              background: red;
            }
            .blue{
              background: blue;
            }
         </style>
        

      • 对象形式

        •   <p :class = "{box:true,red:true,blue:flase}"></p>
          

      • 数组形式

        •   <p :class = "['box','red','blue']"></p>
          

   2. 样式绑定
      • 对象形式

      	<p :style = "{width:'200px',height:'200px',background:'yellow'}"></p>
      	 <p :style = "styleObj1"></p>
      	 <script>
      		  new Vue({
      		    el: '#app',
      		    data: {
      		      styleObj1:{
      		        width:'200px',
      		        height:'200px',
      		        background:'yellow'
      		      }
      		    }
      		  })
      	</script>
      	 <!-- 将样式写在data中的styleObj1下-->
      

      • 数组形式

        	 <p :style = "[{width:'300px',height:'300px'},{background:'purple'}]"></p>
        	 <p :style = "styleObj2"></p>
        	  <script>
        		  new Vue({
        		    el: '#app',
        		    data: {
        		      styleObj2: [{
        			       width:'300px',
        			       height:'300px'
        			      },
        			     {
        			      background:'purple'
        			   }]
        		  	  }
        		 	})
        		</script>
        

7. v-model
   • 数据双向绑定
   • 用于表单
   • v-model类似于表单中的value属性
   • 格式：

     	 <input type="text" v-model = "money">
     

8. v-on
   • 事件绑定
   • v-on:click = “方法名称” 可以简写成 @click = “方法名称”
   • 格式：
     v-on:事件类型 = “事件处理程序（方法）”

     <input type="text" :value = "money" v-on:input = "changeMoney">SS
     <script>
       new Vue({
         el: '#app',
         data: {
           money: 1000
         },
         methods: {
           changeMoney ( e ) {
             this.money = e.target.value
             // console.log(this.money)
           }
         }
       })
     </script>
     

9. v-for
   • 循环指令
   • 格式：
     v-for = "item in(of) arr(要遍历的数据) "

   •   	<li v-for = "item in json" :key = "item.id">
       	<!-- ke是标识符（唯一值） -->