Vue.js 快速入门

引言

对于初学者来说,学习 Vue.js 最好是在一个简单的 HTML 页面中进行,因为这种情况下,只需要用 script 标签加载 Vue.js 的一个 js 文件,就能使用 Vue.js 了。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue.js 将 HTML 元素映射为 JS 对象,HTML 元素包含的数据(包括元素的内容和属性等)与这个 JS 对象的属性一一对应,修改对象的属性就是在修改 HTML 元素的内容或属性,并且修改其中一个,另一个会跟着改变。

上述 JS 对象称为 视图模型,对应的 HTML 称为 视图,这种同步变化的机制称为 双向绑定

绑定元素的文本内容

首先要给出一个标识符,放在 双大括号 中,充当元素的文本内容。

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

上面 HTML 代码中,声明了一个名为 message 的数据,该数据是 h1 标签的文本内容。

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

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

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

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

渲染后,视图中的 {{ message }} 就会被替换成属性 message 的值 '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>

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

上例将 a 标签的 href 属性的值与名为 url 的数据绑定。

渲染后,a 标签的 href 属性就会等于属性 url 的值。

<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 中的一员,而不像函数调用,因此被称为 计算属性

讨论数量: 1

写的不错,学习了。

8个月前 评论

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