【Vue.js】014
【Vue.js】014
一、Vue概述1、简介Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动；官方文档：/参考文章：.htm
【Vue.js】014
1、简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动；
官方文档：/
参考文章：
.htm
2、Vue安装
方式一：直接使用<script>引入
开发版本（包含完整的警告和调试模式）：
代码语言：javascript代码运行次数：0运行复制<script src=".js"></script>生产版本（删除了警告，.0KB min+gzip）：
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏；
代码语言：javascript代码运行次数：0运行复制<script src="@2.6.12"></script>如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
代码语言：javascript代码运行次数：0运行复制<script type="module">
import Vue from '@2.6.12/dist/browser.js'
</script>下载到本地引入：
开发版本下载地址：.js
生产版本下载地址：.min.js
方式二：PM
在用 Vue 构建大型应用时推荐使用 PM 安装[1]。PM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件；
代码语言：javascript代码运行次数：0运行复制# 最新稳定版
$ npm install vue方式三：命令行工具 (CLI)
vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档；
1、简单数据渲染
代码演示：
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">{{message}}Hello {{name}}！</div>
<script src="js/vue.js"></script>
<script>
// 编程范式：声明式编程
// 创建一个vue对象
ct app = new Vue({
el: '#app', // 用于挂载要管理的元素
data: { // 定义数据
message: 'Hello Vue！',
name: '訾博'
}
})
// 响应式：数据发生变化，页面内容会自动跟着变化
= 'zibo';
// 编程范式：命令式编程；
// 原生js做法
// 1、创建div元素，设置id属性；
// 2、定义一个变量message；
// 、将message变量放在前面的div中显示；
</script>
</body>
</html>截图：
运行结果：
2、Vue列表的展示
代码演示：
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
{{message}}
<ul>
<!-- 每一次取一个元素赋值给item -->
<!-- 元素循环的同时所在标签也进行循环 -->
<li v-for="item in people">{{item}}</li>
</ul>
</div>
<script src="../../js/vue.js"></script>
<script>
ct app = new Vue({
el: '#app',
data: {
message: "你好！",
people: ['大哥','二哥','三哥','四哥']
}
})
</script>
</body>
</html>运行结果：
、计数器
代码演示：
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
当前计数：{{counter}}
<!-- 绑定事件：v-on -->
<!-- 简单的表达式可以直接写里面执行 -->
<!-- <button @click="counter++">+</button>
<button @click="counter--">-</button> -->
<button @click="add()">+</button>
<button @click="remove()">-</button>
</div>
<script src="../../js/vue.js"></script>
<script>
ct app = new Vue({
el: '#app',
data: {
counter: 0
},
// 定义方法
methods:{
add(){
// this表示当前对象
++;
},
remove(){
--;
}
}
})
</script>
</body>
</html>运行结果：
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-23 13:41:34
上一篇：【Vue.js】015
下一篇：【Vue.js】013
推荐阅读
| 留言与评论（共有 17 条评论） |
| 本站网友 广州科学职业技术学院 | 18分钟前 发表 |
| 简介Vue (读音 /vjuː/ | |
| 本站网友 轻微自闭症十七个症状 | 22分钟前 发表 |
| // 定义方法 methods | |
| 本站网友 上海82路 | 7分钟前 发表 |
| data | |
| 本站网友 zh9706 | 14分钟前 发表 |
| 更多详情可查阅 Vue CLI 的文档；二 | |
| 本站网友 厦门男科医院 | 23分钟前 发表 |
| 还便于与第三方库或既有项目整合 | |
| 本站网友 食品干燥剂是什么 | 3分钟前 发表 |
| 以避免新版本造成的不可预期的破坏；代码语言：javascript代码运行次数：0运行复制<script src="@2.6.12"></script>如果你使用原生 ES Modules | |
| 本站网友 洗衣店 | 17分钟前 发表 |
| '#app' | |
| 本站网友 马铃薯的营养价值 | 29分钟前 发表 |
| 【Vue.js】014 一 | |
| 本站网友 湘乡房产网 | 24分钟前 发表 |
| 我们推荐链接到一个明确的版本号和构建文件 | |
| 本站网友 北京新天地小区 | 11分钟前 发表 |
| 它为现代前端工作流提供了 batteries-included 的构建设置 | |
| 本站网友 中国凯利实业有限公司 | 28分钟前 发表 |
| 更多详情可查阅 Vue CLI 的文档；二 | |
| 本站网友 郭美美事件评论 | 7分钟前 发表 |
| 原始发表：2025-01-06 | |
| 本站网友 重庆市开县中学 | 9分钟前 发表 |
| '#app' | |
| 本站网友 全虫 | 1分钟前 发表 |
| 只需要几分钟的时间就可以运行起来并带有热重载 | |
| 本站网友 非诚勿扰樊刚 | 5分钟前 发表 |
| "你好！" | |
| 本站网友 音欠 | 25分钟前 发表 |
| 以避免新版本造成的不可预期的破坏；代码语言：javascript代码运行次数：0运行复制<script src="@2.6.12"></script>如果你使用原生 ES Modules | |