Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器

一、 Vue.js简介

1. Vue.js是什么

Vue.js也称为Vue，读音/vju:/，类似view，错误读音v-u-e

  • 是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定
  • 数据驱动+组件化的前端开发（核心思想）
  • 更容易上手、小巧

vue2.0和1.0相比，最大的变化就是引入了Virtual DOM（虚拟DOM）,页面更新效率更高，速度更快。

参考：官网

2.vue和angular的区别

2.1 angular

  • 上手较难
  • 指令以ng-xxx开头
  • 所有属性和方法都存储在$scope中
  • 由google维护

2.2 vue

  • 简单、易学、更轻量
  • 指令以v-xxx开头
  • HTML代码+JSON数据，再创建一个vue实例
  • 由个人维护：尤雨溪，华人，目前就职于阿里巴巴，2014.2开源了vue.js库

共同点：都不兼容低版本IE

二、起步

1. Hello World


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        window.onload=function(){
            //配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false，默认为true
            Vue.config.devtools=false;
            Vue.config.productionTip=false; //阻止vue启动时生成生产消息

            var vm=new Vue({
                el:'#itany', //指定关联的元素
                data:{ //存储数据
                    msg:'Hello World'
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        {{msg}} <!-- 两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中 -->
    </div>

    <h3>
        {{msg}}
    </h3>
</body>
</html>

2. 安装vue-devtools插件，便于在chrome中调试vue

vue-devtools下载地址


直接将vue-devtools解压缩，然后将文件夹中的chrome拖放到扩展程序中

//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
    Vue.config.devtools=false;
    Vue.config.productionTip=false; //阻止vue启动时生成生产消息

三、 常用指令

1. 什么是指令？

用来扩展html标签的功能。

2. vue中常用的指令

  • v-model
    双向数据绑定，一般用于表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用指令：v-model</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        window.onload=function(){
            new Vue({
                // el:'.itany',
                el:'div', //vue2.0中不允许将vue实例挂载到<html>或<body>元素，在vue1.0中是可以的
                data:{
                    name:'', //即使没有值，也不能省略，报错
                    age:21,
                    flag:true,
                    nums:[12,4,23,5],
                    user:{id:9527,name:'唐伯虎'}
                }
            });
        }
    </script>
</head>
<body>
    <!-- <div id="itany"> -->
    <!-- <div class="itany"> -->
    <div>
        用户名：<input type="text" v-model="name">
        <br>

        {{name}} <br>
        {{age}} <br>
        {{flag}} <br>
        {{nums}} <br>
        {{user}}
    </div>
</body>
</html>

  • v-for
    对数组或对象进行循环操作，使用的是v-for，不是v-repeat
    注：在vue1.0中提供了隐式变量，如$index、$key

    
  在vue2.0中去除了隐式变量，已被废除            


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用指令：v-for</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#itany',
                data:{
                    arr:[12,4,5,34,2,11],
                    user:{id:9527,name:'唐伯虎',age:25},
                    arr2:[12,4,5,34,2,11,12],
                    users:[
                        {id:9527,name:'唐伯虎',age:25},
                        {id:1001,name:'秋香',age:22},
                        {id:1002,name:'石榴姐',age:24}
                    ]
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!-- {{arr}} -->

        <ul>
            <!-- 普通循环 -->
            <!-- <li v-for="value in arr">{{value}}</li> -->
            <!-- <li v-for="value in user">{{value}}</li> -->

            <!-- 键值循环 -->
            <!-- <li v-for="(v,k) in arr">{{k}}={{v}}</li> -->
            <!-- <li v-for="(v,k) in user">{{k}}={{v}}</li> -->

            <!-- 可以直接循环包含重复数据的集合，可以通过指定:key属性绑定唯一key，当更新元素时可重用元素，提高效率，类似于vue1.0中track-by -->
            <!-- <li v-for="(v,k) in arr2" :key="k">{{v}}</li> -->

            <li v-for="(user,index) in users">
                {{index+1}},{{user.id}},{{user.name}},{{user.age}}
            </li>
        </ul>
    </div>
</body>
</html>


+ v-on
 用来绑定事件，用法：v-on:事件="函数"


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用指令：v-on</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{  //存储数据
                    arr:[12,34,45,23,5]
                },
                methods:{ //存储方法
                    show:function(){
                        console.log('show方法');
                    },
                    add(){
                        // console.log(this); //this表示当前vue实例
                        // console.log(this===vm); //true
                        this.arr.push(666); //使用this访问当前实例中的成员
                        // this.show();
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!-- <button onclick="show()">点我</button> -->
        <button v-on:click="show">点我</button>
        <button v-on:click="add()">向数组中添加一个元素</button>
        <br>
        {{arr}}
        <hr>
        
        <button v-on:mouseover="show">鼠标经过</button>
        <button v-on:dblclick="show">鼠标双击</button>
    </div>
</body>
</html>
  • v-show/v-if
    用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建，与angular中类似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用指令：v-show</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{ 
                    flag:true
                },
                methods:{ 
                    change(){
                        this.flag=!this.flag;
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!-- <button v-on:click="change">隐藏</button> -->
        <button v-on:click="flag=!flag">隐藏</button>

        <hr>
        <div style="width: 100px;height: 100px; background-color: red" v-if="flag">欢迎来到南京网博</div>
    </div>
</body>
</html>

四、 事件和属性

1. 事件

1.1 事件简写


v-on:click=""    
简写方式 @click=""

1.2 事件对象$event


console.log(e.target.innerHTML); //DOM对象
console.log(this); //当前Vue实例
包含事件相关信息，如事件源、事件类型、偏移量
target、type、offsetx

1.3 事件冒泡


阻止事件冒泡：
    a)原生js方式:e.stopPropagation();依赖于事件对象
    b)vue方式，不依赖于事件对象
        @click.stop

1.4 事件默认行为


阻止默认行为：
    a)原生js方式:e.preventDefault();依赖于事件对象
    b)vue方式：@click.prevent

1.5 键盘事件


原生：console.log(e.keyCode);
     if(e.keyCode==13){
        console.log('您按了回车');
     }
回车：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up

默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名

1.6 事件修饰符


.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

2. 属性

2.1 属性绑定和属性的简写


v-bind 用于属性绑定， v-bind:属性=""

属性的简写：
    v-bind:src="" 简写为 :src=""

2.2 class和style属性


绑定class和style属性时语法比较复杂：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class和style属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{
                    bb:'aa',
                    dd:'cc',
                    flag:true,
                    num:-2,
                    hello:{aa:true,cc:true},
                    xx:{color:'blue',fontSize:'30px'},
                    yy:{backgroundColor:'#ff7300'}
                }
            });
        }
    </script>
    <style>
        .aa{
            color:red;
            font-size:20px;
        }
        .cc{
            background-color:#ccc;
        }
    </style>
</head>
<body>
    <div id="itany">
        <!-- 
            class属性
         -->
        <!-- <p class="aa">南京网博</p> -->  <!-- 可以访问，普通css方式 -->

        <!-- <p :class="aa">南京网博</p> --> <!-- 不可以，Vue的属性绑定时不能直接css样式 -->

        <!-- 方式1:变量形式 -->
        <!-- <p :class="bb">南京网博</p> -->

        <!-- 方式2：数组形式，同时引用多个 -->
        <!-- <p :class="[bb,dd]">南京网博</p> -->

        <!-- 方式3：json形式，常用！！！ -->
        <!-- <p :class="{aa:true,cc:flag}">南京网博</p> -->
        <!-- <p :class="{aa:num>0}">南京网博</p> -->

        <!-- 方式4：变量引用json形式 -->
        <!-- <p :class="hello">南京网博</p> -->
        
        <!-- 
            style属性
         -->
         <p :style="[xx,yy]">itany</p>

    </div>
</body>
</html>

五、 模板

1. 简介


Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中
也称为Mustache语法

2. 数据绑定的方式


a.双向绑定
    v-model
b.单向绑定    
    方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
    /* 必须配置css样式，否则不生效 */
    [v-cloak]{ //属性选择器
        display:none;
    }
    <h3>aaa<span v-cloak>{{msg}}</span></h3>
    
    方式2：使用v-text（等价 {{}}，但不会出现闪烁问题 ）、v-html

3. 其他指令


v-once 数据只绑定一次
v-pre 不编译，直接原样显示

六、 过滤器

1. 简介


用来过滤模型数据，在显示之前进行数据处理和筛选
语法：{{ data | filter1(参数) | filter2(参数)}}

2. 关于内置过滤器


vue1.0中内置许多过滤器，如：
    currency、uppercase、lowercase
    limitBy
    orderBy
    filterBy
vue2.0中已经删除了所有内置过滤器，全部被废除
如何解决：
    a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
    b.使用自定义过滤器

3. 自定义过滤器


分类：全局过滤器、局部过滤器

3.l 自定义全局过滤器


使用全局方法Vue.filter(过滤器ID,过滤器函数)

3.2 自定义局部过滤器


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义过滤器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        /**
         * 自定义全局过滤器
         */
        Vue.filter('addZero',function(data){
            // console.log(data);
            return data<10?'0'+data:data;
        });
        /*Vue.filter('number',(data,n) => {
            // console.log(data,n);
            return data.toFixed(n);
        });*/
        Vue.filter('date',data => {
            let d=new Date(data);
            return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
        });
        

        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{
                    currentTime:Date.now()
                },
                filters:{ //局部过滤器
                    number:(data,n) => {
                        return data.toFixed(n);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!-- <h3>{{3 | addZero}}</h3> -->
        
        <!-- 课后作业：自己实现toFiexed()四舍五入的功能 ，toFixed 不稳定-->
        <h3>{{12.345678 | number(2)}}</h3>
        <!-- <h3>{{12.045 | number(2)}}</h3> -->

        <h3>{{currentTime | date}}</h3>
    
    </div>
</body>
</html>

下一篇：Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

参考Vue教学视频：Vue.js 2.0之全家桶系列视频课程（vue、vue-router、axios、vuex）
笔记代码

原文地址：https://segmentfault.com/a/1190000012934686

posted @ 2018-11-13 14:27  sfornt  阅读(340)  评论(0)  编辑  收藏  举报