IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue(知识点一) -> 正文阅读

[JavaScript知识库]vue(知识点一)

目录

  • 概述
  • 实例化参数
  • 指令
  • 事件指令
  • v-for的使用
  • v-if、v-show的区别

概述

Vue.js(读音 /vju?/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

渐进式: 自底向上增量开发的设计 。
视图组件:带有html结构,样式以及功能的特定模块。
视图:由多个组件构成的大的区间模块。
数据绑定:后台数据更新,前台页面随之变化。
特点:

  1. 简单,上手方便
  2. .结合Angular指令与react组件思维
  3. 生态丰富(插件多) API文档完善

前段框架三驾马车

  • vue
  • react
  • angular

实例化参数(new vue)

el"#app"
选择目标标签
data:{}
指定数据
data(){return {}}
一个函数返回一个对象

指令

1.v-text 会先执行 覆盖 元素中原本的内容 但是插值表达式只会覆盖自己的占位符,默认不会闪烁
2.v-html 渲染 html标签 覆盖元素中原有元素内容
3.v-bind: 简写为: 用来绑定数据 可以写合法的js表达式
4.v-on: 简写为 @ 用来点击事件
5.v-if:DOM渲染与不渲染,不能和v-for一起使用
6.v-for:循环渲染DOM,循环时要加v-key唯一标识,循环时不能和v-if一起使用,可以用computed计算属性再循环
7.v-model:双向数据绑定,一般用于表单
8.v-show:DOM隐藏与显示,和v-if区别在于v-show是利用css控制,实际上DOM已经渲染了,而v-if是渲染与不渲染。如果DOM频繁切换可以用v-show,反之用v-if。

事件指令

1.stop 阻止冒泡 :外层和里层都有方法 点击里层会产生冒泡,也会触发外层的事件。顺序 从里到外产生事件
2.prevent 阻止浏览器默认行为 :a标签有浏览器默认行为。
3.capture 捕获事件 :点击里层先触发外层再触发里层 顺序从外到里产生事件
4.self 只触发自己本身的事件 不会产生冒泡和捕获事件 类似于阻止冒泡 但只针对自己那一层 最外层还是会被最里层冒泡冒到 stop 是阻止所有层次
5.once 事件只执行一次

@click.stop.once.prevent=“num++” 事件修饰符可以同时写多个

事件绑定

1.v-bind: 数据的单向绑定
2.v-modle :数据的双向绑定 这个只能用于表单元素中

tips: 表单元素 radio text address email select checkbox textarea

v-for的使用

  1. 可以遍历: 普通数组,对象数组,对象,还可以是数字
<div v-for='(item,key,index) in object' :key='index'>
 {{item}}--{{key}}--{{index}} 
</div>

<div v-for='(count in 10)'> </div>
v-for="item in list"
//list 要遍历的数组
//item 当前遍历的项目

tips:在遍历对象的时候有多个index索引,遍历数字时是从1开始的。绑定key时属性值必须是number或者string

注意:

添加key属性可以优化v-for的渲染
让vue更好识别当前渲染的节点
特别是在排序 ,过滤等操作的时候
不建议key的值使用循环的索引

v-if、v-show的区别
1.v-if 有较高的切换性能 , 适合元素可能永远不会被用户看到。
2.v-show 有较高的初始渲染消耗,适合元素频繁切换。
注意:

v-if隐藏时候直接移除节点, v-show是通过css方式隐藏
频繁切换显示与隐藏用v-show 一次性切换显示用v-if

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-28 12:18:13  更:2021-10-28 12:20:37 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 19:07:27-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码