Vue.js 快速入门

概念

Vue.js 的工作之一就是将要显示在 HTML 上的数据映射到一个 JS 对象,HTML 的数据与这个 JS 对象的属性一一对应,修改对象的属性就相当于修改 HTML 上的数据,两者任一发生变化,另一个会同步更新。

在 Vue.js 中,将上述 JS 对象称为 视图模型,对应的 HTML 则称为 视图,这种同步变化的行为称为数据的 双向绑定

绑定标签的 text

首先要使用 双大括号 声明视图上有哪些数据,最简单的数据就是标签的 text

<div id="app">
    <h1>{{ message }}</h1>
</div>

上面 HTML 代码中,声明了一个名为 message 数据,该数据是 h1 标签的 text

然后通过 构造函数 Vue() 来创建相应的视图模型(所有视图模型都是 Vue() 的实例)。

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello, world!',
    },
});

该函数只需要一个参数,对象类型,用来传递一些选项:

  • el:必选,CSS 选择器、DOM 节点或函数,用于声明视图模型对应的视图;
  • data:可选,对象类型,用于指出视图有哪些数据,一个属性就对应一个数据,属性值就是初始值。

渲染后,视图中的 {{ message }} 就会被替换成 data 对象中对应属性的值 'Hello, world!'

<div id="app">
    <h1>Hello, world!</h1>
</div>

此后,通过实例 app 就可以读写视图上的数据。

实际上,Vue() 实例会代理 data 选项的属性,因此可以把 data 的属性当作 Vue() 的属性来读写。例如,在JS 控制台中,执行下面命令,就可以修改数据 message 的值:

app.message = 'Hello, Vue.js!';

注意到修改完 app.message 后,页面上的文字也跟着改变,印证了视图模型和视图之间的绑定关系。两者之一发生变化,另一个也会跟着改变。

此外,传递给构造函数 Vue() 的选项也会成为实例 app 的属性,但要加上美元符号 $ 前缀,以便和 data 选项的属性区分开来。例如,访问 app.$el 就可以得到实例所对应的 DOM 元素。

app.$el
// <div id=​"app">​…​</div>​

绑定标签的 HTML

如果输出的是 HTML,而非普通文本,可以给标签添加 v-html 属性,值就是数据的名称。

<div id="app">
    <span v-html="link"></span>
</div>

<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
        link: '<a href="/login">Login</a>',
    },
});
</script>

上例中的 link 会被渲染成一个可以点击的 a 标签,成为 span 标签的 HTML。

<div id="app">
    <span><a href="/login">Login</a></span>
</div>

绑定标签的属性

视图的数据还可以是标签某个属性的值。绑定的方式是给属性添加 前缀 v-bind:

<div id="app">
    <a v-bind:href="url">Login</a>
</div>

上例声明了一个名为 url 的数据,它是 a 标签的 href 属性的值。

var app = new Vue({
    el: '#app',
    data: {
        url: '/login',
    },
});
<a href="/login">Login</a>

绑定事件

还可以向 Vue() 函数传递 methods 选项,该选项用于存放函数类型的数据。这些方法在调用时,伪变量 this 指向所在的 Vue 实例。

var app = new Vue({
    el: '#app',
    data: {
        name: 'John',
    },
    methods: {
        say: function () {
            return 'Hello, ' + this.name;
        },
    },
});

这些函数可以直接在视图中调用,结果就是函数的返回值。

<div id="app">
    <p>{{ say() }}</p>
</div>
<div id="app">
    <p>Hello, John</p>
</div>

除了作为普通函数调用外,还可以作为事件的处理函数。绑定事件的方式是为标签添加 属性 v-on:xxx,其中 xxx 就是事件名称。

<div id="app">
    <button v-on:click="handleClick">点击</button>
</div>

上例为 button 标签绑定了一个点击事件,指定事件处理函数的函数名为 handleClick。这时就需要在 methods 选项中添加 handleClick() 方法。

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello, world!',
    },
    methods: {
        handleClick: function () {
            alert(this.message);
        },
    },
});

之后,只要触发 button 标签的点击事件,methods 选项中的 handleClick() 方法就会被调用。

Vue.js 允许在函数名后面跟上小括号,以传递参数。如果要将 JavaScript 原生事件对象作为参数传递,可以直接使用 变量 $event

<div id="app">
    <button v-on:click="handleClick(1, $event)">点击</button>
</div>

<script type="text/javascript">
var app = new Vue({
    el: '#app',
    methods: {
        handleClick: function (a, b, c) {
            console.log(a); // 1
            console.log(b); // MouseEvent {isTrusted: true, screenX: 37, screenY: 119, clientX: 37, clientY: 24, …}
            console.log(c); // undefined
        },
    },
});
</script>

如果只写函数名,而函数的定义又带有形参,则默认会向第一个参数传入事件对象。

<div id="app">
    <button v-on:click="handleClick">点击</button>
</div>

<script type="text/javascript">
var app = new Vue({
    el: '#app',
    methods: {
        handleClick: function (a, b, c) {
            console.log(a); // MouseEvent {isTrusted: true, screenX: 37, screenY: 119, clientX: 37, clientY: 24, …}
            console.log(b); // undefined
            console.log(c); // undefined
        },
    },
});
</script>

计算属性

computed 选项 也用于存放函数类型的数据,与 methods 的区别在于,调用 computed 中的函数时,只需给出函数名,不需要小括号。

<div id="app">
    <p>{{ reversedText }}</p>
</div>

<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
        text: '123456',
    },
    computed: {
        reversedText: function () {
            return this.text.split('').reverse().join(''); // "654321"
        },
    },
});
</script>

上面代码,视图中的 {{ reversedText }} 看起来好像是 data 中的一员,而不像函数调用,因此它们被称为 计算属性

讨论数量: 2

写的不错,学习了。

2个月前

@tim-laravel 感谢,已修正

2周前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!