What is Vue.js ?
参考它的官网： cn.vuejs.org
Hello world
引入Vue
最直接的方法还是在html页面中引入js文件：
<head>
<meta charset="UTF-8" />
<title>Vue start</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
初始化Vue
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
使用Vue主要分为两步：
- 指定Vue的控制区域
- 指定对应需要渲染的数据
- 渲染数据到页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vue start</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {
message: "Hello, Vue World!"
}
}
})
</script>
</html>
以上代码首先引入了Vue：var app = new Vue({})，然后指定了Vue的控制区域：一个id为app的<div>标签，然后给定了数据message: 'Hello Vue!'，最后，通过插值语法渲染数据到页面上：{{ message }}。
注意，很多基础教程中，Vue里面的data的值直接给的是一个对象，如下所示，但是当以后使用Vue组件的时候，data的值一般都是函数，这里我们直接一步到位。
<script>
var app = new Vue({
el: '#app',
data: {
message: "Hello, Vue World!" // 直接使用一个对象
}
})
</script>
Top comments (0)