乐趣区

初学Vue一-Vue简单入门

jiezi

vue – 国人开发制作的

类似于 view 的发音

vue 经过了几次大的版本波动

0.x 0.6 版本

1.x 版本

2.x 版本 – 现在常用的

为什么要介绍版本改动呢，因为不同版本语法和用法有差别，用起来比较麻烦

react 因为版权原因，导致百度等企业转用 vue，导致 vue 突然火起来，也有支持国人的成分，当然其中的也缺不了它的确好用。

完整版演示代码

正式部分

vue 学习建议先学会 js，json

有的人觉得 vue 或 angular 不够 jquery 方便，首先，vue和 angular 是数据驱动的，而 jquery 是事件驱动的，也就是说用 jquery 需要想着给赋予事件，而 vue 与angular只要想着数据怎么变化就行了。

vue1.0 下载

vue2.0 下载

vue 使用

html 部分：// 首先当然是引入 vue.js 文件
<script src="vue.js"></script>
<body>
//vue 标准是要用两对花括号圈住数据名的
{{msg}}
<body>

js 部分：// 使用 vue 要先 new 一个 vue 对象出来传入 json 格式的数据
    <script>
        new Vue({
            // 作用域：el - element 缩写
            el:'body',
            // 输出的数据
            data:{msg:'hello vue!',}
        })
    </script>

{{}} -> 必须在作用域里面放入输出的模板，模板里面放入 data 里面你自己定义的变量

注意：只有 ie8 以上的浏览器才能兼容 vue

如何选取 class 或 id 为作用域

<div class="myDiv">
    {{msg}}
</div>

    <script>
        new Vue({
    // 这里选区类与 id 是与 jquery 的方式是一样的，id 的话就是 #myDiv
            el: '.myDiv',
            data: {msg:'hello vue!',}
        })
    </script>

常用指令

类似于 angular 的常用指令有 ng-show /ng-repeat，vue 当然也有。

  • v-show：类似于 display，true就是显示 false 就是隐藏
    <style>
        div{
            width: 200px;
            height: 200px;
            background: black;
        }
    </style>

    <div v-show='false'></div>

    <script>
        // 这里定义作用域是必须的，使用 vue 语句如果不定义作用域是不会起作用的
        new Vue({el:'body',})
    </script>
<style>
        div{
            width: 200px;
            height: 200px;
            background: black;
        }
    </style>

    <div v-show='dis'></div>

    <script>
        new Vue({
            el:'body',
            // 也可以利用数据传输来使用，更加灵活
            data:{dis:false,}
        })
    </script>

  • v-for：循环输出数组或 json 数据

    <div v-for='i in arr'>{{i}}{{$index}}</div>
    <div v-for='i in json'>{{i}}</div>
    <div v-for='(key,value) in json'>{{key}}=>{{value}}</div>
    <div v-for='i in json'>{{$key}}=>{{i}}</div>
    <script>
        new Vue({
            el:'body',
            data:{
                // 这是个字符串数组
                arr:['a','b','c'],
                json:{
                    bill:18,
                    bill2:21,
                    bill3:24
                }
            }
        })
    </script>

  • v-for: {{$index}} -> 索引值，{{$key}} -> key 值

    • 因为 json 是键值对，可以理解为数组的索引与值的关系，所以可以用不同方式访问。
    • {{$index}}可以进行计算 => {{$index+10}} 从 10 开始计数

v-model：双向绑定 — 数据和输出绑定

<body>
    <input type="text" v-model='msg'>
        
    {{msg}}
    <script>
        new Vue({
            el:'body',
            data:{msg:'',}
        })    
    </script>

Vue 事件书写区

<style>
    div{
        height: 100px;
        width: 100px;
        background:black;
    }
</style>    
<input type="button" v-on:click='change' value="change">
    <div v-show='dis'></div>

    <script>
        new Vue({
            el:'body',
            data:{dis:true,},
            //vue 事件区域，所有事件控制写在这里
            methods:{change:function() {this.dis=!this.dis;}
            }
        })    
    </script>
    • v-on有简写形式 @ , 可以直接把v-on 替换为@，@click='change'。

事件对象：event

  • 查看事件对象

    • 这些演示里面的 html 部分关于 body 与 html 的样式设置是必须的，不然 body 与 html 会按内容的大小填充，而不是布满整个页面
html 部分：// 这里是必须设置这个样式，不然 body 的大小是根据页面内容调整大小的
<style>
    body,html{
        height: 100%;
        width: 100%;
    }
</style>
<body @click='show'>

<script>
        new Vue({
            el:'body',
            methods:{
 // 事件对象，如果传参只有一个，默认就是事件对象，如果有多个参数传入，那么事件对象就是 $event
                show:function(e){console.log(e);
                }
            }
        })
    </script>
  • `@click="show"是可以传递参数给事件的，当它传递参数时，事件处理的形参不再默认为是时间对象，当我们传递参数给事件又想看事件对象时可以用$event 
html 部分：<style>
    body,html{
    height: 100%;
    width: 100%;
}
</style>
<body @click='show(10,event)'>

js 部分：<script>
        new Vue({
            el:'body',
            methods:{show:function(e,$event){console.log(e,event);
                }
            }
        })
    </script>

事件冒泡：事件冒泡的三种阻止方法

  • 先来看下事件冒泡没有阻止的情况

    • 这些演示里面的 html 部分关于 body 与 html 的样式设置是必须的，不然 body 与 html 会按内容的大小填充，而不是布满整个页面
html 部分：<style>
        body,html{
            height: 100%;
            width: 100%;
        }
        div{
            height: 100px;
            width: 100px;
            background: black;
        }
</style>

<body @click="myBody">
    
<div @click="myDiv"></div>

js 部分：<script>
        new Vue({
            el:'body',
            methods:{myDiv:function() {alert('i am div');
                },
                myBody:function(event){alert('i am body');
                }
            }
        })    
    </script>
  • event.cancelBubble=true;
html 部分：<style>
        body,html{
            height: 100%;
            width: 100%;
        }
        div{
            height: 100px;
            width: 100px;
            background: black;
        }
</style>

<body @click="myBody">
    
<div @click="myDiv"></div>

js 部分：<script>
        new Vue({
            el:'body',
            methods:{myDiv:function() {
                    event.cancelBubble=true;
                    alert('i am div');
                },
                myBody:function(event){alert('i am body');
                }
            }
        })    
    </script>
  • event.stopProgation();
html 部分：<style>
        body,html{
            height: 100%;
            width: 100%;
        }
        div{
            height: 100px;
            width: 100px;
            background: black;
        }
</style>

<body @click="myBody">
    
<div @click="myDiv"></div>

js 部分：<script>
        new Vue({
            el:'body',
            methods:{myDiv:function() {event.stopProgation();
                    alert('i am div');
                },
                myBody:function(event){alert('i am body');
                }
            }
        })    
    </script>

  • 直接在 click 后接.stop

    • 其中，上面两个 event 都是原生方法，所以虽然能用，但是还是不够方便，所以这里使用 vue 方法来
html 部分：<style>
        body,html{
            height: 100%;
            width: 100%;
        }
        div{
            height: 100px;
            width: 100px;
            background: black;
        }
</style>

<body @click="myBody">
    
<div @click.stop="myDiv"></div>

js 部分：<script>
        new Vue({
            el:'body',
            methods:{myDiv:function() {alert('i am div');
                },
                myBody:function(event){alert('i am body');
                }
            }
        })    
    </script>

阻止默认事件 — 两种默认事件阻止方式

  • event.preventDefault();

    • 这个是原生 js 方法，能用但是也不够 vue 方法方便
html 部分：<style>
            body,html{
                height: 100%;
                width: 100%;
            }
        </style>

<body @click="myBody">
            
js 部分：<script>
        new Vue({
            el:'body',
            methods:{myBody:function(){event.preventDefault();
                    alert('我右键了');
                }
            }
        })
    </script>
  • @click.prevent="";
html 部分：<style>
            body,html{
                height: 100%;
                width: 100%;
            }
        </style>

<body @click.prevent="myBody">
            
js 部分：<script>
        new Vue({
            el:'body',
            methods:{myBody:function(){alert('我右键了');
                }
            }
        })
    </script>

键盘事件 — 键盘监控事件利用 keydown/up 来监控用户按下了什么按键

  • 键盘监控事件
html 部分：<style>
            body,html{
                height: 100%;
                width: 100%;
            }
    </style>

<body @keydown="mybody">
    
js 部分：<script>
        new Vue({
            el:'body',
            methods:{mybody:function(){alert('我按键盘了');
                }
            }
        })    
    </script>

  • event.keyCode监控用户按键的 ASCII 码，可以通过查看 keyCode 来赋予不同按键不同事件，例如通过 console.log(event.keyCode); 可以看到按键 A 的键值是 65，那么我们可以设置只有当按下 A 键时才显示的事件

    • @keydown.65等效于if(e.keyCode==65) 
html 部分：<style>
            body,html{
                height: 100%;
                width: 100%;
            }
    </style>

<body @keydown.65="mybody">
    
js 部分：<script>
        new Vue({
            el:'body',
            methods:{mybody:function(){alert('我按了 A 键');
                }
            }
        })    
    </script>
  • 可以组合键使用
html 部分：<style>
            body,html{
                height: 100%;
                width: 100%;
            }
    </style>

<body @keydown.65.66.67="mybody">
    
js 部分：<script>
        new Vue({
            el:'body',
            methods:{mybody:function(){alert('我按了 abc 键');
                }
            }
        })    
    </script>
退出移动版