文档上说，Vue 是一套用于构建用户界面的渐进式框架。
Vue 被设计为可以自底向上逐层应用
引入
这怎么体现呢，因为可以直接通过script方式引入
官方的最简单hello world的例子也是通过 script 引入的
<!DOCTYPE html>
<html>
<head><title>My first Vue app</title><script src="https://unpkg.com/vue@2"></script>
</head>
<body><div id="app">{{ message }}</div><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})</script>
</body>
</html>
也可以直接创建 .html 文件，通过下面的方式引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
或者
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
核心功能
声明式渲染
Vue.js 的核心是一个系统
- 通过简洁的模板语法
Vue.js 使用简洁的模板语法，而 React 则是使用 JSX
它的模板语法接近普通 HTML，但加入了数据绑定和指令
例如：使用 {{ }} 语法将数据绑定到页面中，使用 v-if 和 v-for 等指令来进行条件渲染和列表渲染
- 声明式地
视图层框架通常分为声明式和命令式，像 jQuery 就是命令式框架，而 Vue 是声明式框架
不需要写代码来操作 DOM 元素（如 document.getElementById 或 innerHTML），只需要在模板中绑定数据（如 {{ message }}）
Vue 会根据数据变化自动更新 DOM
- 将数据渲染进 DOM
数据渲染到 DOM 是指通过 Vue 的数据绑定功能，将 JS 数据（如：变量、对象或数组）与 HTML 页面上的元素进行关联
当数据发生变化时，Vue 会自动更新与之相关联的 DOM 部分
文本插值
如上图代码所示，数据和 DOM 已经建立关联了，是响应式的了
注意，如果我们后面进行交互，比如修改 app.message，不再和 HTML 进行交互了
交互发生在新创建的 Vue 实例的内部，HTML 只是一个入口，我们的 Vue 实例其实是挂载在一个 DOM 元素上
这里是 #app
上面是文本插值，下面我们再来看看另一种方式
指令
通过这种方式来绑定元素 attribute（属性）：
<div id="app-2"><span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span></div>
var app2 = new Vue({el: '#app-2',data: {message: '页面加载于 ' + new Date().toLocaleString()}})
这里的 v-bind attribute 也就是指令
指令带有前缀 v-
表示是 Vue 提供的特殊 attribute
它们会在 DOM 上应用特殊的响应式行为
上面指令的意思是：将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致
可以在控制台中用命令修改：
绑定了 title 的 attribute 的 HTML 更新了
条件与循环
v-if 和 v-for 是不建议在一个 HTML 元素中同时使用的，Vue2 和 Vue3的优先级也不同，会增加心智负担
v-if
控制切换一个元素是否显示可以使用 v-if
<div id="app-3"><p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({el: '#app-3',data: {seen: true}
})
使用前
使用后
上面例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute
还可以绑定到 DOM 结构
此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果
过渡效果还挺有意思的
v-for
还有很多指令，例如：v-for指令可以绑定数组的数据来渲染一个项目列表
<div id="app-4"><ol><li v-for="todo in todos">{{ todo.text }}</li></ol>
</div>
var app4 = new Vue({el: '#app-4',data: {todos: [{ text: '学习 JavaScript' },{ text: '学习 Vue' },{ text: '整个牛项目' }]}
})
啪的一下就 push 进去了
处理用户输入
v-on
为了让用户和我们的应用进行交互，我们需要添加一个事件监听器，使用的是 v-on 指令
通过该指令调用在 Vue 实例中定义的方法
上代码
<div id="app-5"><p>{{ message }}</p><button v-on:click="reverseMessage">反转消息</button>
</div>
var app5 = new Vue({el: '#app-5',data: {message: 'Hello Vue.js!'},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')}}
})
在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM
所有的 DOM 操作都由 Vue 来处理，我们编码只需要专注于逻辑层即可，也就是编写声明式代码
v-model
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定
<div id="app-6"><p>{{ message }}</p><input v-model="message">
</div>
var app6 = new Vue({el: '#app-6',data: {message: 'Hello Vue!'}
})
组件化应用构建
组件系统是 Vue 的另一个重要概念
抽象的意思是把复杂的 UI 和逻辑简化成可管理、可操作的小块
它通过将复杂的应用分解为更小、更独立且通常可复用的部分（即组件），使得我们可以更高效地构建大型应用
几乎任意类型的应用界面都可以抽象为一个组件树：
在 Vue 里，一个组件本质上是 一个拥有预定义选项的 一个 Vue 实例
在 Vue 中注册组件很简单：
前面是组件名，后面放组件内容
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {template: '<li>这是个待办项</li>'
})var app = new Vue(...)
可以用组件名的形式放入 HTML
<ol><!-- 创建一个 todo-item 组件的实例 --><todo-item></todo-item>
</ol>
但这样如果放多个 <todo-item></todo-item> 内容都一样的
显得 low 了
应该做到父作用域将数据传到子组件
下面我们修改组件定义，使它能够接受一个 prop：
Vue.component('todo-item', {// todo-item 组件现在接受一个"prop"，// 类似于一个自定义 attribute。// 这个 prop 名为 todo。props: ['todo'],template: '<li>{{ todo.text }}</li>'
})
可以使用 v-bind 指令将待办项传到循环输出的每个组件中
<div id="app-7"><ol><!--现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”，稍后再作详细解释。--><todo-itemv-for="item in groceryList"v-bind:todo="item"v-bind:key="item.id"></todo-item></ol>
</div>
模板里面写了 todo 传入的内容，还给了 key 的内容
Vue.component('todo-item', {props: ['todo'],template: '<li>{{ todo.text }}</li>'
})var app7 = new Vue({el: '#app-7',data: {groceryList: [{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '随便其它什么人吃的东西' }]}
})
出现了循环出来的三个组件
子单元通过 prop 接口与父单元进行了良好的解耦
父单元就是 #app-7，子单元是 todo-item
组件的应用模板可以长这个样子
<div id="app"><app-nav></app-nav><app-view><app-sidebar></app-sidebar><app-content></app-content></app-view>
</div>
Vue 组件也类似于自定义组件
不过 Vue 组件相比于普通的 HTML 自定义元素有一些优势和特性
- 跨组件数据流
- 父组件通过
props将数据传递给子组件 - 子组件通过
$emit触发事件，通知父组件某些状态发生变化 - Vue 提供状态管理工具（如 Vuex、Pinia），可以实现复杂的跨组件共享数据
- 父组件通过
- 自定义事件通信
- 组件可以通过
$emit方法发送自定义事件，父组件可以通过v-on或@监听这些事件
- 组件可以通过
- 构建工具集成
- 如：Webpack、Vite
小记
v-bind：绑定元素 attribute
v-on：添加一个事件监听器
END
本文介绍了，Vue 核心功能，或者说最基本的功能，包括声明式渲染、条件与循环、处理用户输入、组件化应用构建等，声明式渲染包括文本插值和指令两种方法；条件与循环主要是 v-if 和 v-for 这两个指令；处理用户输入涉及 v-on 和 v-model；组件化应用中指明一个组件本质上是一个拥有预定义选项的 Vue 实例
