简介

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  	 <title>第一个实例</title>
  	 <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
 	  <h1>{{message}}</h1>
</div>
<script type="text/javascript">
 	  var vm = new Vue({
 	     el : '#box',
  	     data : {
  	          message : 'I Like Vue!'
  	     }
 	 });
</script>
</body>
</html>

首先引入Vue文件。div块里的message变量与vuedata中的message变量相关联，改变data里message值就会同步改变页面的内容。注意在创建Vue实例后加上一个分号。message里的内容必须是单引号包含的，不能是双引号。

  1. var为声明变量
  2. //是注释

基础特性

Vue实例和选项

在创建对象实例时，可以在构造函数中传入一个选项对象。选项对象包括挂载元素、数据、方法、生命周期钩子函数。

挂载元素

Vue实例中的el选项为实例本身提供挂载元素。定义挂载元素后接下来的全部操作都在该元素里进行，元素外部不受影响。

即el是绑定的由id标识的div块，后续的实例操作也是仅仅操作那一个div，而不影响另外的div。

<div id="box" class="box"></div>
这里挂载元素有三种方式：el:'#box'，el:'.box'，el:'div'。

数据

使用data选项定义数据，数据可以绑定到实例对应的模板(即div)中。示例如下：

<div id="box">
    <h1>网站名称：{{name}}</h1>
    <h1>网站地址：{{url}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            name : 'ifunan',
          url : 'www.ifunan.cn'
        }
    });
</script>

首选创建了一个Vue实例vm，模板中{{name}}用于输出name属性值，{{url}}用于输出url属性值。即data数据与DOM进行了关联

  • 放在双大括号标签内的文本称为绑定表达式
  • 在创建Vue实例时，如果给data赋值一个对象，那么Vue实例会代理data对象中所有的属性。
    当属性值发生变化，HTML视图也会发生相应变化。所以data对象中定义的属性称为响应式属性。示例如下：
1
2
3
4
5
6
7
8
9
10
11
<div id="box">
    <h1>网站名称：{{name}}</h1>
    <h1>网站地址：{{url}}</h1>
</div>
<script type="text/javascript">
    var data = {name:'ifunan',url:'www.ifunan.cn'};
    var vm = new Vue({
        el : '#box',
        data : data,
    });
</script>

注：只有在对象实例里的数据才是响应式的。

方法

使用methods选项定义方法，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="box">
    <h3>{{showInfo()}}</h3>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            name : 'ifunan',
            url : 'www.ifunan.cn',
        },
        methods : {
            showInfo : function () {
                return this.name + ': ' +this.uri;
            }
        }
    });
</script>
  1. 调用方法和使用data属性值相同，在div块里使用两个{{方法名}}包括住方法。
  2. methods和data是平级的，所以在data写完后加上一个逗号，下面写方法。（data和methods在格式上有很多相似之处）
  3. return写完后要加上一个分号;

生命周期钩子函数

数据绑定

建立数据绑定后，数据和视图会相互关联，当数据发生变化时，视图会自动更新。

插值

文本插值

文本插值是数据绑定最基本的形式，双大括号标签{{}}，示例如下：

1
2
3
4
5
6
7
8
9
10
11
<div id="box">
    <h2>{{name}}</h2>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            name : 'vue.js',
        }
    });
</script>

此处将{{name}}与data里的name属性进行了绑定，当name属性发生了变化，{{name}}也将一起发生变化

如果只渲染一次数据，可以使用单次插值：v-once指令，即在第一次插入文本后，当数据对象中属性值发生变化时，{{name}}并不会发生变化。示例如下：

<div id="box">
    <h2 v-once>hello {{name}}</h2>
</div>

插入HTML（v-html指令）

在双大括号标签{{}}里的值会当作普通文本处理。如果想在标签里再插入一个HTML标签，可以使用v-html，示例如下：

1
2
3
4
5
6
7
8
9
10
11
<div id="box">
    <p v-html="message"></p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            message : '<div>科技是第生产力</div>',
        }
    });
</script>

注意： v-html是在标签里使用等号；
标签使用双引号包含，而非双大括号

属性（v-bind指令）

先简单介绍一下HTML属性(标签和元素一个意思）：

  1. 属性提供一个标签/元素的补充信息
  2. 属性总是在开始标签/元素中指定
  3. 属性以键值对形式出现，比如键名="键值"
    eg:<a href="http://www.baidu.com">This is a link</a>
    在这里<a>是开始标签，</a>是结束标签；href=是标签<a>的属性

下面开始介绍vue的属性

要为HTML标签绑定属性，不能直接使用文本插值的方式。需要使用v-bind指令对属性进行绑定。示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="box">
    <h1>{{message}}</h1>
    <a v-bind:href="url">百度链接</a>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            message : '一个链接页面',
            url : 'https://www.baidu.com/',
        }
    });
</script>

在上述例子中，使用v-bind绑定<a>标签的href属性，href属性的值将在data里面去寻找。

注： v-bind:href可以缩写为:href；并且v-bind可以绑定任何属性

表达式

在双大括号标签中进行数据绑定时，标签中的内容可以是一个JavaScript表达式，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="box">
    {{number + 10 }}<br>
    {{boo ? '真的':'假的'}}<br>
    {{str.toLowerCase()}}
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            number: 10,
            boo: true,
            str: 'MJH MY LOVE'
        }
    });
</script>

结果：20
真的
mjh my love

过滤器

简单的表达式可能无法实现需要经过复杂计算的数据绑定，这时可以使用过滤器进行处理。

过滤器作用：自定义的过滤器可以对文本进行格式化

使用过滤器的两种方法：

  1. 在双大括号插值标签中：{{ message | myfilter }}，第一个参数是绑定值，第二个参数是过滤器ID。
  2. 在v-bind指令中： <div v-bind:id="rawId | formatID"></div>

定义过滤器的两种方法：

  1. 使用全局方法**Vue.filter()**定义
  2. 使用选项对象中的filters选项定义

Vue.filter()定义全局过滤器

使用全局方法Vue.filter()过滤器需要定义在创建Vue实例之前

Vue.filter('ID',function(){})

第一个参数： 过滤器的ID，为自定义过滤器的唯一标识，使用单引号括起来

第二个参数： 具体的过滤器函数，此函数以表达式的值作为第一参数，再将接收到的参数格式化为想要的结果。

过滤器中的function()的第一个参数，已经被规定死了，永远都是 过滤器管道符前面 传递过来的数据。示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div id="box">
    <span>{{date | nowdate}}</span>
</div>
<script type="text/javascript">
    Vue.filter('nowdate', function (value) {
        var year = value.getFullYear();     //当前年份
        var month = value.getMonth()+1;     //当前月份(索引从0开始所以+1)
        var date = value.getDate();         //当前日
        var day = value.getDay();           //当前星期(数字形式)
        var week = "";
        switch (day) {
            case 1:
                week = "星期一";
                break;
            case 2:
                week = "星期二";
                break;
            case 3:
                week = "星期三";
                break;
            case 4:
                week = "星期四";
                break;
            case 5:
                week = "星期五";
                break;
            case 6:
                week = "星期六";
                break;
            default:
                week = "星期天";
                break;
        }
        return "今天是：" + year + "年" + month + "月" + date + "日" + week;
    });
    var vm = new Vue({
        el: '#box',
        data: {
            date: new Date()
        }
    });
</script>

注：Vue.filter()里的过滤器ID需要单引号包括起来；里面每一句写完用分号;结束

filters定义本地过滤器

  • 在filters定义的过滤器包括过滤器名称和过滤器函数两部分，其中过滤器函数以表达式的值作为第一个参数。示例如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="box">
    <ul>
        <li><a href="#"><span>[特惠]</span>{{title1 | subStr}}</a></li>
        <li><a href="#"><span>[公告]</span>{{title2 | subStr}}</a></li>
        <li><a href="#"><span>[特惠]</span>{{title3 | subStr}}</a></li>
        <li><a href="#"><span>[公告]</span>{{title4 | subStr}}</a></li>
        <li><a href="#"><span>[特惠]</span>{{title5 | subStr}}</a></li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            title1: '商城爆品1分秒杀',
            title2: '商城与长春市签署战略合作协议',
            title3: '洋河年末大促，低至两件五折',
            title4: '华北、华中部分地区配送延迟',
            title5: '家电狂欢千亿礼券 买1送1!',
        },
        filters: {
            subStr: function (value) {
                if (value.length > 10) {
                    return value.substr(0, 10) + "...";
                } else {
                    return value;
                }

            }
        },
    });
</script>

  • 多个过滤器可以串联使用，格式如下:
    {{message | filterA | fileterB}}
    首先message的值作为参数去执行filterA过滤器的规则，完成之后的结果作为参数再去执行filterB

  • 过滤器实质是一个函数，所以也可以接受额外的参数，格式如下：
    {{message | filterA(arg1, arg2)}}
    message的值作为第1个参数，arg1为第2个参数，arg2为第3个参数传递刚给过滤器filterA，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="box">
    <span>{{price | formatPrice('$')}}</span>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            price : 199,
        },
        filters : {
            formatPrice : function (value,symbol) {
                return symbol + value.toFixed(2) //保留两位小数
            }
        },
    });
</script>

指令

  • 绑定表达式：放在双大括号标签内的文本称为绑定表达式
  • 指令是带有v-前缀的特殊属性，指令的值限定为绑定表达式
  • 指令用于在绑定表达式的值发生改变时，将这种数据的变化应用到DOM上。以上三条示例如下：
    <p v-if="show">ifunan</p>

还有一些指令语法略有不同，能接收参数和修饰符

  1. 参数
    如v-bind指令、v-on指令能够接收一个参数。该参数位于指令和表达式之间，并用冒号分隔
    v-bind指令示例如下：
    <img v-bind:src="imageSrc">
    上述示例中，src即为参数，imageSrc即为表达式，通过v-bind指令将<img>元素的src属性与表达式imageSrc的值进行绑定

  2. 修饰符
    修饰符是在参数后面，以半角句点符号指明的特殊后缀。示例如下：
    <form v-on:submit.prevent="onSubmit"></form>
    上述示例中，当提交表单时会调用event.preventDefault()方法阻止浏览器默认行为。