目录
一、Vue概述
1、简介
2、Vue安装
方式一：直接使用
方式二：NPM（不直到为什么，从这里目录无法自动生成，手动打出来吧！）
方式三：命令行工具 (CLI)
二、Vue初体验
1、简单数据渲染；
2、Vue列表的展示；
3、计数器；
一、Vue概述
1、简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动；
官方文档：https://cn.vuejs.org/v2/guide/
参考文章：
https://www.jb51.net/list/list_269_1.htm
2、Vue安装
方式一：直接使用
开发版本（包含完整的警告和调试模式）：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>生产版本（删除了警告，33.30KB min+gzip）：
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏；
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>下载到本地引入：
开发版本下载地址：https://cn.vuejs.org/js/vue.js
生产版本下载地址：https://cn.vuejs.org/js/vue.min.js
方式二：NPM
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件；
# 最新稳定版
$ npm install vue
方式三：命令行工具 (CLI)
vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档；
二、Vue初体验
1、简单数据渲染
代码演示：
<!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对象
const app = new Vue({
el: '#app', // 用于挂载要管理的元素
data: { // 定义数据
message: 'Hello Vue！',
name: '訾博'
}
})
// 响应式：数据发生变化，页面内容会自动跟着变化
app.name = 'zibo';
// 编程范式：命令式编程；
// 原生js做法
// 1、创建div元素，设置id属性；
// 2、定义一个变量message；
// 3、将message变量放在前面的div中显示；
</script>
</body>
</html>
截图：
运行结果：
2、Vue列表的展示
代码演示：
<!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>
const app = new Vue({
el: '#app',
data: {
message: "你好！",
people: ['大哥','二哥','三哥','四哥']
}
})
</script>
</body>
</html>
运行结果：
3、计数器
代码演示：
<!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>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
// 定义方法
methods:{
add(){
// this表示当前对象
this.counter++;
},
remove(){
this.counter--;
}
}
})
</script>
</body>
</html>
运行结果：
