关于Vue

2022/1/10 23:07:39

编程Tag： js vue 代码 html 片段关于

本文主要是介绍关于Vue，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1、Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、初始Vue.js

创建 demo.html

<!-- id标识vue作用的范围 -->
<div id="app">

   <!-- {{}} 插值表达式，绑定vue中的data数据 -->

   {{ message }}

</div>
<script src="vue.min.js"></script>
<script>


  // 创建一个vue对象

  new Vue({

      el: '#app',//绑定vue作用的范围

      data: {//定义页面中显示的模型数据

          message: 'Hello Vue!'

      }

  })


</script>

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作 在vs code中创建代码片段： 文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets 注意：制作代码片段的时候，字符串中如果包含文件中复制过来的“Tab”键的空格，要换成“空格键”的空格

{

  "vue htm": {

      "scope": "html",

      "prefix": "vuehtml",

      "body": [

          "<!DOCTYPE html>",

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

          "",

          "<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>Document</title>",

          "</head>",

          "",

          "<body>",

          "    <div id=\"app\">",

          "",

          "    </div>",

          "    <script src=\"vue.min.js\"></script>",

          "    <script>",

          "        new Vue({",

          "            el: '#app',",

          "            data: {",

          "                $1",

          "            }",

          "        })",

          "    </script>",

          "</body>",

          "",

          "</html>",

      ],

      "description": "my vue template in html"

  }

}

这篇关于关于Vue的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

关于Vue

1、Vue.js 是什么

2、初始Vue.js

相关编程文章