vue介绍 · 前端菜鸟成长记

# vue基础 <br> ## 1.vue模板 >文件 -> 首选项 -> 用户代码片段，在输入框内输入html.json，用下面的代码覆盖掉原来的即可，下次新建html文件直接输入**hv**，然后按下回车即可 <br> ```html { "html:5": { "prefix": "hv", "body": [ "<!DOCTYPE html>", "<html>", "<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></title>", "\t<script src=\"https://cdn.jsdelivr.net/npm/vue\"></script>", "</head>", "<body>", "</body>", "</html>", ], "description": "HTML5" } } ``` <br> ## 2.语法步骤 ***** * 实例化vue实例 * 1. 绑定vue的使用范围 el * 2. 在data定义变量 * 3. 通过{{}}格式绑定变量到html页面标签上 <br> ```html <div id="app"></div> <div id="app1">vue 渲染a：{{a}}</div> <div id="app2">vue实例内容不会影响：{{a}}</div> ``` ```javascript // 实例化vue对象 new Vue({ el:'#app1',//vue影响的HTML页面范围，绑定id名 data:{ //定义vue使用的变量 a:1 }, }) ```