第一个Vue程序
vue是什么？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。如何安装Vue尝试 Vue.js 最简单的方法是使用 [Hel
vue是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
如何安装Vue
尝试 Vue.js 最简单的方法是使用 [Hello World 例子]你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以[创建一个 .html 文件然后通过如下方式引入 Vue：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- 注意：s开发环境引入，最好有明确的版本号 -->
或者
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<!-- 生产环境引入，最好有明确的版本号，和开发时候使用的一致 -->
生产环境和开发环境引入Vue文件的区别：
生产环境和开发环境引入的vue文件，最主要的区别在于：生产环境的js文件是在开发环境js文件的基础上进行了代码压缩、去掉空格、变量名简化等操作。从而减少了js文件的size，有利于提高网络传输速度。
方式二：下载到本地目录，然后使用<script>标签引入
开发环境下载地址: https://vuejs.org/js/vue.js
生产环境下载地址: https://vuejs.org/js/vue.min.js
实现第一个vue程序
在一个html页面<body>标签中写如下代码
<div id="app">
<h2>你好Vue，{{message}}</h2>
</div>
<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({ //初始化一个VUE实例
el: '#app', // 用于页面渲染VUE实例的元素
data: { // 定义数据
message: 'Hello Vue!'
}
})
</script>
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
浏览器中F12调试代码
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)