当前位置：主页 > 查看内容

Vue（基于 Visual Studio Code 编辑器）

发布时间：2021-08-10 00:00| 有 位朋友查看

简介：Vue 1、创建一个 html 源代码 2、引入 Vue 3、html 文件的简单使用及 Vue 的体验 1、创建一个 html 源代码 第一步桌面新建文件夹并拖入到此软件进行打开操作 第二步右键创建文件以 .html 为后缀 第三步英文输入法状态下输入 !感叹号并按回车即可出现如下代码……

Vue

1、创建一个 html 源代码

  • 第一步：桌面新建文件夹并拖入到此软件进行打开操作
  • 第二步：右键创建文件（以 .html 为后缀）
  • 第三步：英文输入法状态下，输入 !（感叹号）并按回车即可出现如下代码

在这里插入图片描述

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>
；原文链接：https://blog.csdn.net/weixin_51927215/article/details/115841693
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：线程安全你不会，你面试，你怎么敢的呀，细到恐怖....... 下一篇：php反序列化字符串逃逸

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐