Vue(基于 Visual Studio Code 编辑器)

1、创建一个 html 源代码

  • 第一步:桌面新建文件夹并拖入到此软件进行打开操作
  • 第二步:右键创建文件(以 .html 为后缀)
  • 第三步:英文输入法状态下,输入 !(感叹号)并按回车即可出现如下代码
Vue(基于 Visual Studio Code 编辑器)

2、引入 Vue

引入 Vue 有二种方法(参考官方教程

  • 其一:引入本地的 vue.js 文件
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <!-- 加载本地的 vue.js 文件 -->     <script src="vue.js"></script> </head> <body>      </body> </html> 
  • 其二:引入线上的 vue.js 文件
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <!-- 加载线上的 vue.js 文件 -->     <!-- 1. 最新版本 -->     <script src="https://cdn.jsdelivr.net/npm/vue"></script>     <!-- 2. 对于生产环境, 推荐链接到一个明确的版本号和构建文件, 以避免新版本造成的不可预期的破坏 -->     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body>      </body> </html> 

3、html 文件的简单使用及 Vue 的体验

  • html 源代码
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>      </body> </html> 
  • 让浏览器上面显示字符串
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     <!-- 1. 固定结构 -->     <div id="box">         <!-- 2. 一级标题 -->         <h1>i love you</h1>         <!-- 3. 普通文本 -->         <a>da zhu zhu</a>         <!-- 4. 二级标题 -->         <h2>me too</h2>     </div> </body> </html> 
  • 使用 Vue 来使数据显示出来
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <script src="vue.js"></script> </head> <body>     <div id="box">         <!-- 1. 以标题 1 显示文本 -->         <h1>hello world</h1>         <!-- 2. 只显示 msg (因为当作成字符串) -->         <h1>msg</h1>             <!-- 3. 将数据展示在页面上, 需要借助表达式,语法:{{变量名}} -->         <h1>{{msg}}</h1>     </div>      <script>         // 4. 创建 vue 对象          var vm = new Vue({             // 5. 在 {} 中填写 vue 实例的配置项             el:"#box",              data:{                 msg:"hello yong"             }         });     </script> </body> </html> 

版权声明:玥玥 发表于 2021-04-20 1:40:23。
转载请注明:Vue(基于 Visual Studio Code 编辑器) | 女黑客导航