Vue基础详解

 1.样式绑定

<div id="app">

        <!--1. class的对象绑定方式 对象方式{} -->
        <!-- activadted 是class名称，isActivated是变量属性 -->
        <!-- activadted是否显示有变量isActivated来决定 -->
         <div @click='handleClick'
         :class="{activadted:isActivated}" 
         >Hello World</div>

        <!--2. class的数组绑定方式 [] -->
        <!-- activadted 和activadtedOne是两个变量，class的内容将是这两个变量的值-->
         <div @click='handleClick'
         :class="[activadted,activadtedOne]" 
         >Hello World</div>

         <!-- style样式对象绑定，styleObj是一个变量名称 -->
         <div @click='handleClick'
         :style="styleObj" 
         >Hello World</div>

         <!-- style样式数组绑定，styleObj是一个变量名称 -->
         <div @click='handleClick'
         :style="[styleObj,{fontSize:'20px'}]" 
         >Hello World</div>
    </div>

 <script>
     var Vm=new Vue({
         el:'#app',
         data:{
            isActivated:false,
            activadted:'activadted',
            activadtedOne:'activadted_one',
            styleObj:{
                color:"black"
            }
         }  
     })
    </script>

2.条件渲染

<div id="app">
        <!-- 1.条件渲染 -->
        <!--v-if,v-show的使用与区别  -->
        <div v-if="show">{{message}}</div>   <!--DOM的删除与添加 -->
        <div v-show="show">{{message}}</div> <!--利用css的display属性--> 

        <!-- v-if和v-else的使用 -->
        <div v-if="show">{{message}}</div>
        <div v-else>bye World</div>

         <!-- v-if,v-else-if,v-else的使用 -->
        <div v-if="show==='a'">this is a</div>
        <div v-else-if="show==='b'">this is a</div>
        <div v-else>bye World</div>

        <!-- 此处使用key值标识两个input，是为了方式Vue内部复DOM的机制 -->
        <div v-if="show">
            用户名：<input type="text" key="username">
        </div>
        <div v-else>
            邮箱：<input type="text" key="email">
        </div>

      
    </div>

 <script>
     var Vm=new Vue({
         el:'#app',
         data:{
            show:false,
            message:'Hello World',
            
         }  
     })
    </script>

3.列表渲染

    <div id="app">
        <!-- v-for循环 item是遍历的每一项，index是遍历每一项的下标 -->
        <!--遍历的效率最高，添加key属性且key值唯一，key值最好不使用index的值-->
        <!-- 
            以下数组操作方法，可以改变data的数据
            pop() 
            push()
            shift()
            unshift()
            splice()
            sort()
            reverse() 
            因此直接修改数组下标的方法是不能改变data中的数组的
         -->
         <!-- 第二种，改变引用，js数组list是一个引用 改变数组内容就是改变数组的引用 -->
        <div v-for="(item,index) of list" :key="{{item.id}}">
            {{item.text}}--{{index}}
        </div>

        <!-- template占位符，它可以帮助我们包裹一些元素，但是并不会真正渲染到页面上-->
       <template v-for="(item,index) of list" :key="{{item.id}}">
            <div>{{item.text}}--{{index}}</div>
            <span>{{item.text}}--{{index}}</span>
       </template>

       <!-- 对象循环 -->
       <!--item每一项的值 key是每一项的键值 index每一项位置信息  -->
       <div v-for="(item,key,index) of userinfo">{{item}}</div>
       <!-- vm.userinfo.name='dell lee' ok  -->
       <!-- vm.userinfo.address='beijing'  not ok 数据变了，页面没变-->
       <!-- 修改引用，修改对象内容，数据变了，页面也可以跟着变化 -->

    </div>

    <script>
     var Vm=new Vue({
         el:'#app',
         data:{
           list:[
               {
                   id:'0101001',
                   text:'hello'
               },
               {
                   id:'0101002',
                   text:'dell'
               },
               {
                   id:'0101003',
                   text:'nice'
               },
               
           ],
           userinfo:{
               name:'dell',
               age:28,
               gender:'male',
               salary:'secret'
           }
            
         }  
     })
    </script>