一、Vue.js介绍

Vue.js也称为Vue,读音类似view,错误读音v-u-e,由华人尤雨溪开源并维护。

Vue有以下特点:

  • 是一个构建用户界面的框架
  • 是一个轻量级MVVM(Model-View-ViewModel)框架,和angular、react类似
  • 数据驱动+组件化的前端开发(核心思想)
  • 通过简单的API实现响应式的数据绑定组合的视图组件
  • 更容易上手、小巧

参考:官网文档

二、第一个vue程序

 <div id="main">
    {{msg}}  //字符串模板
</div>

<script src="./js/vue.js"></script>   //引入vue文件
<script>
    new Vue({   //创建vue实例
        el: '#main',  //绑定元素
        data: {
            msg: 'hello Vue.js'
        },
        methods:{  //用于存放方法
        }
    })
</script>

以上就是一个非常简单的vue程序。绑定元素这里不但可以使用id选择器,我们还可以使用类选择器或者标签选择器。但是,vue2.0中不允许将vue实例挂在到html或者body元素上。

三、常用指令

指令用来扩展HTML功能。vue内置了很多指令。

1、v-model

实现双向数据绑定,实时监控数据变化,一般用于表单。

 <div id="main">
    <input type="text" v-model="content">
    
    <br> {{content}}
</div>

<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#main',
        data: {
            content: ''
        }
    })
</script>

在这里,使用v-model指令将输入框的值与vue实例中的content进行绑定。此后,二者中的任一值发生变化,另一个值都会跟随变化。

2、v-for

用于遍历数组、对象等。

<div id="main">
    <ul>
        <li v-for="item in arr">  //遍历数组
            {{item}}
        </li>
    </ul>
    
    <ul>
        <li v-for="item in obj">   //遍历对象
            {{item}}
        </li>
    </ul>
    
    <ul>      
        <li v-for="(value,key) in obj">   //键值循环,数组也适用,注意key在后面
            {{key}}----{{value}}
        </li>
    </ul>
</div>

<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#main',
        data: {
            arr: [1, 2, 3, 4, 5, 6],
            obj: {
                name: 'hedawei',
                age: 22,
                gender: 'man'
            }
        }
    })
</script>

3、v-on

用于绑定事件,用法:v-on:事件="函数"。

示例:点击事件

<div id="main">
        <button type="button" v-on:click="showHello()">点击显示</button>
        <br>
        {{msg}}
</div>

<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#main',
        data: {
            msg:''
        },
        methods: {
            showHello() {
                this.msg = 'Hello Vue.js';
            }
        }
    })
</script>

this指向当前vue实例,由此可获取实例的其他属性。除了点击事件外还有很多其他事件,具体参考官网API。

4、v-show

用来显示或隐藏元素,v-show是通过display实现。当v-show的值为true时显示,为false时隐藏。

<div id="main">
    <button type="button" v-on:click="change()">隐藏</button>
    <div style="width:100px;height:100px;background:red" v-show="flag"></div>
</div>

<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#main',
        data: {
            flag: true
        },
        methods: {
            change() {
                this.flag = !this.flag;
            }
        }
    })
</script>

四、事件

之前说了一些关于事件的指令,这里详细学习一下事件的相关知识。

1、事件简写

之前的事件都是这样的写法:v-on:click="showHello()",vue提供了一种简写方式:
@click="showHello()"

2、事件对象$event

我们可以通过事件对象取得事件相关信息,如事件源、事件类型、偏移量。

下面这个例子通过事件对象取得按钮的值:

 <div id="main">
    <button type="button" @click="print($event)">点击显示按钮的值</button>
        <br> {{msg}}
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#main',
            data: {
                msg: ''
            },
            methods: {
                print(e) {
                    this.msg = e.target.innerHTML;
                }
            }
        })
    </script>

3、事件冒泡与事件默认行为

这里需要讨论阻止事件冒泡与阻止默认行为,原生js阻止事件冒泡首先得取得事件对象,然后调用事件对象的stopPropagation方法。在vue里,则不需要依赖于事件对象,只需要调用相应的事件修饰符stop即可:

@click.stop = "print()"

阻止事件默认行为和阻止事件冒泡基本一致,在vue里也有十分便利的操作方法:

@click.prevent = "print()"

4、键盘事件

vue里内置了一些键盘事件,便于开发者操作。语法如下:

@keydown.13 = "print()"
@keydown.enter = "print()"

除了回车事件外,还有很多其他键盘事件,例如下:@keydown.38="print()"。还有一些其他键盘事件,具体参考官方文档。

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

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase 不可用
  mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用双引号括起来
  "media-play-pause": 179,
  up: [38, 87]
}

除了stoppreventkeyCode这些事件修饰符以外,还有一些比较常用:

  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。

五、属性

vue提供了绑定属性的方法:v-bind:属性名="",这样我们即可动态的改变属性值。

1、属性简写

属性和事件一样,也有简写方式::属性名=""

2、class属性和style属性

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

(1)变量形式

html部分:

<p :class="myClass">Hello vue.js</p>

对应的vue的data部分:

data:{
    myClass:className
}

(2)数组形式,同时引入多个类

html部分:
<p :class="[myClass1,myClass2]">Hello vue.js</p>

对应的vue的data部分:

data:{
    myClass1:className1,
    myClass2:className2,
}

(3)json形式(常用)

html部分:
<p :class="{className1:true,className2:false}">Hello vue.js</p>

(4)变量引用json形式

html部分:
<p :class="myClass">Hello vue.js</p>

对应的vue的data部分:

data:{
    myClass:{
        className:true
    }
}

style的用法和class的用法基本一致,但是不常用。

六、模板

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

1、数据绑定的方式

(1)双向数据绑定

使用v-model指令,前面已经学习过。

(2)单向数据绑定

a.使用两对大括号{{}}

这个在之前也经常使用,但是有一个缺点,就是vue实例需要长时间编译时会在页面中出现{{}}(闪烁现象)。vue提供了一个解决办法:使用v-cloak配合css。

//html内容
<div id="app" v-cloak>
  {{msg}}
</div>

//css内容
[v-cloak] {
 display: none;
}

b.使用指令v-text、v-html

v-text也可达到与使用v-cloak相同的效果。

//html内容
<div id="app" v-text="msg">
</div>

v-html会将文本中的html解析为html标签,然后渲染到页面中。

//html内容
<div id="app" v-html="msg">
</div>

//vue实例中data部分内容
 data: {
    msg: 'hello<mark>vue.js<mark>'
 },

这里的vue.js会有一个黄色的背景颜色。

七、过滤器

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

vue1.0中内置了很多过滤器,但是在2.0中全部删除了。使用过滤器我们可以通过使用第三方库:lodash、date-fns日期格式化、accounting.js货币格式化。或者我们可以自定义过滤器。

1、自定义过滤器

过滤器分为全局过滤器和局部过滤器。

(1)全局过滤器

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

示例:

<p>{{8|addZero}}</p>//数据会自动作为传过去

 Vue.filter('addZero', data => {
    return data > 10 ? data : '0' + data;
 });
 

有时过滤器也要传递自己的参数:

<p>{{12.3456|number(3)}}</p>

 Vue.filter('number', (data,n) => {
    return data.toFixed(n);
 });
 

(2)局部过滤器

局部过滤器的使用方法与全局过滤器的使用方法一致。

不过过滤器写在vue实例中filters选项中。

new Vue({
    el:'#app',
    data:{},
    filters:{
        number:data => {
            //具体操作
        }
    }
})

未完待续。

载入中...
间阳幕宾 间阳幕宾

182 声望