<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
</script>
</body>
</html>
模板二
<template>
<div></div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json,
// 例如：import 《组件名称》 from '《组件路径》';
export default {
// import 引入的组件需要注入到对象中才能使用
components: {},
props: {},
data () {
// 这里存放数据
return {}
},
// 计算属性 类似于 data 概念
computed: {},
// 监控 data 中的数据变化
watch: {},
// 方法集合
methods: {},
// 生命周期 - 创建完成（可以访问当前 this 实例）
created () {
},
// 生命周期 - 挂载完成（可以访问 DOM 元素）
mounted () {
},
// 生命周期 - 创建之前
beforeCreate () {
},
// 生命周期 - 挂载之前
beforeMount () {
},
// 生命周期 - 更新之前
beforeUpdate () {
},
// 生命周期 - 更新之后
updated () {
},
// 生命周期 - 销毁之前
beforeDestroy () {
},
// 生命周期 - 销毁完成
destroyed () {
},
// 如果页面有 keep-alive 缓存功能，这个函数会触发
activated () {
}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共 css 类
</style>
