vue详解(1)

1. 创建 Vue 实例,初始化渲染的核心步骤:

  1. 准备容器
  2. 引包 (官网) - 开发版本 / 生产版本
    CDN:<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  3. 创建 Vue 实例 new Vue()
  4. 指定配置项 el data => 渲染数据
    ① el 指定挂载点,选择器指定控制的是哪个盒子
    ② data 提供数据

2. 插值表达式

作用及语法:

利用表达式进行插值,将数据渲染页面中

语法格式:{{ 表达式 }}

插值表达式的注意点:

① 使用的数据要存在 (data)

② 支持的是表达式,而非语句 if ... for

③ 不能在标签属性里面使用

3. 如何访问或修改数据呢?

data中的数据, 最终会被添加到实例上

  • 访问数据: "实例.属性名"
  • 修改数据: "实例.属性名" = "值"
    app.message = "你好"

4. Vue 指令

定义:带有 v- 前缀标签属性 ;不同属性 对应 不同的功能

v-html:

作用:动态解析标签

语法:v-html = "表达式"

场景:动态设置元素 innerHTML

Vue 指令 v-show 和 v-if

v-show
  • 作用: 控制元素显示隐藏
  • 语法: v-show = "表达式 " 表达式值 true 显示false 隐藏
  • 原理: 切换 display:none 控制显示隐藏
  • 场景: 频繁切换显示隐藏的场景(下拉框)
v-if
  • 作用: 控制元素显示隐藏(条件渲染
  • 语法: v-if = "表达式 " 表达式值 true 显示false 隐藏
  • 原理: 基于条件判断 ,是否 创建移除元素节点
  • 场景: 要么显示,要么隐藏,不频繁切换的场景(登录成功与否)

Vue 指令 v-else 和 v-else-if

  • 作用: 辅助 v-if 进行判断渲染
  • 语法: v-else v-else-if = "表达式"
  • 注意: 需要紧挨着 v-if 一起使用

Vue 指令 v-on

  • 作用: 注册事件 = 添加监听 + 提供处理逻
  • 语法:
v-on:事件名 = "内联语句"

简写:@事件名

javascript 复制代码
<button v-on:click="count++">按钮</button>
//简写写法
<button @click="count++">按钮</button>
v-on:事件名 = "methods中的函数名"
javascript 复制代码
<div id="app">
<button @click="fn">切换显示隐藏</button>
</div>
<script>
    const app4 = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      methods: {
        fn () {
          // 让提供的所有methods中的函数,this都指向当前实例app4
          // console.log('执行了fn', app4.isShow)
          // console.log(app4 === this)
          this.isShow = !this.isShow
        }
      }
    })
  </script>
  • 注意:methods函数内的 this 指向 Vue 实例
Vue 指令 v-on 调用传参
javascript 复制代码
<div id="app">
<button @click="fn(2,3)">按钮</button>
</div>
<script>
    const app4 = new Vue({
      el: '#app',
      methods: {
        fn (a1,b1) {
         console.log(`这是一个${a1+b1} 函数`)
        }
      }
    })
  </script>

Vue 指令 v-bind

  • 作用: 动态的设置html的标签属性 → src url title ...
  • 语法: v-bind**:属性名**="表达式"
  • 注意: 简写形式 :属性名="表"
javascript 复制代码
<div id="app">
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
 <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: '图片路径',
        msg: 'hello 波仔'
      }
    })
  </script>

Vue 指令 v-for

  • 作用: 基于数据 循环, 多次 渲染整个元素→ 数组、对象、数字
  • 遍历数组语法:v-for = "(item, index ) in 数组"
  • item 每一项, index 下标
  • 另一种写法省略index: v-for = "item in 数组"

v-for 中的 key

key作用:给元素添加的唯一标识 ,便于Vue进行列表项的正确排序复用

javascript 复制代码
要分清修改元素内容和删除元素的区别:不加key(元素没变,变的是里面的内容罢了)

注意点:

  • key 的值只能是 字符串数字类型
  • key 的值必须具有 唯一性
  • 推荐使用 id 作为 key(唯一),不推荐使用 index 作为 key(会变化,不对应)
    <li v-for="(item,index) in xxx" :key="唯一值">

Vue 指令 v-model

1.作用:给 表单元素 使用, 双向数据绑定 → 可以快速 获取 设置 表单元素内容

① 数据变化 → 视图自动更新

视图 变化 → 数据 自动更新

2.语法: v-model = '变量'

相关推荐
神仙别闹2 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器9 分钟前
指定阿里镜像原理
前端
枷锁—sha13 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha15 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜31 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2444 分钟前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss