基础语法

Options API

<script>
  export default {
    // 组件注册
    components: { ..},

    // 数据监听
    watch: {
      key: {
        handler() {},
        flush: 'post'
      }
    }

    // 计算属性
    computed:{},

    /* 生命周期钩子 */
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {
        /* 在生命周期创建数据监听 */
        this.$watch('question', (newQuestion) => {})
    },
    beforeUpdate() {},
    updated() {},
    beforeDestroy(){},
    destroyed() {},

    // 单向数据流
    props: {
      template: {
        type: String,
        required: false,
        default:()=>{
          return ""
        },
        validator: function(value) {
          return [
            'syncing',
            'synced',
            'version-conflict',
            'error'
          ].indexOf(value) !== -1
        }
      }
    },

    // 响应式数据声明
    data() {
      return {}
    },

    // 函数声明
    methods: {},
  }
</script>
script>

HTML+CSS+JS

• JS 文件格式

  import Vue from "vue"
  
  //根实例创建语法
  // const app = new Vue({...})
  
  // 以对象形式创建
  const example = {
      el:'#xxxxx',        //html标签的 #xxx .xxx
      data:function(){
          return {
              msg:'test'
          }
      },
      methods:{
          name:function(){this.msg += '|||'},
      },
      template:'<div>hi {{ msg }}</div>', //模板字符串，函数
      render:()
  }
  
  export const app = new Vue(example)

• vue 组件形式编写

<template>
    <div>
        <SomeVueComments/>
        <p>
            {{ msg.split("".reverse().join('')) }}
      </p>
        <ul v-if="showTodo">
          <li
            v-for="todo in todos"  // 遍历 data.todos
            :key="todo.id"         // 通过id来排序
          >
            {{ todo.text }}
          </li>
        </ul>
    </div>
</template>

<script>
import SomeVueComments from "@/SomeDir/Some.vue"

import { mapGetters } from "vuex";


// 外部私有方法
function myPrivateFunction() {
  // ...
}

export default {
  /* 组件注册 */
  components: { SomeVueComments },

  /* 数据监视 */
  computed:{
    /* 通过mapGetters批量绑定数据 */
    ...mapGetters("Global", ["isHorizontal", "allLoadParams"]),
    ...mapGetters("Api", ["loadingData", "sceneData"]),
  },
  watch:{
      param1(newVal, oldVal){},
      param2: function(newVal, oldVal){},
      param3:{ handler(arg){}, deep:true}, // deep 表示深层的监听
      'object.key.subkey'(newVal, oldVal){}, // 键设置成用 "." 分隔的路径
  }

  /* 生命周期钩子 */
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy(){},
  destroyed() {},


  /* 数据传递 */
  props: ["propName"], // 不推荐，纯名字
  props: { title:String, age:Number } // { 值名:类型 } 键值对
  props: {
    templateProps: {
      type: String,
      required: false,
      default:()=>{
        return ""
      },
      validator: function(value) {
        return [
          'syncing',
          'synced',
          'version-conflict',
          'error'
        ].indexOf(value) !== -1
      }
    }
  },

  data() { // 必须是函数
    return {
        msg:"msg",
        showTodo:false,
        todos:[
          {
            id: 1,
            text: '学习使用 v-for'
          },
          {
            id: 2,
            text: '学习使用 key'
          }
        ]
    }
  },

  methods: {
      // 私有方法1 使用 $_xxx_xxx 来命名私有方法，这是一个官方约定
      $_myGreatMixin_update: function () {
        // ...
      },

      // 私有方法2
      async publicMethod() {
          await myPrivateFunction()
      }
  },
}

</script>

TS - (vue-property-decorator)

Vue2中使用ts是需要依赖vue-property-decorator，将Vue文件的编写方式转换成 ES6 的对象编写，刚开始用这种写法写 vue 感觉到有点别扭。

// 安装依赖
yarn add -D vue-property-decorator

<template lang="pug">div {{name}}</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';

@Component
export default class "组件名" extends Vue{

  // Hooks...
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy(){},
  destroyed() {},

  // Computed...
  get newName(){
    return 'new ' + this.name
  }

  // Data...
  private name:string = "组件名"

  // Methods
  public test():void{
    this.name = ""
    console.log('test()')
  }
}
</script>

<style lang="stylus"></style>

如果想 ts 的提示更加友好，可以在 vue 文件内使用 <strcips lang="ts" src='./xxx.ts'> 的方式引入 ts 文件，将 ts 独立分离出来