抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

本文主要内容

  • 插值表达式{{}} - v-cloak - v-text - v-html - v-bind - v-on - 举例：文字滚动显示（跑马灯效果） - v-on的事件修饰符 ## Vue初体验 新建一个空的项目，引入vue.js文件。写如下代码： 
    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
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--1、导入Vue的包-->
        <script src="vue2.5.15.js"></script>
    </head>
    <body>
    <!--这个div区域就是MVVM中的 View-->
    <div id="div1">
        {{name}}
    </div>
    </body>

    <script>
        // 2、创建一个Vue的实例
        //new出来的对象就是MVVM中的 View Module（调度者）
        var myVue = new Vue({
            el: '#div1', //当前vue对象将接管上面的div1区域
            data: {//data就是MVVM中的 module
                name: 'smyhvae'
            }
        });
    </script>
    </html>
    显示效果： ![](http://img.smyhvae.com/20180313_0955.png) 如果我们在控制台输入`myVue.$data.name = 'haha'`，页面会**自动更新**name的值。意思是，当我们直接修改data数据，页面会自动更新，而不用去操作DOM。 下面来讲一下Vue的各种系统指令。 ## 插值表达式{{}}

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：

1
<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。
无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会自动更新。

{{}}`对JavaScript 表达式支持，例如： 

1
2
3
4
5