Vue.js 入门教程

什么是 Vue.js?

Vue.js 是用于构建交互式的 Web 界面的库。

Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。


Vue.js 安装

独立版本

直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

创建第一个 Vue 应用

接下来我们创建第一个 Vue 应用。

View 层 - HTML 代码如下:


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



Model 层 - JavaScript 代码如下(需放在指定的HTML元素之后):


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



完整代码:


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>{{标题title}}</title>

</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
<!-- JavaScript 代码需要放在尾部(指定的HTML元素之后) -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
message:'Hello World!'
}
});
</script>
</body>
</html>


标签:none