Vue-Html 模板and代码片段


一、模板


DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind-class-arraytitle>
    <script src="./vue.js">script>
head>

<body>
    <div id="app"><h2>{{message}}h2>div>

    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    message:'Hello Vue'
                }
            },
            created(){ // 实例被创建之后执行代码

            },
            computed: { // 计算属性

            },
            components: { // 组件的引用

            },
            methods: { // 方法

            },
            mounted()    { // 页面进入时加载内容

            },
            watch: { // 监测变化

            }
        });

    script>
body>

html>

二、代码片段-vscode设置(左下角小齿轮)-用户代码片段-新建全局

{
  "Html5-Vue": {
    //模板名称
    "prefix": "hv", //触发条件
    "body": [
      //内容
      "",
      "",
      "\n",
      "",
      "\t",
      "\t",
      "\t",
      "\t${TM_FILENAME_BASE}",
      "\t",
      "\n",
      "",
      "\t

{{message}}

\n", "\t", "\n", "" ], "description": "快速创建在html5编写的vue模板" //描述 } }