Vue学习日记(一)

目录

​​监听事件​​

​​监听事件​​

​​冒泡​​

​​条件语句​​

​​v-if​​

​​v-else​​

​​v-else-if​​

​​v-for 循环语句​​

​​index的应用​​

​​遍历​​

​​ 属性绑定(便于动态改动)​​

​​双向绑定​​

​​v-model 双向绑定​​

​​ 多种风格数据的绑定​​

---

监听事件

监听事件

<script src="https://how2j.cn/study/vue.min.js"></script>
  
<div id="div1">
  
  <div>一共点击了  {{clickNumber}}次</div> 
  <button v-on:click="count">点击</button>
  
</div>
   
<script>
   
new Vue({
      el: '#div1',
      data: {
          clickNumber:0
      },
      methods:{
          count: function(){
              this.clickNumber++;
          }
      }
    })
   
</script>

冒泡

<script src="https://how2j.cn/study/vue.min.js"></script>

<style type="text/css">
    *{
        text-align: center;
        line-height: 50px;
    }
    div {
        width: 110px;
        cursor: pointer;
    }
    #grandFather{
        background-color: rgb(3, 43, 3);
    }
    #father{
        background-color: rgb(20, 158, 20);
    }
    #me{
        background-color: rgb(39, 248, 39);
    }
    #mySon{
        background-color: rgb(151, 212, 151);
    }
</style>


<div id="content" style="color: brown; ">
    <div id="grandFather" @click="fuc">
        grandFather
        <div id="father" @click="fuc">
            father
            <div id="me" @click="fuc">
                me
                <div id="mySon" @click="fuc">
                    mySon
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    var content = new Vue({
        el:"#content",
        data:{
            id: ''
        },
        methods:{
            fuc: function(){
                this.id = event.currentTarget.id;
                alert("Here is "+this.id);
            }
        }
    })
</script>

 演示: 点击me,会依次出现如下弹窗

条件语句

v-if

<script src="https://how2j.cn/study/vue.min.js"></script>

<div id="div1">
    <button v-on:click="swap">切换状态</button>
    <div v-if="show">这段字默认可见</div>
</div>

<script>
    new Vue({
        el:'#div1',
        data:{
            show:true
        },
        methods:{
            swap: function(){
                this.show = !this.show;
            }
        }
    })
</script>

可以通过按钮隐藏/显示"这段字可见"

v-if 的判断和其他语言中的布尔判断大同小异

v-else

做一个简易抽奖器

<script src="https://how2j.cn/study/vue.min.js"></script>

<div id="div1">
    <button v-on:click="tryAgain">赌一把</button>
    <div v-if="show">第{{num}}轮:中了5元</div>
    <div v-else>
        恭喜你把握住了第{{num}}次机会,中了100万
        中大奖的概率目前为 {{cnt/num}}
    </div>
</div>

<script>
    new Vue({
        el:'#div1',
        data:{
            show:true,
            cnt:0,
            num:0
        },
        methods:{
            tryAgain: function(){
                this.num++;
                
                if(Math.random()<0.9){
                    this.show = true
                }else{
                    this.show = false
                    this.cnt++
                }
            }
        }
    })
</script>

 

 

 

v-else-if

一个人生重开器

<script src="https://how2j.cn/study/vue.min.js"></script>
   
<div id="div1">
   
  <button v-on:click="birthAgain"> 看看下辈子投胎是做什么的 </button>
  <div v-if="number>98"> 重生失败</div>
  <div v-else-if="number>95"> 被刘华强砍的瓜贩</div>
  <div v-else-if="number>90"> 中东悍匪</div>
  <div v-else-if="number>80"> 资本家</div>
  <div v-else-if="number>70"> 演艺明星</div>
  <div v-else-if="number>60"> 伞兵</div>
  <div v-else-if="number>50"> 卖冰棍的老奶奶</div>
  <div v-else-if="number>40"> 会唱跳rap的偶像练习生</div>
  <div v-else-if="number>30"> 张美玉的小弟</div>
  <div v-else-if="number>20"> 猝死的社畜</div>
  <div v-else> 重生失败</div>
     
</div>
    
<script>
    
new Vue({
        el: '#div1',
        data: {
            number:0
        },
        methods:{
            birthAgain: function(){
                this.number=Math.random()*100
            }
        }
    })
    
</script>

 

 

v-for 循环语句

index的应用

<script src="https://how2j.cn/study/vue.min.js"></script>

<style>
    tr td{
        border: 1px solid gray;     
    }
    table{
        border: 1px solid gray; 
        width: 300px;
    }
    tr.firstLine{
        background-color: rgb(147, 255, 255);
    }
</style>

<div id="div1">
    <table align="center">
        <tr class="firstLine">
            <td>序号</td>
            <td>名字</td>
            <td>hp</td>
        </tr>
        <tr v-for="hero,index in heros">
            <td>{{index}}</td>
            <td>{{hero.name}}</td>
            <td>{{hero.hp}}</td>
        </tr>
    </table>
</div>
<script>
    var data = [
        {name:"盖伦",hp:877},
        {name:"提莫",hp:454},
        {name:"安妮",hp:666},
        {name:"死歌",hp:555}
    ];
    new Vue({
        el:'#div1',
        data:{
            heros:data
        }
    })
</script>

 

 

遍历

<script src="https://how2j.cn/study/vue.min.js"></script>

<div id="div1">
    <div v-for="i in 10">{{i }}</div>
</div>

<script>
    new Vue({
        el:"#div1"
    })
</script>

 

 

 属性绑定(便于动态改动)

<script src="https://how2j.cn/study/vue.min.js"></script>
   
<div id="div1">
    <a v-bind:href="page">http://12306.com</a>
    /*也可以写作 <a :href="page">http://12306.com</a> */
</div>
    
<script>
  
new Vue({
      el: '#div1',
      data:{
          page:'http://12306.com'
      }
    })
    
</script>

双向绑定

v-model 双向绑定

前面的都是把 Vue对象上的数据显示在视图上，那么如何把视图上的数据放到Vue对象上去呢？
这时就需要用到v-model进行双向绑定, 当input里面的值发生变化的时候，就会自动把变化后的值，绑定到Vue对象上

<script src="https://how2j.cn/study/vue.min.js"></script>

<div id="div1">
    user name: <input v-model="name">
    <button @click="submitName">提交</button>
</div>

<script>
    new Vue({
        el: '#div1',
        data:{
            name:"knight"
        },
        methods:{
            submitName: function(){
                alert(this.name);
            }
        }
    })
</script>

 多种风格数据的绑定

 

<script src="https://how2j.cn/study/vue.min.js"></script>
    
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>视图类型</td>
            <td>输入数据</td>
            <td>绑定到Vue上的数值</td>
        </tr>       
        <tr>
            <td>
                单行文本
            </td>
            <td>
                <input v-model="input" placeholder="输入数据">
            </td>
            <td>
                <p>{{ input }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                多行文本
            </td>
            <td>
                <textarea v-model="textarea" placeholder="输入数据"></textarea>
            </td>
            <td>
                <p>{{ textarea }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                单个复选框
            </td>
            <td>
                <input type="checkbox" id="checkbox" v-model="checked">
            </td>
            <td>
                <p>{{ checked }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                多个复选框
            </td>
            <td>
                  <input type="checkbox" id="teemo" value="teemo" v-model="checkedes">
                  <label for="teemo">teemo</label>
                  <input type="checkbox" id="gareen" value="gareen" v-model="checkedes">
                  <label for="gareen">gareen</label>
                  <input type="checkbox" id="annie" value="annie" v-model="checkedes">
                  <label for="annie">annie</label>
            </td>
            <td>
                <p>{{ checkedes }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                单选按钮
            </td>
            <td>
              <input type="radio" id="one" value="One" v-model="radio">
              <label for="one">One</label>
              <br>
              <input type="radio" id="two" value="Two" v-model="radio">
              <label for="two">Two</label>
            </td>
            <td>
                <p>{{ radio }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                单选选择框
            </td>
            <td>
              <select v-model="selected" size="5">
                <option disabled value="">请选择</option>
                <option>AD</option>
                <option>AC</option>
                <option>ADC</option>
              </select>
            </td>
            <td>
                <p>{{ selected }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                多选选择框
            </td>
            <td>
              (通过ctrl或者shift进行多选)<br>
              <select v-model="selecteds" multiple size="5">
                <option disabled value="">请选择</option>
                <option>AD</option>
                <option>AC</option>
                <option>ADC</option>
              </select>
            </td>
            <td>
                <p>{{ selecteds }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                单个复选框
            </td>
            <td>
                默认值是true或者false,也可以修改为自定义的值<br>
                <input type="checkbox" id="toggle" true-value="yes" false-value="no" v-model="toggle">
            </td>
            <td>
                <p>{{ toggle }}</p>   
            </td>
        </tr>       
 
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
          input:'',
          textarea:'',
          checked:'',
          checkedes:[],
          radio:'',
          selected:'',
          selecteds:[],
          toggle:'',
           
      }
    })
     
</script>