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



&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

    &lt;meta charset="UTF-8"&gt;

    &lt;title&gt;Hello World&lt;/title&gt;

    &lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;

    &lt;script&gt;

        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'

                }

            });

        }

    &lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;div id="itany"&gt;

        {{msg}} &lt;!-- 两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中 --&gt;

    &lt;/div&gt;

    &lt;h3&gt;

        {{msg}}

    &lt;/h3&gt;

&lt;/body&gt;

&lt;/html&gt;

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
双向数据绑定，一般用于表单元素



&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

    &lt;meta charset="UTF-8"&gt;

    &lt;title&gt;常用指令：v-model&lt;/title&gt;

    &lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;

    &lt;script&gt;

        window.onload=function(){

            new Vue({

                // el:'.itany',

                el:'div', //vue2.0中不允许将vue实例挂载到&lt;html&gt;或&lt;body&gt;元素，在vue1.0中是可以的

                data:{

                    name:'', //即使没有值，也不能省略，报错

                    age:21,

                    flag:true,

                    nums:[12,4,23,5],

                    user:{id:9527,name:'唐伯虎'}

                }

            });

        }

    &lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;!-- &lt;div id="itany"&gt; --&gt;

    &lt;!-- &lt;div class="itany"&gt; --&gt;

    &lt;div&gt;

        用户名：&lt;input type="text" v-model="name"&gt;

        &lt;br&gt;

        {{name}} &lt;br&gt;

        {{age}} &lt;br&gt;

        {{flag}} &lt;br&gt;

        {{nums}} &lt;br&gt;

        {{user}}

    &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

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



&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

    &lt;meta charset="UTF-8"&gt;

    &lt;title&gt;常用指令：v-for&lt;/title&gt;

    &lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;

    &lt;script&gt;

        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}

                    ]

                }

            });

        }

    &lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;div id="itany"&gt;

        &lt;!-- {{arr}} --&gt;

        &lt;ul&gt;

            &lt;!-- 普通循环 --&gt;

            &lt;!-- &lt;li v-for="value in arr"&gt;{{value}}&lt;/li&gt; --&gt;

            &lt;!-- &lt;li v-for="value in user"&gt;{{value}}&lt;/li&gt; --&gt;

            &lt;!-- 键值循环 --&gt;

            &lt;!-- &lt;li v-for="(v,k) in arr"&gt;{{k}}={{v}}&lt;/li&gt; --&gt;

            &lt;!-- &lt;li v-for="(v,k) in user"&gt;{{k}}={{v}}&lt;/li&gt; --&gt;

            &lt;!-- 可以直接循环包含重复数据的集合，可以通过指定:key属性绑定唯一key，当更新元素时可重用元素，提高效率，类似于vue1.0中track-by --&gt;

            &lt;!-- &lt;li v-for="(v,k) in arr2" :key="k"&gt;{{v}}&lt;/li&gt; --&gt;

            &lt;li v-for="(user,index) in users"&gt;

                {{index+1}},{{user.id}},{{user.name}},{{user.age}}

            &lt;/li&gt;

        &lt;/ul&gt;

    &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;



+ v-on

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



&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

    &lt;meta charset="UTF-8"&gt;

    &lt;title&gt;常用指令：v-on&lt;/title&gt;

    &lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;

    &lt;script&gt;

        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();

                    }

                }

            });

        }

    &lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;div id="itany"&gt;

        &lt;!-- &lt;button onclick="show()"&gt;点我&lt;/button&gt; --&gt;

        &lt;button v-on:click="show"&gt;点我&lt;/button&gt;

        &lt;button v-on:click="add()"&gt;向数组中添加一个元素&lt;/button&gt;

        &lt;br&gt;

        {{arr}}

        &lt;hr&gt;

        &lt;button v-on:mouseover="show"&gt;鼠标经过&lt;/button&gt;

        &lt;button v-on:dblclick="show"&gt;鼠标双击&lt;/button&gt;

    &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

v-show/v-if
用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建，与angular中类似



&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

    &lt;meta charset="UTF-8"&gt;

    &lt;title&gt;常用指令：v-show&lt;/title&gt;

    &lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;

    &lt;script&gt;

        window.onload=function(){

            let vm=new Vue({

                el:'#itany',

                data:{

                    flag:true

                },

                methods:{

                    change(){

                        this.flag=!this.flag;

                    }

                }

            });

        }

    &lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;div id="itany"&gt;

        &lt;!-- &lt;button v-on:click="change"&gt;隐藏&lt;/button&gt; --&gt;

        &lt;button v-on:click="flag=!flag"&gt;隐藏&lt;/button&gt;

        &lt;hr&gt;

        &lt;div style="width: 100px;height: 100px; background-color: red" v-if="flag"&gt;欢迎来到南京网博&lt;/div&gt;

    &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

四、事件和属性

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属性时语法比较复杂：



&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

    &lt;meta charset="UTF-8"&gt;

    &lt;title&gt;class和style属性&lt;/title&gt;

    &lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;

    &lt;script&gt;

        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'}

                }

            });

        }

    &lt;/script&gt;

    &lt;style&gt;

        .aa{

            color:red;

            font-size:20px;

        }

        .cc{

            background-color:#ccc;

        }

    &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;div id="itany"&gt;

        &lt;!--

            class属性

         --&gt;

        &lt;!-- &lt;p class="aa"&gt;南京网博&lt;/p&gt; --&gt;  &lt;!-- 可以访问，普通css方式 --&gt;

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

        &lt;!-- 方式1:变量形式 --&gt;

        &lt;!-- &lt;p :class="bb"&gt;南京网博&lt;/p&gt; --&gt;

        &lt;!-- 方式2：数组形式，同时引用多个 --&gt;

        &lt;!-- &lt;p :class="[bb,dd]"&gt;南京网博&lt;/p&gt; --&gt;

        &lt;!-- 方式3：json形式，常用！！！ --&gt;

        &lt;!-- &lt;p :class="{aa:true,cc:flag}"&gt;南京网博&lt;/p&gt; --&gt;

        &lt;!-- &lt;p :class="{aa:num&gt;0}"&gt;南京网博&lt;/p&gt; --&gt;

        &lt;!-- 方式4：变量引用json形式 --&gt;

        &lt;!-- &lt;p :class="hello"&gt;南京网博&lt;/p&gt; --&gt;

        &lt;!--

            style属性

         --&gt;

         &lt;p :style="[xx,yy]"&gt;itany&lt;/p&gt;

    &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

五、模板

1. 简介



Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据

模板就是{{}}，用来进行数据绑定，显示在页面中

也称为Mustache语法

2. 数据绑定的方式



a.双向绑定

    v-model

b.单向绑定

    方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决

    /* 必须配置css样式，否则不生效 */

    [v-cloak]{ //属性选择器

        display:none;

    }

    &lt;h3&gt;aaa&lt;span v-cloak&gt;{{msg}}&lt;/span&gt;&lt;/h3&gt;

    方式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 自定义局部过滤器



&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

    &lt;meta charset="UTF-8"&gt;

    &lt;title&gt;自定义过滤器&lt;/title&gt;

    &lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;

    &lt;script&gt;

        /**

         * 自定义全局过滤器

         */

        Vue.filter('addZero',function(data){

            // console.log(data);

            return data&lt;10?'0'+data:data;

        });

        /*Vue.filter('number',(data,n) =&gt; {

            // console.log(data,n);

            return data.toFixed(n);

        });*/

        Vue.filter('date',data =&gt; {

            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) =&gt; {

                        return data.toFixed(n);

                    }

                }

            });

        }

    &lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;div id="itany"&gt;

        &lt;!-- &lt;h3&gt;{{3 | addZero}}&lt;/h3&gt; --&gt;

        &lt;!-- 课后作业：自己实现toFiexed()四舍五入的功能 ，toFixed 不稳定--&gt;

        &lt;h3&gt;{{12.345678 | number(2)}}&lt;/h3&gt;

        &lt;!-- &lt;h3&gt;{{12.045 | number(2)}}&lt;/h3&gt; --&gt;

        &lt;h3&gt;{{currentTime | date}}&lt;/h3&gt;

    &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

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

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

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

秒客网

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

一、 Vue.js简介

1. Vue.js是什么

2.vue和angular的区别

2.1 angular

2.2 vue

二、起步

1. Hello World

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

三、常用指令

1. 什么是指令？

2. vue中常用的指令

四、事件和属性

1. 事件

1.1 事件简写

1.2 事件对象`$`event

1.3 事件冒泡

1.4 事件默认行为

1.5 键盘事件

1.6 事件修饰符

2. 属性

2.1 属性绑定和属性的简写

2.2 class和style属性

五、模板

1. 简介

2. 数据绑定的方式

3. 其他指令

六、过滤器

1. 简介

2. 关于内置过滤器

3. 自定义过滤器

3.l 自定义全局过滤器

3.2 自定义局部过滤器

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

相关文章

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

一、 Vue.js简介

1. Vue.js是什么

2.vue和angular的区别

2.1 angular

2.2 vue

二、起步

1. Hello World

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

三、 常用指令

1. 什么是指令？

2. vue中常用的指令

四、 事件和属性

1. 事件

1.1 事件简写

1.2 事件对象$event

1.3 事件冒泡

1.4 事件默认行为

1.5 键盘事件

1.6 事件修饰符

2. 属性

2.1 属性绑定和属性的简写

2.2 class和style属性

五、 模板

1. 简介

2. 数据绑定的方式

3. 其他指令

六、 过滤器

1. 简介

2. 关于内置过滤器

3. 自定义过滤器

3.l 自定义全局过滤器

3.2 自定义局部过滤器

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

相关文章

三、常用指令

四、事件和属性

1.2 事件对象`$`event

五、模板

六、过滤器