Vue第一天知识总结

一.什么时mvvm？

针对具有复杂的逻辑前端应用

提供基础的架构抽象

通过Ajax数据持久化，保证前端用户体验

mvvm包括三种框架：angurlar.js react.js vue.js

二.组件

首先设置模板：

 其次组件：

                        

 三.指令

1.innerText的属性用法 
  <h1 v-text='msg'></h1> v-text不能识别标签

2.innerHTML的属性用法
  <h1 v-html='msg'></h1>v-html可以识别标签

3.v-show展示和隐藏   flag等于true则显示反之隐藏
 <img v-show="flag" src="img/6.png" alt=""> 

4.v-on事件绑定
   <button v-on:click='flag=!flag;x++' type="button">按钮{{x}}</button>

5.v-if  v-else-if  v-else 判断条件
   <img v-if='x==1'src="img/38.jpg" alt="" srcset="">
   <img v-else-if='x==2' src="img/6.png" alt="" srcset="">
   <img v-else src="img/2.png" alt="" srcset="">

6.列表渲染 v-for 在严格情况下 要添加:key唯一标识
    <div v-for='i,index in myImg' :key='index' class="item">
              <h1>{{index}},{{i.title}}</h1>
              <img :src="i.img" alt="">
     </div>