vue的基本使用和指令

今天针对vue基本的使用和指令展开了学习,学习内容如下:

1.vue实体对象的创建:

html 复制代码
<body>
    <!-- 
        创建Vue实例,初始化渲染
        1. 准备容器 (Vue所管理的范围)
        2. 引包 (开发版本包 / 生产版本包) 官网
        3. 创建实例
        4. 添加配置项 => 完成渲染
    -->
    <!-- Vue所管理的范围 -->
    <div id="app">
        <!-- 这里将来会编写一些用于渲染的代码 -->
        {{msg}}
    </div>
</body>
<!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="js/vue.js"></script>
<script>
     // 一旦引入 VueJS核心包,在全局环境,就有了 Vue 构造函数
    const vue = new Vue({
        // 通过 el 配置选择器,指定 Vue 管理的是哪个盒子
        el:'#app',
        // 通过 data 提供数据
        data:{
            msg:'hello world'
        }
    })
</script>

2.vue实体对象的基本组成部分:

el:表示作用范围的选择器;

data:表示定义的一些变量;

methods:定义的一些方法;

3.在data对变量进行初始化的时候用:,而在方法中对于变量的赋值使用=,创建也用=

4.通过在HTML标签中加:

(1)v-show和v-if:进行DOM的显示和隐藏,区别在于v-show是控制的display:none,而v-if是销毁和创建的一个过程,因此我们在频繁需要改变显示和隐藏状态的情境下选用v-show,在不经常改变状态的位置选用v-if;

(2)v-else和v-else-if:就是简单的条件筛选;

(3)v-on:用于事件的处理,后面可以加表达式,方法,可以简写为@;

(4)v-bind:用于动态设置html标签的属性 比如:src、url、title,可以简写为:

(5)v-for指令:v-for = "(item,index) in 数组" item是遍历的元素 index是下标。当前页可以省略遍历下标。省略 index的写法: v-for = "item in 数组",一般需要在后面加 :key=,key用于给表项添加唯一标识,便于vue进行列表项的正确排序复用;

(6)v-model:双向绑定作用,一般用于绑定表单数据:input、radio、select可以快速的获取或者设置数据;

以上就是我今天的学习内容

相关推荐
ViavaCos6 分钟前
pnpm v11 的安全策略,让我踩了个坑
前端
To_OC7 分钟前
从一段定时器代码,重新捋清 JS 同步、异步与 Promise
前端·javascript·代码规范
持敬chijing9 分钟前
Web渗透之前后端漏洞-XSS漏洞原理攻击防御全流程
前端·安全·web安全·网络安全·网络攻击模型·安全威胁分析·xss
程序员黑豆15 分钟前
AI全栈开发 - Java:注释
前端·后端·ai编程
痕忆丶25 分钟前
Typora 的替代marktext,marktext切换中文
前端
拙慕JULY30 分钟前
小程序返回 base64 文件报错
开发语言·javascript·小程序
数据知道31 分钟前
字体与排版防线:ClientRects 与系统字体枚举的底层拦截与伪造
javascript·数据采集·指纹浏览器·风控·浏览器指纹
小二·33 分钟前
Spring Boot 3 + Vue 3 全栈开发实战
vue.js·spring boot·后端
羊羊小栈37 分钟前
Uplift营销供应链协同决策系统(基于Uplift因果推断与运筹优化算法)
前端·人工智能·算法·毕业设计·大作业
阿猫的故乡39 分钟前
Vue组合式函数(Composables)从入门到实战:鼠标跟踪、请求封装、本地存储……全案例拆解
前端·vue.js·计算机外设