Vue基础
介绍
概念：Vue是一个用于“构建用户界面”的“渐进式”“框架”
构建用户界面
渐进式
Vue的两种使用方法：
1.Vue核心包开发
场景：局部模块改造
2.Vue核心包&Vue插件工程化开发
场景：整站开发
框架
优点：大大提升开发效率（70%）
缺点：需要理解记忆规则 -> 官网
Vue快速上手
创建Vue示例，初始化渲染
1.准备容器
2.引包-开发版本（官网）
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>3.创建Vue实例对象
插值表达式{ {}}
插值表达式是一种Vue的模板语法
1.作用
利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会将其计算出来一个结果
2.语法
{ { 表达式 }}
使用的数据必须存在（data）
<p>{ { hobby }}</p>支持的是表达式，而非语句，比如：if for ...
<p>{ { if }}</p>不能再标签属性中使用{ { }}插值
<p title="{ { username }}">我是p标签</p>
Vue核心特性：响应式
我们已经掌握了基础的模板渲染，其实除了基本的模板渲染，Vue背后还做了大量工作。
比如：数据的响应式处理 -> 响应式：数据变化，视图自动更新
数据改变，视图会自动更新
聚焦于数据 -> 数据驱动视图
使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可
Vue指令
Vue会根据不同的【指令】，针对标签实现不同的【功能】
指令：带有 的 特殊 标签属性v-前缀
V - html
作用：设置元素的innerHTML
语法：v-html="表达式"
<div v-show="<a href="https://www.baidu.com">学好前端进大厂</a>"></div>v-show和v-if
V - show
作用：控制元素显示隐藏
语法：v-show=“表达式” 表达式值true显示，false隐藏
<div v-show="true"></div>
<div v-show="false"></div>原理：切换display：none控制显示隐藏
场景：频繁切换显示隐藏的场景
V-if
作用：控制元素显示隐藏（条件渲染）
语法：v-if=“表达式”表达式值true显示，false隐藏
<div v-if="false"></div>
<div v-if="true"></div>原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换场景
V-else和V-else-if
作用：辅助v-if进行判断渲染
语法：v-else v-else-if=“表达式”
<div v-if="score >= 90">成绩评定A：奖励电脑一台</div>
<div v-else-if="score >= 70 && score < 90">成绩评定B：奖励周末郊游</div>注意：需要紧挨着v-if 一起使用
V-on
作用：注册事件=添加监听 + 提供处理逻辑
语法
<button v-on:click="count--">-</button>
<button @click="count++">+</button><button @click="fn"></button>
简写：@事件名
method函数内的this指向Vue实例
调用传参
V-bind
作用：动态的设置html的标签属性 -> src url title ...
语法： v-bind：属性名=“表达式”
<img v-bind:src="imgUrl" alt="">
<img :src="imgUrl" alt="">简写形式 :属性名=“表达式”
V-for
作用：基于数据循环，多次渲染整个元素 ->数组、对象、数字...
遍历数组语法：
v-for=“(item,index) in 数组”
-
item每一项，index下标
-
省略index：v-for="item in 数组"
<li v-for="(item,index) in list"> {
{ item }} </li>
<li v-for="item in list"> {
{ item }} </li>V-for中的key
语法：key属性=“唯一标识”
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
v-for中的key-不加key
v-for的默认行为会尝试原地修改元素（就地复用）
Vue指令 V-model
作用：给不当元素使用，双向数据绑定 -> 可以快速获取或设置表单元素内容
-
数据变化 -> 视图自动更新
-
视图变化 -> 数据自动更新
语法：v-model='变量'
账号：<input type="text" v-model="username">
密码：<input type="password" v-model="password">更多
参考官网：API — Vue.js
原文地址：https://blog.csdn.net/m0_70534200/article/details/145288461
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！