vue2+3基础

vue2+3

vue快速上手

什么是vue

vue是一个用于构建用户界面的渐进式框架

vue核心包开发:局部模块改造

vue核心包+vue插件 工程化开发:整站开发

优点:大大提升开发效率

缺点:需要理解记忆规则

vue实例

初始化渲染:

核心四步

1.准备容器

2.引包 开发版本的包/生产版本的包

3.创建vue实例 new vue(){}

4.指定配置项

el 指定挂载点

data 提供数据

学习时使用开发版本

引入开发版本的包

.<div id="app"> {{msg}}

{{count}}

</div>

可以在里面加标签

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"><script>

const app = new Vue({

el: '#app',

data:{

msg:'hello vue'

count:666

}

methods{}

})

插值表达式

作用:利用表达式进行插值,渲染到页面中

{{表达式}}

使用的数据必须存在,支持表达式而非if那些语句,不能再标签属性里面使用{{}}插值

响应式特性

数据变化,对应的视图自动更新

在vue开发时可以在console里面进行修改

访问数据: 实例.属性名

开发者工具:装插件调试vue应用

vue指令

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

如 v-html="src" 动态地去改变innerhtml

解析标签使用vue指令

v-show

控制元素显示隐藏

v-show = "表达式" true显示,false隐藏

切换css里面的display:none

在频繁切换显示隐藏的场景

v-if

控制元素显示隐藏(条件渲染) true显示,false隐藏

控制元素的创建和移除

要么显示,要么隐藏,步频繁切换的场景

v-else

v-else-if

辅助v-if进行判断渲染,一定得贴近v-if

v-on

注册事件 = 添加监听 + 处理逻辑

v-on : 事件名 = "内联语句"

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

v-on: 可以写成@

this指向当前的实例

v-on 调用传参

@click="fn(参数1,参数2)"

v-bind 动态设置html的标签属性

v-bind:属性名="表达式"

v-bind:src 可以省略成 :src v-bind可以省略

v-for 基于数据循环,多次渲染整个元素

v-for="(item,index) in 数组" item 每一项 index索引,index和括号都可以省略

v-for中的key="唯一标识"

给列表项添加唯一标识,便于vue进行列表项的正确排序复用

v-for="":key="item.id