vue初始

一、Vue.js是一套构建用户界面的渐进式框架   vue：可维护性，以扩展性
二、vue的代码结构
     1.引入vue.js      <script scr=""><script>
     2.视图层  <div id="app"> {{msg}} </div>
     3.创建vue实例  <script>
        var vm  = new Vue({
            //vue控制区域
            el:"#app",
            //存放数据
            data:{
            msg:'我是帅哥'
            },
            //方法
            methods:{}    
            })
三.、1.插值表达式 {{~}}
        2.v-clock: 反之页面闪烁 <style> [v-clock]{display:none}</style>
       3.v-text: 会替换掉元素里内容   <div v-text="html"></div>   -->    data:{html:'<h2>替换的文本内容</h2>'}
       4.v-html: 可以渲染html界面     <div v-html="html"></div>   -->   data:{html:'<h2>替换的文本内容</h2>'} 
       html 可以解析富文本
       5.v-bind: 界面元素属性值得绑定    v-bind:disabled     简写：:disabled
       6.v-on: 进行事件绑定 v-on:click=""    简写：@click=“”
四、事件装饰符：
      1.  .stop 阻止冒泡    @click.stop=“”
      2.  .prevent 阻止默认事件    a标签、表单标签
      3.  .capture  捕获   从最具体元素到最具体的元素，同时会产生冒泡。    捕获：在捕获的过程中，有捕获事件先被触发
      4.  .self 只当事件在该元素本身   同时产生冒泡。
      5.  .once 事件只触发一次，会产生冒泡
五、v-model数据双向绑定    注：绑定的表单控件
六、vue中的样式使用
      1.数组 data:{class1:'类型1  类型2' ，class2:['类型1','类型2']}
      2.三目表达式    <div :class='flag?'类名1':'类型2'>
      3.数组内置对象（对象的键是样式的名字，值是Boolean类型） <div :class="['类型1',{'类型2'：true}]"></div>
      4.直接通过对象  <div :class="{'red':true,'box':true}"> 终于解封了</div>
六、v-for属性：
     <div id=app>
          <div class="father" v-for="item in courseSectoin">
           {{item.father}}
           <div class="son" v-for="(item2,index) in item.section">{{item2.son}}</div>
         </div>
     </div>
     var vm= new Vue({
         el:'#app',
         data:{
           courseSectoin:[
                {
                    father:'父章节1',
                    section:[
                        {son:'子章节1'},
                        {son:'子章节2'},
                        {son:'子章节3'},
                    ]
                },
                {
                    father:'父章节2',
                    section:[
                        {son:'子章节1'},
                        {son:'子章节2'},
                        {son:'子章节3'},
                    ]
                },
            ]
        }
     })
七、v-if与v-show 的区别
      <div id=app>
     <div v-if="flag">flag</div>    //i.v-if删除dom元素
     <div v-show="flag">flag</div>  // ii.v-show设置display:none
      </div>
      var vm= new Vue({
         el:'#app',
         data:{
          flag:true,
          //flag:false
          },
     })
       b)应用场景：
          i.v-if只修改一次的时候可以使用v-if
          ii.v-show频繁切换的时候可以使用v-show