vue的小入门

2024-01-03 17:02:02

  1. vue的快速上手

Vue概念

  • 是一个用于构建用户界面的渐进式框架
  • 优点：大大提高开发效率
  • 缺点：需要理解记忆规则

创建Vue实例

步骤：

  1. 准备容器
  2. 引包
  3. 创建Vue实例new Vue()
  4. 指定配置项el data=>渲染数据

el指定挂载点，选择器指定控制的是哪个盒子

data：提供数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <h1> {{message}}</h1>
       <h2>{{count}}</h2>
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            message:"我是智障",
            count:19
        }
    })
</script>

插值表达式

插值表达式是一种Vue的模板语法

  1. 作用：利用表达式进行插值，渲染到页面
    1. 表达式：可以被求值的代码，js会算出一个结果
  2. 语法：{{表达式}}
  3. 注意点
    1. 使用的数据必须存在
    2. 支持的式表达式而非语法
    3. 不能在标签属性中使用{{}}插值

Vue的核心特征：响应式

数据改变，视图自动更新

访问数据：实例.属性名

修改数据：实例.属性名=“值”

开发者工具：

  1. 在拓展中搜索VueDevtools下载安装
  2. 给他权限
  3. OK

Vue指令

Vue会根据不同的指令，针对标签实现不同的功能

指令：带有v-前缀的特殊标签属性

v-html

v-html="表达式" ->动态设置元素innerHTML

v-if(条件渲染)

作用：控制元素显示隐藏（条件渲染）

语法：v-if="表达式" 表达式值：true 显示，flase 隐藏

原理：根据条件判断，是否创建或移除元素节点

场景：不频繁切换的场景

v-show（显示隐藏）

作用：控制元素显示隐藏

语法：v-show="表达式"

原理：切换display:none

场景：频繁切换显示隐藏场景

v-if v-else v-else-if

作用：复制v-if进行判断渲染

语法：v-else v-else-if="表达式"

注意：需要紧挨着v-if一起使用

v-on

  1. 作用：注册事件=添加监听+提供处理逻辑
  2. 语法:
    1. ? v-on:事件名="内联语句“
 <button v-on:click="count++">+</button>
 //简写
  <button @click="count++">+</button>

? ? ? ? ?2.v-on:事件名="methods中的函数名"

????????注意：

  • 内联语句可以直接拿data中的数据
  • method中是不能直接访问到data中的数据的，需要的是app.属性
  • 在methods中的函数，this都是指向当前实例
  1. 调用传参
    1. 可以额外传参
 
 <button @click="func(10)">+10</button> 
 /.../
 methods:{
            func(num){
                app.count=app.count+num;
            }
        }

v-bind

作用：动态的设置html的标签属性 ->src url title

语法：v-bind:属性名="表达式" 简写：:属性名="表达式"

<div v-else> <img v-bind:src="imageUrl[page]" /> </div>

v-for

作用：基于数据循环，多次渲染整个元素 →数组、对象、数字

语法：v-for="(item,index) in 数组" (item每一项，index下标)

   <li v-for="(item,index) in list">
                {{item}}
            </li>
v-for中的key
    <ul>
                <li v-for="(item,index) in book" :key="item.id ">
                   <span>{{item.id}}</span><span>{{item.name}}</span><span>{{item.author}}</span><button @click="fun1(index)">删除</button>
                </li>
            </ul>

加key相当于每一列加了名字

不加v-for的默认行为会尝试原地修改元素（就地复用）

v-model

作用：给表单元素使用，双向数据绑定--->可以快速获取或设置表单元素内容

语法：v-model="变量"

<input type="text" name="" id="username"v-model="username"><br> <input type="password" id="password" v-model="password"><br>

指令修饰符

通过"."指明一些指令的后缀，不同后缀封装了不同的处理操作 ---》简化代码

按键修饰符

@keyup.enter --> 键盘监听

v-model修饰符

v-model.trim -> 去除首尾空格 v-model.number -> 转数字

事件修饰符

@事件名.stop -->组织冒泡 @事件名.prevent -->组织默认行为

V-bind对于样式控制增强

为了方便开发者进行样式控制，Vue扩展了v-bind的语法，可以针对class类名和style行内样式进行控制

操作class（控制一批属性）

语法： v-bind:class="对象/数组"

1.对象-> 键就是类名，值是布尔值。如果值为true,有这个类，否则没有这个类
<div class="box" :class="{类名:布尔值，类名2：布尔值}"></div>
例子：    <a href='#' :class="{blue:index ===activeId}" @click="fn(index)">{{item}}</a>

2.数组-> 数组中的所有类，都会添加到盒子上，本质就是一个class列表
<div class="box" :class="[类名,类名2,类名3]"></div>
例子：<div width="20px" height="100px" :class="['area','pink']">

操作style(控制单个属性的变化)

语法: v-bind:style="样式对象"

<div class="box" :style={css属性名1:css属性子，css属性名：css属性值}"></div>

v-model应用于其他表单元素

  • 常见的表单元素都可以用v-model绑定关联 -》快速获取或设置表单元素的值
  • 它会根据控件类型自动选取正确的方法来更新元素
input:text ->value textarea ->value input:checkbox ->checked input:radio ->checked select ->value

下一篇：计算属性+声明周期

文章来源:https://blog.csdn.net/m0_62645012/article/details/135364740
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。