分析初识 vue 小案例

2023-06-05
北京
本文字数：1418 字
阅读完需：约 5 分钟

首先解决一个小问题

需要先在 vscode 中安装一个插件：live server

Live Server 是一个简单的节点应用程序，用于工作目录及其子目录。它也监视文件的变化，当这种情况发生时，它通过 web 套接字连接向浏览器发送消息，指示它重新加载。为了让客户端支持这个，服务器为每个请求的 html 文件注入一小段 JavaScript 代码。这个脚本建立了 web 套接字连接并监听重载请求。通过从 DOM 中查找引用的样式表，并触发浏览器再次获取并解析它们，可以刷新 CSS 文件，而无需整页重新加载。

然后编写一段代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>初始vue</title>        <!-- 引入vue.js -->        <script  type="text/javascript" src="../js/vue.js"></script>    </head>    <body>        <!-- 准备一个容器 -->        <div id="root">            <h1>hello,魏一鹤</h1>        </div>        <script type="text/javascript">             // 设置为 false 以阻止 vue 在启动时生成生产提示。            Vue.config.productionTip= false                    </script>    </body>   </html>

复制代码

使用 live server 打开页面

然后会发现浏览器有一个错误

发现这个错误是我们本地的，因为我们没有页面加载的页签图表

所以我们应该给一个页签图标，防止报错,这里由于我们没这个图标，随便找了个，也可以去网上下载一个，把它命名为 favicon.ico，放在项目的根目录，然后重新打开页面，发现错误消息了，然后页面多了一个页签

言归正传，开始编写我们 vue 代码

编写 vue 代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>初始vue</title>        <!-- 引入vue.js -->        <script  type="text/javascript" src="../js/vue.js"></script>    </head>    <body>        <!-- 准备一个容器 -->        <div id="root">            <!-- {{xxx}}是vue中的插值语法 -->            <h1>hello,{{name}},我今年{{age}}岁了</h1>        </div>        <p #a></p>        <script type="text/javascript">             // 设置为 false 以阻止 vue 在启动时生成生产提示。            Vue.config.productionTip= false              // 创建一个vue实例            new Vue({                // 属性通常为key:value的形式 key是不能变得，value可以变,多个key之前用,分割 最后一个key不写,                el:'#root', // el就是的简写element，用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串                data:{  // data用于存储数据，数据供el所指定的容器使用，可以存好几个值 也是key:value的形式                    name:'vue',                    age:'18'                }            })        </script>    </body>   </html>

复制代码

查看页面，数据是动态被 vue 插入进去的，而且我们浏览器 vue 插件也亮了起来，说明检测到 vue 代码了

初识 vue 总结

1 想让 vue 工作，就必须创建一个 vue 实例，并且传入一个配置对象（容器）

2 root 容器里的代码仍然符合 html 规范，只不过混入了一些特殊的 vue 语法

3 root 容器里的代码被称为 vue 模板

4 vue 实例和容器是一一对应的

5 真实开发中只有一个 vue 实例，并且会配合着组件一起使用

6 {{xxx}}中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性

7 一旦 data 中的数据发生变化，那么页面中用到该数据的地方也会自动更新

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/890e1637b42a4abd424cbc8c7】。文章转载请联系作者。

张三丰无极

关注

还未添加个人签名 2022-10-26 加入

还未添加个人简介

发布

暂无评论

创作场景

分析初识 vue 小案例

首先解决一个小问题

编写 vue 代码

初识 vue 总结

张三丰无极

评论