想学vue你看就完了，简简单单

想学vue你看就完了

1. 以组件的形式方便后期的维护
2. mvvm模式方便程序操作dom元素

class与style的绑定问题

1. 对象绑定法

   .style1{
       color: red; //文字颜色为红色
   }
   

   <div v-bind:class="{style1: isture}">
   
   </div>
   

   export default {
     data () {
         return {
             istuer: tuer
         }
     }
   }
   

   • 此处的div是否有class名字为style1这个样式，取决于data数据中istrue的值为true还是false，如果为true则应用此样式。

2. 数组语法

   .style1{
       color: red;
   }
   .style2{
       background-color: red;
   }
   

   <div :class="[istrue ? style1 : style2]"> // 这里的:class为v-bind:class的简写
       
   </div>
   

• 注意v-bind的简写形式 :class = v-bind:class。

export default {
  data () {
      return {
          istuer: tuer
      }
  }
}

• 这样写是使用了三元运算符，当istrue为true时绑定的为style1，当istrue为false时绑定的为style2

条件渲染

1. v-if

   v-if判断的是此元素是否渲染

   <div v-if="iftrue">
       123
   </div>
   

   export default {
     data () {
         return {
             iftrue: tuer
         }
     }
   }
   

   • 此处的div组件是依靠data里面iftrue数据的值在进行渲染，如果为true则实行渲染。
   • 要注意一点“v-if判断的是此元素是否渲染”，这句话的意思是如果v-if判断的为false时此元素根本不会在界面上进行渲染，这点要跟v-show来做出区分

2. v-show

   v-show判断时的此元素是否在页面显示

   <div v-show="iftrue">
       123
   </div>
   

   export default {
     data () {
         return {
             iftrue: tuer
         }
     }
   }
   

   • 此处的div组件是依靠data里面iftrue数据的值在进判断显示，如果为true则实行显示。
   • 他跟v-if的区别就是他只是隐藏了所选的元素，元素已经渲染了。

列表渲染（⭐）

1. 使用v-for渲染对象数组

   使用v-for的目的是方便我们把josn文件的大量数据放到界面上

   <ul>
       <li v-for="(item,index) in list" :key="item.id">
       	{{ item.name }} ---{{index}}
       </li>
   </ul>
   

   export default {
     data () {
         return {
             list: [
                 {
                     id: 1,
                     name: '腾讯'
                 },
                 {
                     id: 2,
                     name: '阿里'
                 },
                 {
                     id: 3,
                     name: '百度'
                 },
                 {
                     id: 4,
                     name: '字节'
                 }
             ]
         }
     }
   }
   

   运行的结果是

   腾讯 -- 0
   阿里 -- 1
   百度 -- 2
   字节 -- 3
   

   • 由此运行结果可以看出div中的for循环,把data中list的数据name的属性渲染到了页面上
   • v-for="(item,index) in list" 的意思就是把list中的内容赋值给item，所以我们用item就可以读到list中的数据
   • index 则是排序

2. key(⭐)

   • key是为了我们更准确的操作我们循环的元素，我们一般给key帮定的值就是我们循环的数组对象中的类似于id的那种值。
   • 如果不绑定key这是会报错的。

事件的绑定

1. 监听事件

   v-on来给元素绑定事件

   <div>
       {{msg}}
   </div>
   <button v-on:click="msg + 1">
       msg加一
   </button>
   

   export default {
     data () {
         return {
             msg: 1
         }
     }
   }
   

   • 当我们点击按钮时 div中显示的msg的值会+1，同时我们进行操作后data中的msg的值也会同时改变。

2. 事件的处理

   v-on给元素绑定事件函数

   <div>
       {{msg}}
   </div>
   <button @click="allmsg()"> // @click为v-on:click的简写形式。
       msg加一
   </button>
   

   export default {
     data () {
         return {
             msg: 1
         }
     },
     // methods 中保存的是我们自己创建的事件函数。
     methods: {
         addmsg () {
             this.msg = this.msg + 1 // 这里用this.来调用data中的数据
         }
     }
   }
   

   • 同过这种形式我们就可以用我们自己的函数处理方法
   • 注意：methods 存放方法和 data是同级的。
   • 注意v-on的简写，用@符号表示

3. 事件的传参

   当我们要使用自己创建的事件函数时遇到要传递参数时可以这么使用

   <button @click="alftmsg('你们好')"> // 注意外边已经用了双引号了 传参数的时候我们就要用单引号
       弹出消息提示
   </button>
   

   export default {
     methods: {
         alftmsg (value1) {
             alert(value1)
         }
     }
   }
   

   // 运行结果为
   你好啊