VUE 起步-指令

1.v-model 修改一处属性时页面数据会随之变换

<div id="app">
   <h1>{{massage}}</h1>
   <input type="text" v-model="massage">
</div>
  <script>
   //1. 
   let vm = new Vue({
      el:"#app",
   data:{
         massage:'Hello word I\'am vue.js' 
   }
   })
  </script>

2.v-once 原始值不会改变的值

<!--//v-once-->
<div id="app">
   <p v-once>原始值:{{msg}}</p>
   <p>后面的:{{msg}}</p>
   <input type="text" v-model="msg">
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:'今天还是要赚钱'
        }
    })
</script>

3.v-if 满足条件时显示 不满足条件的数据不会被创建出来

<div id="app">
   <p v-if="show">要显示的</p>
   <p v-if="hide">不显示的</p>
   <p v-if="height > 170">身高{{height}}</p>
   <p v-if="height < 170">身高{{height}}</p>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            show:true,
         hide:false,
         height:180
        }
    })
</script>

4.v-show 通过display:none来隐藏 条件不满足的会通过css来隐藏但是会创建出来

<div id="app">
   <p v-show="show">要显示的</p>
   <p v-show="hide">不显示的</p>
   <p v-show="height > 170">身高{{height}}</p>
   <p v-show="height < 170">身高{{height}}</p>
</div>
<script>
          new Vue({
              el:"#app",
              data:{
                  show:true,
                  hide:false,
                  height:180
              }
          })
</script>

5.v-else 需要配套v-if执行如

<div id="app">
   <p v-if="height > 170">小明的升高是：{{height}}cm</p>  //如果条件达成实现这条代码
   <p v-else>小明的升高是：{{height}}cm</p>    //否则的话执行v-else
</div>
<script>
   new Vue({
      el:"#app",
      data:{
         height:168,
      }
   })
</script>

6.v-else  v-esle-if 配合使用判断条件

<div id="app">
   <p>输入成绩对应的等级是：</p>
   <p v-if="score > 100 || score < 0">请输入正确的成绩</p>
   <p v-if="score >= 90 || score = 100">优秀</p>
   <p v-else-if="score >= 75">良好</p>
   <p v-else-if="score >= 60 ">及格</p>
   <p v-else>不及格</p>

   <input type="text"  v-model="score">
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            score:90,
        }
    })
</script>

7.v-for 可以循环遍历

<div id="app">
   <p v-for="(score,index) in score">  <!--v-for 遍历方式-->
      {{index  +':'+ score}}
   </p>
   <p v-for="d in dog">{{d}}</p>
   <p v-for="str in name">{{str}}</p>
   <p v-for="tel in phone">{{tel}}</p>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            score:[100,80,75],
         dog:{
             name:'xz',
            age :18,
            height:130,
                  },
                  name:'zhangsan',
         phone:'18000000'
        },

    })
</script>

v-for小练习表格

<!-- v-for循环表格插件 -->
<div id="app">
   <table>
      <thead>
         <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
         </tr>
      </thead>
      <tbody>
         <tr v-for="p in Person">
            <td>{{p.name}}</td>
            <td>{{p.age}}</td>
            <td>{{p.sex}}</td>
         </tr>
      </tbody>
   </table>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
           Person:[
            {name:'男1',age:18,sex:'男'},
                     {name:'女1',age:18,sex:'女'},
                     {name:'男2',age:18,sex:'男'},
                     {name:'女2',age:18,sex:'女'},
                     {name:'张路',age:18,sex:'男'}
         ]
        }
    })
</script>

v-text  区别与直接在标签内输入{{xx}} v-text引入的数据在 标签内添加数据无效  

v-html  也不可以在标签内添加文本

<!--//v-text-->
<div id="app">
   <p v-text="msg"></p>
   <p v-html="html"></p>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:'今天还是要赚钱',
         html:'<input type="data"> <input type="color"> '
        }
    })
</script>

v-vind 绑定图片

<div id="app">
   <img v-bind:src="imgSrc" :alt="alt">
   <img :src="imgSrc" alt="">
</div>
<script>
   new Vue({
      el:"#app",
      data:{
         imgSrc:'img/01.png', //绑定图片
         alt:'我是桌面'
      }
   })
</script>

<!-- v-bind练习 --> 绑定索引class 以及绑定样式 
<style>
   .active{
      background-color:yellow;
   }
</style>
<div id="app">
   <ul>
      <li v-for="(sc,index) in school" :class="index === activeIndex ? 'active' : ''">{{sc}}</li>
   </ul>


   <p :style="{color:fontColor}">aa啊啊啊啊</p>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            school:[
                'school1',
                      'school2',
                      'school3',
                      'school4',
                      'school5',
                      'school6',
                      'school7',
         ],
         activeIndex:2,
         fontColor:'red',
        }
    })
</script>

v-on绑定事件

<!--i-on 绑定事件-->
<div id="app">
   <p :style="{color:fontColor}">{{msg}}</p>

   <button v-on:click="msg = '今天没面试'">改变内容</button>

   <button @click="changeContent()">点击</button>

   <button @click="changeContentColor()">点击</button>
</div>
<script>
    new Vue({
        el:"#app",
        data: {
                  msg: '今天还是要赚钱',
                  fontColor: 'red',
              },
      methods:{   //实例的所有函数实现
         changeContent(){
             //alert(0);
            this.msg = 'test text'

         },
                  changeContentColor(){
                      this.fontColor = 'green'
         }
      }
    })
</script>