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

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

相关推荐
妙码生花5 小时前
PHP 各框架下和 Go 的性能比较
前端·后端·go
Csvn5 小时前
TypeScript 类型性能:让类型体操不再卡死编译器
前端
万少6 小时前
等不到 Apple 的折叠 iPhone,我用 DeepV4.1Flash + workBuddy 一句话自己造了一台
前端·javascript·后端
梦曦i6 小时前
uni-router v0.2.0重磅发布:全链路拦截+重复导航优化
前端·uni-app
数据知道6 小时前
AES 加密实战——模式选择(ECB/CBC/GCM)与安全陷阱
前端·网络·安全
志尊宝6 小时前
Vue3 零基础每日笔记(009):watch 侦听器——数据一变就“做事“
vue.js·笔记·缓存
一夜枫林6 小时前
vue实现scroll-view上下滑动右侧左右滑动
前端·javascript·vue.js
志尊宝6 小时前
Vue3 零基础每日笔记(011):生命周期钩子——在正确的时间做正确的事
javascript·vue.js·笔记
苏三的开发日记7 小时前
npm EPERM:无法写入 `.npmrc` 的排查与解决
前端
YWL7 小时前
OpenLayers地图分享:URL参数同步+分享链接生成,让用户一键分享地图视角
前端·javascript·vue·openlayers