Vue基础2

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

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

知识点

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

模板语法

mustache语法是支持写js的

  1. 用法:
    • 内容:必须加{{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>
        ```
      
  2. 研究它js的支持性
    • 数据类型
      • 市场上js的数据类型分类有两种?
        • 第一种
          • 初始数据类型:number、boolean、string、null、undefine
          • 引用数据类型:object[function array…]
        • 第二种
          • 基础数据类型:number string boolean
          • 特殊数据类型:null undefine
          • 复杂数据类型:Object[function array…]
    • 输出语法
      • console
      • alert
    • 表达式/运算符
      • 三元表达式
  3. 总结
    • null和undefined是不会显示的,其他数据类型都是支持的的,可以显示的
    • 挂载在window身上的全局属性,我们都不能用的:比如:console、alert
    • {{}}不写流程控制
      • for
      • if
      • while
      • do…while
    • {{}}支持三元表达式,同样也支持运算符
      • 短路原则也是支持的

指令

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

  1. v-html:转义输出,也就是可以解析xml数据
  2. v-text:非转义输出,也就是无法解析xml类型数据
  3. 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>
        

条件渲染

  1. v-if
  2. v-else-if
  3. v-else
  4. 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>
  1. 思考总结
        思考: 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选择了第二种作为事件添加的形式
  1. v-on指令 简写可以是@
    事件: 
    事件对象: 事件对象记录了整个事件的信息
    事件参数
    形式参数: 定义函数/方法时的参数
    实际参数: 调用函数/方法时传入的参数
      
    注意: 当一个事件处理程序中有多个参数,其中一个参数是事件对象式,我们在调用这个方法时,要添加一个实际参数 $event 与之对应
    <button @click = 'fn'> 点击 </button>
    <button @click = "eventHandler"> 事件对象 </button>
    <button @click = "argumentHandler( a,b,$event )"> 事件参数 </button>
  1. 事件修饰符
    <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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值