初识vue2 了解相关指令

推荐大家安装的 VScode 中的 Vue 插件

1. Vue 3 Snippets https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
2. Vetur https://marketplace.visualstudio.com/items?itemName=octref.vetur

什么是 vue

1. 构建用户界面
   • 用 vue 向 html 页面填充数据，非常方便。
2. 框架
   • 框架是一套现成的解决方案，程序员只能遵守框架的规范
   • 学习vue框架的用法
   • vue 的指令，组件（对ui结构的复用），路由，vuex，vue 组件库

vue 的两个特性

1. 数据驱动试图：
   • 数据的变化会驱动试图自动更新
   • 只要数据维护好，页面会被vue 自动渲染出来!
2. 双向数据绑定：

   在网页中，from 表单负责采集数据，Ajax 负责提交数据

   • js 数据变化，会自动渲染到页面上
   • 页面上表单采集到的数据发生变化时，会被vue自动获取到，并更新到js数据中

   数据绑定视图和双向数据绑定的底层原理为 MVVM（mode 数据源，view 视图， viewmode 就是vue的实例）

vue指令

1. 内容渲染指令

1. v-text 指令缺点：会覆盖元素内部原有的内容！
2. {{ }}插值表达式：内容占位符，不会覆盖原有内容
3. v-html可以把带有标签的字符串，渲染成真正的HTML内容

2. 属性绑定

插值表达式只能在元素的内容节点使用，不能再属性节点中使用

• 在vue 中可以用v-bind:指令，为元素的属性动态绑定值；
• 简写为英文的:
• 在使用 v-bind 属性绑定时，如果绑定的的内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如:

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

3.事件绑定

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>
 ```
 #### 4. v-model 指令

1. input 输入框
   • type=“radio”
   • type=“checkbox”
   • type=“xxxx”
2. textarea
3. select

5. 条件渲染指令

1. v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏
   • 如果要频繁的切换元素的显示状态，用 v-show 性能会更好
2. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏
   • 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 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>