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

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

相关推荐
anew___28 分钟前
《从零手写操作系统 (20):ELF加载器——让OS读懂现代编译器》
java·服务器·前端
ss27328 分钟前
AI全栈实战 | 2.3-01 组件库实战:Element Plus 怎么搭出专业界面,过度封装为什么成维护负担
前端·javascript·elementui·vue
对空六课34 分钟前
动态按钮ID变化时的稳定埋点标识设计
前端·数据分析
福兮说38 分钟前
URL 编码的七个坑:c++ 传到后端变空格、%25 套娃、截断 emoji 直接报错
开发语言·前端·javascript·node.js·url
吴声子夜歌43 分钟前
Nginx应用与运维——Nginx Web服务应用实战(Python网站的搭建)
运维·前端·nginx
小的时候可菜了1 小时前
JS 异步的本质:从单线程到 thenable(一条进化链)
开发语言·前端·javascript
liangshanbo12151 小时前
Webpack vs Vite 底层原理高频追问的问题
前端·webpack·node.js
可乐鸡翅yeah_1 小时前
hls.js 配置 loadStartPosition,点播起始播放位置踩坑
开发语言·javascript·网络协议·ecmascript·m3u8在线
web打印社区2 小时前
Windows 网页静默打印设置步骤:客户端、防火墙与联调清单
开发语言·前端·javascript·chrome·pdf·ecmascript
恋猫de小郭2 小时前
KMP 又改了编译流程, Separate Compilation 禁止了 `commonMain` 的依赖穿透
android·前端·flutter