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可以快速的获取或者设置数据;

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

相关推荐
kyriewen3 小时前
Anthropic 估值逼近万亿美元,Claude Sonnet 5 + Claude Science 一天两连发
前端·ai编程·claude
小徐_23335 小时前
Wot UI 2.2.0 发布:Button 新增 subtle,VideoPreview 预览体验继续增强
前端·微信小程序·uni-app
山河木马6 小时前
矩阵专题3-怎么创建投影矩阵(uProjectionMatrix)
javascript·webgl·计算机图形学
天蓝色的鱼鱼7 小时前
关于 CSS 你可能不知道的属性,但关键时刻很有用
前端·css
泯泷8 小时前
第 2 篇:设计第一套字节码:Opcode、Instruction 与 Constant Pool
前端·javascript·安全
妙码生花8 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(十五):优化细节、网络请求封装
前端·后端·ai编程
泯泷8 小时前
第 1 篇:从 1 + 2 开始:亲手写出第一台 JSVM
前端·javascript·安全
团团崽_七分甜8 小时前
Spring Boot 核心知识点总结
前端
lichenyang4538 小时前
从一个按钮开始,理解 ASCF 框架到底在做什么
前端