Vue基础入门

何为Vue？

 官方概念：是一套用于构建用户界面的前端框架。

Vue 的两个特性：

 1. 数据驱动视图

    使用 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面结构（即数据的变化会驱动视图进行自动更新）。

    优点在于：我们只需要维护好数据，页面结构便会被 vue 自动渲染。

    需要注意的是：数据驱动视图是单向的数据绑定。

2. 双向数据绑定

    在填写表单时，双向数据绑定能够以辅助开发者在不操作 DOM 的前提之下，自动将用户所填写的内容同步到数据源中。（即页面中表单采集的数据发生变化后，会被 vue 自动获取，并更新到js数据之中）

    优点在于：无需手动操作 DOM 元素，来获取表单元素的最新值。

MVVM（Model、View、ViewModel）

    MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理，它将每个HTML页面都拆分成了三个部分：

    Model：表示当前页面渲染时所依赖的数据源。

    View：表示当前页面所渲染的DOM结构。

    ViewModel：表示 vue 的实例，是 MVVM 的核心。

 MVVM的工作原理

 

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

    当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构。

    当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化后的最新值自动同步到 Model 数据源中。

Vue指令

一. 内容渲染指令

1. v-text 指令的缺点：会覆盖元素内部原有的内容。

2. {{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容。

3. v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容。

二. 属性绑定指令

    1. 在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值 。

    2. 简写是英文的 :

    3. 在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

<div :title="'box' + index">这是一个 div</div>

三. 事件绑定

    1. v-on: 简写是 @

    2. 语法格式：

<button @click="add"></button>

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

   3. $event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。 如：

<button @click="add(3, $event)"></button>

methods: {
   add(n, e) {
			// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
			this.count += 1
   }
}

   4. 事件修饰符

.prevent

<a @click.prevent="xxx">链接</a>

 .stop

<button @click.stop="xxx">按钮</button>

四. v-model 指令

    1. input 输入框

• type="radio"

• type="checkbox"

• type="xxxx"

    2. textarea

    3. select

五. 条件渲染指令

    1. v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏

• 如果要频繁的切换元素的显示状态，用 v-show 性能会更好。

    2. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏

• 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好。

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

    1. 直接给定一个布尔值 true 或 false

<p v-if="true">被 v-if 控制的元素</p>

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

<p v-if="type === 'A'">良好</p>