Vue基础2_vue (id:string|number)-优快云博客

本文链接：https://blog.youkuaiyun.com/lu970525/article/details/99996984

本文详细介绍了Vue的基础知识，包括模板语法、指令的使用，如v-if、v-for实现条件和列表渲染，以及事件处理器v-on。讲解了如何通过数据驱动DOM操作，避免直接操作DOM。此外，还探讨了不同数据类型的输出支持和Vue中的数据绑定方式，如v-bind用于属性绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识点

双大括号语法
- this._data.msg
- this.$data.msg
- this.msg
- msg
- _ / $ / # 这三种形式都是内部私有属性的一种标识，不希望外用

模板语法

mustache语法是支持写js的

用法：
- 内容：必须加{{js语法}}
- 属性：属性中属性值可以直接写js语法，并且属性值中的数据相当于全局变量
  - 给一个标签加一个自定义属性/已有属性
```
img中的src就是已有属性
<img src = ""/>

//data-index就是自定义属性，web网页中建议我们使用data-形式来定义自定义属性
<img data-index = "0"/>
```
  - 思考：Vue现在想要在html中使用自己的属性，并且要和它的语法和数据结合？
    - 咋整？
    - 分析：如果我能够标识出哪一个属性是具有vue标志的那就好了，属性前加v
      - Vue给这种带v标识的属性，起了一个名字：指令【借鉴angular】
```
  <div v-html = "msg">
  
  </div>
  ```
```
研究它js的支持性
- 数据类型
  - 市场上js的数据类型分类有两种？
    - 第一种
      - 初始数据类型：number、boolean、string、null、undefine
      - 引用数据类型：object[function array…]
    - 第二种
      - 基础数据类型：number string boolean
      - 特殊数据类型：null undefine
      - 复杂数据类型：Object[function array…]
- 输出语法
  - console
  - alert
- 表达式/运算符
  - 三元表达式
总结
- null和undefined是不会显示的，其他数据类型都是支持的的，可以显示的
- 挂载在window身上的全局属性，我们都不能用的：比如：console、alert
- {{}}不写流程控制
  - for
  - if
  - while
  - do…while
- {{}}支持三元表达式，同样也支持运算符
  - 短路原则也是支持的

指令

指令的目的是做什么：操作DOM
解释：MVVM vm->v 数据驱动
所以：今天开始，我们不像二阶段一样操作dom，改成操作数据，数据要想操控DOM，那么我们需要依赖指令，因为指令是直接绑定在dom身上的

v-html：转义输出，也就是可以解析xml数据
v-text：非转义输出，也就是无法解析xml类型数据

v-bind

将数据和属性进行单向数据绑定：将vue中数据赋值给属性值

 <img v-bind:src = "src"/>
 <div v-bind:class = "">
 
 </div>
 <div v-bind:style = "">
 
 </div>

简写形式

<img v-bind:src = "src"/>
<img :src = "src"/>

类名绑定

用法
对象形式用法

<p :class = "{ bg: true,size: true }"></p>
<p :class = "{ bg: true,size: false }"></p>
<p :class = "{ [classA]: true,[classB]: true }"></p>

数组形式用法

<p :class = "[ 'size','bg' ]"></p>
<p :class = "[ classA,classB ]"></p>
<p :class = "[ classA,classB,5>3?'a':'b']"></p>

样式绑定

用法
对象形式用法

<p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p>
<p :style = "styleObj"></p>

数组形式用法

<p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p>
<p :style = "[size,bg]"></p>

条件渲染

v-if
v-else-if
v-else
v-show条件展示

        <h3> 条件渲染 - 单路分支 </h3>
        <p v-if="flag"> A </p>


        <h3> 条件渲染 - 双路分支 </h3>
        <p v-if="flag"> A </p>
        <p v-else> B </p>


        <h3> 条件渲染 - 多路分支 </h3>
        <p v-if="type === '美食'"> 美食 </p>
        <p v-else-if=" type === '游戏' "> 游戏 </p>
        <p v-else> 睡觉 </p>

        <h3> 条件展示 </h3>

        <p v-show=" showFlag "> 条件展示 </p>

思考总结

        思考： v-if  vs  v-show  
        1. 效果看起来一样
        2. why Vue要出两个相似的指令？
            v-if控制的是元素的存在与否
            v-show控制的是元素的display:none属性

        思考？ 如果出事条件为假时？ v-if   v-show 谁的性能损耗较高？
           v-show

        总结： 项目中如何选择哪一个？
          频繁切换用  v-show
          如果不是很频繁的切换，那我们用 v-if

列表渲染

v-for指令

        <h3> 数组 </h3>
        <ul>
            <li v-for="(item,index) in arr" :key=" index ">
                {{ item }} -- index{{ index }}
            </li>
        </ul>
        <h3> 对象 </h3>
        <ul>
            <li v-for="(item,key,index) of obj" :key="index">
                {{ item }} -- {{ key }} -- {{ index }}
            </li>
        </ul>
        <h3> json </h3>
        <ul>
            <li v-for="item in json" :key="item.id">
                <span> 商品名称： {{ item.shop_name }} </span>
                <span> 商品价格： {{ item.price }} </span>
            </li>
        </ul>

        <h3> 循环嵌套 </h3>

        <ul>
            <li v-for="item in lists" :key="item.id">
                <h3> 商品类型： {{ item.shop_name }} </h3>
                <ul>
                    <li v-for="item in item.type" :key="item.id">
                        <p> 制造商： {{ item.maker }} </p>
                    </li>
                    <!-- <li v-for = "ele in item.type" :key = "ele.id">
            <p> 制造商： {{ ele.maker }} </p> 
          </li> -->
                </ul>
            </li>
        </ul>

        <h3> 循环number / string </h3>

        <p v-for="item in 10"> {{ item }} </p>
        <p v-for="item in 'abc'"> {{ item }} </p>

总结：

列表渲染参数可以写三个，分别是item key index
列表渲染，要在渲染的元素身上加一个key，作为这个元素唯一的标识，
- 思考：这是为什么？
- 这个key最好是id，因为id唯一？思考：为什么不能是index
循环嵌套式，参数名字可以式一致的
in/of都可以使用

事件处理器

        <button onclick = "alertHandler()"> 点击 </button>
        js中事件添加
        DOM 一级事件  on 
        1. on添加事件只写书写一次
        
         DOM 二级事件  事件监听
        1. 可以有多个
        2. 事件监听有兼容 【 现代浏览器 / IE低版本 】
          addEventListener 
          attachEvent

      事件包含部分
        事件源: box
        事件类型: click
        事件处理程序: function () {}
        box.onclick = function () {}

      事件执行形式有两种
        1. js执行
        2. html中执行

      通过上面的案例，告诉你： Vue选择了第二种作为事件添加的形式

v-on指令简写可以是@

    事件： 
    事件对象： 事件对象记录了整个事件的信息
    事件参数
    形式参数: 定义函数/方法时的参数
    实际参数: 调用函数/方法时传入的参数
      
    注意： 当一个事件处理程序中有多个参数，其中一个参数是事件对象式，我们在调用这个方法时，要添加一个实际参数 $event 与之对应
    <button @click = 'fn'> 点击 </button>
    <button @click = "eventHandler"> 事件对象 </button>
    <button @click = "argumentHandler( a,b,$event )"> 事件参数 </button>

事件修饰符

    <h3> 按键修饰符 </h3>
    <div class="big" @click.stop = 'bigHandler'>
      <div class="middle" @click.stop = "middleHandler">
        <div class="small" @click.stop = "smallHandler"></div>
      </div>
    </div>

    <h3> 键盘修饰符 </h3>
    <input type="text" @keyUp.13 = "getValue">
    <input type="text" @keyUp.enter = "getValue">
    
    Vue中对事件的功能的扩展
    * 修饰符 - 修饰事件
      * 按键修饰符
        - stop
        - self
        - once
        - ...
      * 键盘修饰符
    2. 自定义按键修饰符
    Vue.config.keyCodes.f1 = 112
    1. 先以一个案例的形式来讲述一下这个修饰符的好处
    - 事件冒泡
    - 回车弹出input的value