推荐大家安装的 VScode 中的 Vue 插件
- Vue 3 Snippets https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
- Vetur https://marketplace.visualstudio.com/items?itemName=octref.vetur
什么是 vue
vue是一套用于构建用户界面的前端框架。
- 构建用户界面
- 用 vue 往 html 页面中填充数据，非常的方便
- 框架
- 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
- 要学习 vue，就是在学习 vue 框架中规定的用法！
- vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库
vue 的两个特性
-
数据驱动视图：
- 数据的变化会驱动视图自动更新
- 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！
-
双向数据绑定：
在网页中，form 表单负责采集数据，Ajax 负责提交数据。
- js 数据的变化，会被自动渲染到页面上
- 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中
注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）
MVVM
MVVM是 vue 实现数据驱动视图和双向数据绑定的核心原理。
MVVM 指的是 Model、View 和 ViewModel，
它把每个 HTML 页面都拆分成了这三个部分
Model 表示当前页面渲染时所依赖的数据源。
View 表示当前页面所渲染的 DOM 结构。
ViewModel 表示 vue 的实例，它是 MVVM 的核心
- 工作原理：
当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中
vue 的基本使用
vue官网：https://v3.cn.vuejs.org/guide/introduction.html
- 基本使用步骤
① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）
<body>
<!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
<div id="app">{{ username }}</div>
<!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 创建 Vue 的实例对象 -->
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
username: 'zhangsan'
}
})
</script>
</body>
vue 指令
1. 内容渲染指令
v-text指令的缺点：会覆盖元素内部原有的内容！{{ }}插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！v-html指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！
2. 属性绑定指令
注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！
-
在 vue 中，可以使用
v-bind:指令，为元素的属性动态绑定值； -
简写是英文的
: -
在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：
<div :title="'box' + index">这是一个 div</div>
https://blog.csdn.net/weixin_43592907/article/details/106677696
3. 事件绑定
-
v-on:简写是@ -
语法格式为：
<button @click="add"></button> //通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明： methods: { add() { //this表示当前new出来的vm实例对象 // 如果在方法中要修改 data 中的数据，可以通过 this 访问到 this.count += 1 } } -
$event的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：
在使用 v-on 指令绑定事件时，可以使用 ( ) 进行传参; ta是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。ta可以解决事件参数对象 event 被覆盖的问题。<button @click="add(3, $event)"></button> // methods: { add(n, e) { // 如果在方法中要修改 data 中的数据，可以通过 this 访问到 this.count += 1 } } -
事件修饰符：
在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。
-
.prevent<a @click.prevent="xxx">链接</a> -
.stop<button @click.stop="xxx">按钮</button>
-
4. v-model 指令
双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据
- input 输入框
- type=“radio”
- type=“checkbox”
- type=“xxxx”
- textarea
- select
5. 条件渲染指令
v-show的原理是：动态为元素添加或移除display: none样式，来实现元素的显示和隐藏- 如果要频繁的切换元素的显示状态，用 v-show 性能会更好
v-if的原理是：每次动态创建或移除元素，实现元素的显示和隐藏- 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好
在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！
v-if 指令在使用的时候，有两种方式：
-
直接给定一个布尔值 true 或 false
<p v-if="true">被 v-if 控制的元素</p> -
给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏
<p v-if="type === 'A'">良好</p>
6.列表渲染指令
- v-for 指令需要使用 item in items 形式的特殊语法，其中：
- items 是待循环的数组
- item 是被循环的每一项
- v-for 指令还支持一个可选的第二个参数，即当前项的索引。
(item, index) in items，
- 使用 key 维护列表的状态
当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。
此时，需要为每项提供一个唯一的 key 属性。
key 的注意事项
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性（即：key 的值不能重复）
③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱
扫一扫
1050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
