一、 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

Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器的更多相关文章

  1. vue 的基本语法和常用指令

    什么是vue.js Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...

  2. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  3. Vue专题-js常用指令

    vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍了vue.js的常用指令. vue.js常用指令 Vue.js使用方式及文本插值 Vue.js 使用了基于 HTML ...

  4. vue.js介绍，常用指令，事件，以及制作简易留言版

    一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...

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

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  6. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  7. 【Vue常用指令】

    目录 v-html v-text v-for v-if v-show v-bind v-on v-model 指令修饰符 计算与侦听属性 自定义属性 获取DOM元素 "@ *** Vue.j ...

  8. vue 快速入门、常用指令（1）

    1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 官方网站 中文:https://cn.vuejs. ...

  9. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

随机推荐

  1. vue项目使用简略总结

    1.利用iView Cli搭建项目结构2.搭建完毕之后将proxy.js和'Server.js'放置到node_modules\webpack-dev-server\lib目录下,以实现跨域访问公司平 ...

  2. Python学习笔记（1）Pycharm基本认识

    Pycharm的使用 集成开发环境(IDE,集成开发环境) VIM  #经典的linux下的文本编辑器 Pycharm,主要用于python开发的ide PyCharm常用快捷键 Ctrl + / # ...

  3. js区分ie不同版本

    方法1  js中 if(window.ActiveXObject)//判断浏览器是否属于IE { var browser=navigator.appName var b_version=navigat ...

  4. [Linux]第三部分-学习Shell和Shell脚本

    vim 高级的 vii o a 进入编辑模式 esc进入一般模式:wq离开alias vi='vim' 使用vim打开viv块选择 y复制反白,d删除反白在vi中打开一个文件后,可以使用 sp fil ...

  5. Android开发之使用BroadcastReceiver实现开机自己主动启动（源码分享）

    上一节已经介绍过BroadcastReceiver实现实时监听电量的功能,这节就来介绍一下假设实现开机自己主动启动的功能.这个比监听电量还简单不少 (1)在清单文件注冊权限 <uses-perm ...

  6. 积跬步，聚小流------Bootstrap学习记录(1)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  7. IOS-2-C语言和Objective-C语言衔接学习资料

    前言:在IOS学习中.通常会先学习一周的C语言,两周的Objective-C语言,这是今后开发的最基础最重要的部分,以下给大家分享一下培训课上的精简资料: C语言和Objective-C语言衔接学习资 ...

  8. linux：共享内存

    #include <sys/ipc.h> #include <sys/shm.h> #include <string.h> #include <stdio.h ...

  9. （素数求解）I - Dirichlet&#39;s Theorem on Arithmetic Progressions(1.5.5)

    Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit cid=1006#sta ...

  10. swift-初探webView与JS交互

    公司接下来的项目需要用swift内嵌h5来实现, 以前没有做过swift项目, 现在慢慢将所学的一点一滴记录一下 一个是怕自己忘了- =, 再就是希望大家看到能帮助我哈哈哈 前几天想要直接用swift ...