Vue重点介绍

我不是女神ヾ 2023-06-08 06:14 7阅读 0赞

## 01-基础-vue是什么? ##

> vue.js 是前端js框架
> 
> 库和框架的区别(方法是否需要自己来调用)

## 02-基础-为什么学vue ##

> 传统技术栈无法解决复杂项目的业务逻辑
> 
> 企业需求
> 
> vue最容易上手

## 03-基础-vue能做什么 ##

> 几乎没有DOM操作
> 
> 适合SPA项目开发

## 04-基础-vue特点 ##

> 通过 **指令** 扩展了 HTML，通过 **表达式** 绑定数据到 HTML

## 05-基础-一些链接 ##

> vue官网->收藏

## 06-基础-vue三种安装方式 ##

1.  本地文件
2.  cdn引入
3.  npm i vue

## 07-基础-HelloWorld ##

1.  在视图中 div\#app
2.  引入vue.js
3.  new Vue(\{\})
4.  Vue实例的选项: el data
5.  在视图中 通过\{ \{\}\}使用data中的数据

## 08-基础-实例选项-el ##

> 通常赋值 id选择器
> 
> 注意: 不能直接管理html或者是body

## 09-基础-实例选项-data ##

1.  响应式数据
2.  可以在视图中\{ \{数据\}\} 可以vm.属性访问数据

## 10-基础-实例选项-methods ##

1.  在视图中 \{ \{fn1()\}\} 调方法
2.  vm.fn1()
3.  在视图中 通过指令 @click=“fn1()”

注意: 不推荐使用箭头函数 this指向的不是vm对象

## 11-基础-术语解释-插值表达式 ##

> \{ \{data中的数据\}\}
> 
> 注意: var a=10 if for不能写!

## 12-基础-术语解释-指令 ##

> 所有指令v-开头
> 
> 所有指令都在开始标签位置
> 
> 每个指令都是为了取代DOM操作
> 
> 作用:增强html功能

## 13-基础-系统指令-v-text和v-html ##

1.  v-text作用: 替换标签全部内容
    
     *  \{ \{\}\}会替换出现插值表达式的位置
2.  v-html作用:替换标签全部内容
    
     *  v-html可以识别字符串中的标签

> 最常用的 \{ \{\}\}
> 
> 注意: 不推荐使用v-html 安全问题(跨站脚本攻击)

## 14-基础-系统指令-v-if和v-show(欠视频) ##

> 条件渲染
> 
> 当标签频繁显示与隐藏 切换频繁 v-show (display)
> 
> 当标签频繁显示与隐藏 切换不频繁 v-if

## 15-基础-系统指令-v-on ##

> 作用:绑定事件
> 
> 语法: @事件名.修饰符=“methods中的方法”
> 
> 修饰符: once和prevent
> 
> 注意: $event表示事件对象

## 16-基础-系统指令-v-for-数组 ##

> 最终写法 (value,index) in data中的数组名
> 
> 解释: value指数组中的元素值 index指每个元素的索引/下标

## 17-基础-系统指令-v-for-对象 ##

> 最终语法 (v,k,i) in data中的对象名
> 
> 解释: v指对象中的值 k指key名 i指的键值对的索引 从0开始

## 18-基础-系统指令-v-for-key ##

> 数组最终写法
> 
>  *  
>  *  对象最终写法
>  *  
>  *  原因: 渲染效率更高

## 19-基础-系统指令-v-bind-基础用法 ##

> 作用: 绑定标签的任何属性
> 
> 场景: 当标签的属性值不确定时
> 
> 语法: :要绑定的属性名=“data中的数据”

## 20-基础-系统指令-v-model-基础用法 ##

> 作用: 绑定表单元素

## 21-基础-表格案例-效果演示 ##

1.  列表渲染
2.  添加商品
3.  删除商品
    
    > 静态页面准备好

## 22-基础-表格案例-列表渲染 ##

. 找到重复出现的标签结构

1.  确定要用的指令 v-for列表渲染 (v,i) in list数组
2.  在data中提供一个数组list
3.  在视图中 通过\{ \{\}\}使用数据

## 23-基础-表格案例-处理无数据时的渲染 ##

> v-if=“list.length===0”

## 24-基础-表格案例-添加商品 ##

1.  找到输入框 -> v-model=“data中的数据”
2.  在data中提供一个itemname数据
3.  找到添加按钮 绑定事件 @click=“addItem()”
4.  在methods中提供addItem方法
5.  在addItem()中 向list数组中添加元素

## 25-基础-表格案例-删除商品 ##

1.  找到删除按钮 @click=“deleItem()”
2.  在methods提供deleItem()
3.  在deleItem()中 从list中移除当前元素

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue、React重点详解大全

Vue 生命周期 vue2: 总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreate阶段，由于还未初始化，vue

曾经终败给现在/ 2023年09月26日 21:08/ 0 赞/ 25 阅读

相关 Vue重点介绍

01-基础-vue是什么? > vue.js 是前端js框架 > > 库和框架的区别(方法是否需要自己来调用) 02-基础-为什么学vue > 传统技术栈无法解

我不是女神ヾ/ 2023年06月08日 06:14/ 0 赞/ 8 阅读

相关重点函数 | ISCROSSFILTERED用法介绍

[重点函数 | ISCROSSFILTERED用法介绍 - 知乎 (zhihu.com)][_ ISCROSSFILTERED_ - _ _zhihu.com] [_ IS

绝地灬酷狼/ 2022年10月12日 01:10/ 0 赞/ 172 阅读

相关 VUE介绍

[Vue.js 是什么][Vue.js] Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可

末蓝、/ 2022年09月13日 04:11/ 0 赞/ 146 阅读

相关 ES6,ES7重点介绍

1. 字符串模板  var str = '我是时间:'+new Date();

悠悠/ 2022年02月01日 11:11/ 0 赞/ 269 阅读

相关 Vue介绍

本文代码均源自Vue.js官方文档：https://cn.vuejs.org/v2/guide/ 非商业用途自由转载，保持署名，注明出处！ ---------------

冷不防/ 2021年11月16日 17:40/ 0 赞/ 301 阅读

相关 vue三大重点之vue cli

vue三大重点之vue-cli 1、什么是vue-cli？ vue-cli（vue脚手架）就是vue官方的基于webpack的用于快速初始化构建vue项目的工具。就

小灰灰/ 2021年09月03日 07:45/ 0 赞/ 292 阅读

相关 vue三大重点之vue-router

vue三大重点之vue-router 1、什么是vue中的前端路由思想？所谓后端路由就是用户在浏览器地址请求url然后后端的controller就会跳转到对应的这

左手的ㄟ右手/ 2021年09月03日 05:26/ 0 赞/ 382 阅读

相关 ThinkPHP6——重点介绍

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

以你之姓@/ 2021年07月25日 11:28/ 0 赞/ 447 阅读

相关 vue介绍

什么是vuevue是一套用于构建用户界面的渐进式框架。框架和库的区别库是一种插件，是一种封装好的特定方法的集合。提供给开发者使用，控制器在使用者手里。框架是一套架构

水深无声/ 2021年07月24日 17:54/ 0 赞/ 413 阅读