vue学习(五)基础入门-基础知识(2)

ゝ一世哀愁。 2023-06-11 13:28 3阅读 0赞

vue生命周期

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70][]

vscode 设置代码模板

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 2][]

附上html.json文件配置，直接填入原大括号中即可：

"h5 template": \{

"prefix": "vh", // 对应的是使用这个模板的快捷键

"body": \[

"<!DOCTYPE html>",

"<html lang=\\"en\\">",

"<head>",

"\\t<meta charset=\\"UTF-8\\">",

"\\t<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">",

"\\t<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\">",

"\\t<title>Document</title>",

"\\t<script src=\\"./lib/vue-2.4.0.js\\"></script>",

"</head>\\n",

"<body>",

"\\t<div id =\\"app\\"> </div>\\n",

"\\t<script>",

"\\t //创建Vue实例,得到 ViewModel",

"\\t var vm = new Vue(\{",

"\\t\\tel: '\#app',",

"\\t\\tdata: \{\},",

"\\t\\tmethods: \{\}",

"\\t \});",

"\\t</script>",

"</body>\\n",

"</html>"

\],

"description": "HT-H5" // 模板的描述

转义字符解释：

\\t \\" \\n都是转义字符，而空格就是单纯的空格，输入时可以输入空格  
\\t 的意思是 横向跳到下一制表符位置 等于 Tab键  
\\" 的意思是 双引号  
\\n 的意思是回车换行

以及vue的模板

\{  
  "vue-template": \{  
    "prefix": "vue",  
    "body": \[  
      "<template>",  
      "  <div class=\\"$1\\">",  
      "",  
      "  </div>",  
      "</template>",  
      "",  
      "<script>",  
      "export default \{",  
      "  name: '$1',",  
      "  data() \{ ",  
      "    return \{",  
      "",  
      "    \}",  
      "  \}",  
      " \}",  
      "</script>",  
      "",  
      "<style lang=\\"\\" scoped>",  
      "  .$1\{",  
      "",  
      "  \}",  
      "</style>"

\],  
    "description": "my vue template"  
  \}  
\}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]: /images/20230531/563a3dc680a24f5a859bfbabc526b645.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]: /images/20230531/1f241327fa8d48d58eed3af5e7002a0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 2]: /images/20230531/e0794f1e8b064551b917bd5a2d827e2e.png