引言
对于初学者来说，学习 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
中的一员，而不像函数调用，因此被称为 计算属性
以上就是Vue.js 快速入门的详细内容
扫描下方二维码
获取web前端、学习资料视频