【vue篇】 第二话--vue 基础入门

• 🤱作者简介：大家好！我是陪我吹吹海風吧。
• 📁喜欢：点赞收藏！持续更新vue2.0/3.0
• ✊加油，共勉！

🌕目录

✍ 一.vue 简介

Vue 是一套用于构建用户界面的前端框架。vue框架的特性，主要体现在数据驱动视图和双向数据绑定

数据驱动视图：在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构，是单向的数据绑定

双向数据绑定：在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源
中。

MVVM:是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

✍二.vue 的基本使用

1.导入 vue.js 的 script 脚本文件
2.在页面中声明一个将要被 vue 所控制的 DOM 区域
3.创建 vm 实例对象（vue 实例对象）

基本代码与 MVVM 的对应关系

✍三.vue 的调试工具

1. 安装 vue-devtools 调试工具
Chrome 浏览器在线安装 vue-devtools ：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
FireFox 浏览器在线安装 vue-devtools ：
https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

2. 配置 Chrome 浏览器中的 vue-devtools
点击 Chrome 浏览器右上角的 按钮，选择更多工具 -> 扩展程序 -> Vue.js devtools 详细信息，并勾选如下的两个选项：

**3.**使用 vue-devtools 调试 vue 页面
在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools 调试当前的页面。

✍四.vue 的指令

vue 的指令:
1. 内容渲染指令:用来辅助开发者渲染 DOM 元素的文本内容
📍

v-text

指令的缺点：会覆盖元素内部原有的内容
📍

{{ }}

插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！！
📍

v-html

指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！
2.属性绑定指令:为元素的属性动态绑定值
📍

v-bind:

简写为(

:

)
3.事件绑定：
📍

v-on:

简写为(

@

)

<button@click="add"></button>
   methods: {
      add() {
               // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
               this.count += 1
      }
   }

4. 事件修饰符

6.双向绑定指令:用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据
📍

v-model

的修饰符：

5. 条件渲染指令
📍

v-show

的原理是：动态为元素添加或移除

display: none

样式，来实现元素的显示和隐藏如果要频繁的切换元素的显示状态，用 v-show 性能会更好
📍

v-if

的原理是：每次动态创建或移除元素，实现元素的显示和隐藏如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好
📍在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！

📍

v-if

指令在使用的时候，有两种方式：

1. 直接给定一个布尔值 true 或 false
2. 给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏

6. 列表渲染指令:用来辅助开发者基于一个数组来循环渲染一个列表结构。
📍

v-for

指令需要使用 item(待循环的数组) in items(被循环的每一项) 形式的特殊语法,还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items,保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性
key 的注意事项
① key 的值只能是字符串或数字类型
② key 的值必须具有唯一性（即：key 的值不能重复）
③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）