Vue.js 笔记

作者: 月薪2k的前端程序员 | 来源:发表于2018-09-15 08:47 被阅读0次

前端基础知识学习---Vue.js学习（一）模板语法
Vue.js入门
Vue-思维导图笔记
Vue.js进阶
1小时轻松入门Vue
vue.js源码学习笔记
Vue.js 学习笔记（一）
【个人提升】vuex构建单页应用
Vue.js渐进
初识vue.js

v-bind：绑定属性

v-bind绑定属性，v-bind:属性名=‘值’，v-bind :属性名=‘值’

v-model 双向数据绑定

<div id='itany'>
        <input type="text" name="" v-model='msg'>
        <p>{{msg}}</p>
    </div>  
<script src='./js/vue.js'></script>
<script type="text/javascript">
    new Vue({
        el:"#itany",
        data:{
            msg:''
        }
    })
</script>

我们把msg绑定到input元素上，同时p标签里也要现实msg.打开页面我们发现当向input中输入内容时，p标签中的值会随着input中的内容变化，这就是一个最简单的双向数据绑定

v-for:对数组或对象进行循环操作

<div id='box'>
        <ul>
            <li v-for='val in ars'>{{val}}</li>
        </ul>
    </div>  
<script src='./js/vue.js'></script>
<script type="text/javascript">
    new Vue({
        el:"#box",
        data:{
            ars:['香蕉','苹果','鸭梨']
        }
    })
</script>

v-on:事件绑定

<div id='itany'>
       <button v-on:click='alt'>点击</button>
   </div>
    <script src='../vue.js'></script>
    <script>
    new Vue({
        el:'#itany',
        data:{
            msg:'hello world'
        },
        methods:{//存放函数(方法)
            alt:function(){
                alert(this.msg)
            }
        }
      })
    </script>

v-show/v-if

控制元素的显示或隐藏 display:none
&& 与
|| 或
// 有假与为假，有真或为真
！非取反

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="itany">
        <button @click='chg'>切换</button>
        <div class="box" v-show='see'></div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:'.itany',
            data:{
                see:true
            },
            methods:{
                chg:function(){
                    this.see=!this.see
                }
            }
        })
    </script>
</body>
</html>

v-show/v-if都可以控制元素的显示和隐藏，但是方式不一样，v-show使用的是display:none来控制的，v-if使用的是visibility:hidden来控制的

display：none 不显示
visibility：hidden 隐藏可见性
不显示就是啥都没有，隐藏可见性有可能是文字或图像与背景一致，人看不到，实际上还是显示了的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div class="box">
       <p v-if='num==0'>00000000000000000</p>
       <p v-if='num==1'>11111111111111111</p>
       <p v-if='num==2'>22222222222222222</p>
       <p v-if='num==3'>33333333333333333</p>
       <p v-if='num==4'>44444444444444444</p>
       <p v-if='num==5'>55555555555555555</p>
   </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:'.box',
            data:{
                //               num:Math.floor(Math.random()*(max-min+1)+min)
               num:Math.floor(Math.random()*(5-0+1)+0)
            }
        })
    </script>
</body>
</html>