前言

概念：Vue是一套用于构建用户界面的前端框架，用vue往html页面填充工具

vue框架的特性

数据驱动视图

双向数据绑定

vue框架原理

创建vue实例对象

基础入门

指令

内容渲染

v-text:会覆盖元素内部原有的内容！
{{}}插值表达式
v-html：把带标签的的字符串渲染成HTML内容

属性绑定

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中 v-bind:指令简写成：，为元素动态绑定值

事件绑定

1.v-on：事件绑定指令，可简写成@

2.事件对象$event/e

3.事件修饰符

一些常见的事件修饰符及其用法：

.stop：阻止事件冒泡。例如，@click.stop 将阻止点击事件冒泡到父元素。
.prevent：阻止事件的默认行为。例如，@submit.prevent 将阻止表单的默认提交行为。
.capture：使用事件捕获模式而不是冒泡模式。例如，@click.capture 将使用捕获模式处理点击事件。
.self：只有当事件发生在元素自身时才触发处理程序，而不是子元素。例如，@click.self 只有在点击元素自身时才触发点击事件处理程序。
.once：只触发一次事件处理程序。例如，@click.once 只会在第一次点击时触发点击事件处理程序。
.passive：指示浏览器不要阻止事件的默认滚动行为。通常在处理滚动事件时使用，以提高性能。

其中，事件修饰符可以组合使用，例如 @click.stop.prevent 将同时阻止事件冒泡和默认行为。

4.按键修饰符

常见的按键修饰符及其用法：

1、@keydown.enter 在按下回车键时触发事件处理程序。

2、@keydown.tab 在按下 Tab 键时触发事件处理程序。

3、@keydown.delete 或 @keydown.backspace 在按下删除键或退格键时触发事件处理程序。

4、@keydown.esc 在按下 Escape 键时触发事件处理程序。

5、@keydown.space 在按下空格键时触发事件处理程序。

6、@keydown.up 在按下上方向键时触发事件处理程序。.up、.down、.left、.right：分别监听上方向键、下方向键、左方向键、右方向键

7@keydown.ctrl 在按下 Ctrl 键时触发事件处理程序。.ctrl、.alt、.shift、.meta：分别监听 Ctrl 键、Alt 键、Shift 键、Meta 键（如 Windows 键或 Command 键）。

@keydown.enter.prevent 将在按下回车键时阻止默认行为,组合使用

按键修饰符只适用于键盘事件（如 keydown、keyup）的处理，而不适用于鼠标事件。

双向绑定

v-model指令适用于表单元素
1.input
2.textarea
3.select

 <!-- 过 v-model 绑定到 <input> 元素上，当用户输入时，    message 的值会自动更新。
 同样地，当 message 的值改变时，输入框的内容也会自动更新 -->
      <input type="text" v-model="username" />
      <hr />
      <p>选中的省份是：{{province}}</p>
      <select v-model="province">
        <option value="">请选择</option>
        <option value="1">北京</option>
        <option value="2">河北</option>
        <option value="3">黑龙江</option>
      </select>
    </div>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          username: 'zs',
          province: '1',
        },
      })
    </script>

v-model指令修饰符

条件渲染

data: {
      flag: false,
      type: 'A'
}
<p v-if="flag">请求成功 --- 被 v-if 控制</p>
<p v-show="flag">请求成功 --- 被 v-show 控制</p>

<p v-if="type === 'A'">优秀</p>
<p v-else-if="type === 'B'">良好</p>
<p v-else-if="type === 'C'">一般</p>
<p v-else>差</p>

列表渲染

v-for列表渲染指令

Vue2.0学习笔记1~指令

前言