Vue 简单使用模板

 
<!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>

　　

posted @ 2021-11-22 14:05  非帆丶  阅读(286)  评论(0)    收藏  举报