Vue学习日记(一)

最新推荐文章于 2023-12-25 23:04:31 发布

泥烟

最新推荐文章于 2023-12-25 23:04:31 发布

阅读量206

点赞数 1

分类专栏：前端文章标签： vue.js javascript css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_39391544/article/details/120226066

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

目录

v-for 循环语句

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

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>

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习日记(一)

监听事件监听事件<script src="https://how2j.cn/study/vue.min.js"></script> <div id="div1"> <div>一共点击了 {{clickNumber}}次</div> <button v-on:click="count">点击</button> </div> <script> ..
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

泥烟 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。