前端框架学习 Vue (1) 概念,常用指令

Vue是什么

概念:

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

1.构建用户界面:基于数据动态渲染页面

**2.渐进式:**循序渐进的学习(学一点就能用一点)

(1)Vue核心包开发

场景:局部模块改造

(2)Vue核心包&Vue插件 工程化开发

场景:整站开发

**3.框架:**一套完整的项目解决方案,提升开发效率(理解记忆规则)

优点:大大提升开发效率(70%以上)

缺点:需要理解记忆规则->官网

创建Vue实例初始化渲染

核心步骤:

1.准备容器

2.引包(官网)-开发版本/生产版本

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

3.创建Vue实例 new Vue()

4.指定配置项 -> 渲染数据

// 一旦引入 VueJS核心包,在全局环境,就有了 Vue 构造函数

const app = new Vue({

// 通过 el 配置选择器,指定 Vue 管理的是哪个盒子

el: '#app',

// 通过 data 提供数据

data: {

msg: 'Hello World',

count: 666

}

})

(1)el指定挂载点,配置选择器,指定Vue管理的是哪个盒子

(2)data提供数据

插值表达式 {{ }}

插值表达式是一种Vue的模板语法

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

**表达式:**是可以被求值的代码,js引擎会将其计算出一个结果

2.语法: {{ 表达式 }}

<p>{{ nickname }}</p>

<p>{{ nickname.toUpperCase() }}</p>

<p>{{ nickname + '你好' }}</p>

<p>{{ age >= 18 ? '成年' : '未成年' }}</p>

<p>{{ friend.name }}</p>

<p>{{ friend.desc }}</p>

插值表达式是一种Vue的模板语法

<div id="app">

{{ msg }}

</div>
data:{

msg: 'Hello world'

}

3.注意点

(1)使用的数据必须存在(data中赋值)

(2)支持的是表达式,而非语法,比如:if for等(三元运算符可以)

(3)不能在标签属性中使用{{ }}插值

Vue核心特征:响应式

我们已经掌握了基础的模板渲染,其实除了基础的模板渲染,Vue背后还做了大量工作

比如:数据的响应式处理 ->响应式:数据发生变化,试图自动更新

如何访问&修改?data中的数据,最终会被添加到实例上

(1)访问数据:"实例.属性名"

(2)修改数据:"实例.属性名" = "值"

数据改变,试图自动更新

聚焦于数据 ->数据驱动试图

使用Vue开发,关注业务的核心逻辑,根据业务修改数据即可

安装Vue Devtools开发者工具:装插件调试Vue应用

在浏览器插件中安装Vue.js devtools

打开Vue运行的页面,调试工具中Vue栏,即可查看修改数据,进行调试

Vue指令

Vue会根据不同的指令,针对标签实现不同的功能

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

v-html

作用:设置innerHTML

语法:v-html="表达式"(能解析html标签显示在网页中)

v-show

**1.作用:**控制元素显示隐藏

2**.语法:**v-show = "表达式" 表达式true显示,false隐藏

**3.原理:**切换display:none控制显示隐藏

**4.场景:**频繁切换显示隐藏的场景

v-if

**1.作用:**控制元素显示隐藏

**2.语法:**v-if = "表达式" 表达式true显示,false隐藏

**3.原理:**基于条件判断,是否创建或移除元素节点

**4.场景:**要么显示,要么隐藏,不频繁切换的场景

v-else v-else-if

1.作用:辅助v-if进行判断渲染

2.语法:v-else v-else-if = "表达式"

3.注意:需要紧挨着v-if一起使用

v-on

**1.作用:**注册事件 = 添加监听 + 提供处理逻辑

2.语法 :

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

(2)v-on.事件名 = "methods中的函数名"

3.简写:@事件名

调用传参

v-bind

1.作用: 动态设置html标签属性 ->src url title等

2.语法:v-bind:属性名="表达式"

3.注意: 简写形式 :属性名 = "表达式"

v-for

1. 作用: 基于数据循环,多次渲染整个元素 ->数组,对象,数字...

2.遍历数组语法:

v-for = "(item,index) in 数组"

item每一项,index下标

省略index :v-for ="item in 数组"

书架删除案例

v-for 中的key

语法:key属性 = "唯一标识"

作用: 给列表项添加唯一标识.便于Vue进行列表项的正确排序复用.

v-for中的key-不加key

v-for的默认行为会尝试原地修改元素(就地复用)

注意点:

1.key的值只能是字符串或数字类型

2.key的值必须具有唯一性

3.推荐使用id作为key(唯一),不推荐使用index作为key(会变化,不对应)

v-model

1.作用: 给表单元素使用,双向数据绑定 ->可以快速 获取 或 设置 表单元素内容

(1)数据变化 ->试图自动更新

(2)试图变化 ->数据自动更新

语法: v-moel ="变量"

相关推荐
用户516816614584110 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦10 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He10 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ15 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊15 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码16 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark1 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼1 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_1 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing1 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化