初学Vue（一） -- Vue简单入门

时间  2019-12-10
标签 初学 vue 简单 入门 繁體版
原文   原文链接
vue - 国人开发制做的

相似于 view 的发音javascript

vue通过了几回大的版本波动html

0.x 0.6版本vue

1.x 版本java

2.x 版本 - 如今经常使用的react

为何要介绍版本改动呢，由于不一样版本语法和用法有差异，用起来比较麻烦jquery

react 由于版权缘由，致使百度等企业转用vue，致使vue忽然火起来，也有支持国人的成分，固然其中的也缺不了它的确好用。json

完整版演示代码数组

正式部分

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>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程