vue的基础知识-vue基础入门
vue的使用分享
- 1. Vue简介
- 2.Vue常用指令
- 3. V-router路由系统
- 4. Vue生命周期
1. Vue简介
工欲善其事,必先利其器
1.1 Vue是什么?
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
对于渐进式的理解:
vue弱主张(对比其他框架,)
可在原有项目的基础上使用 script 标签引入,如JQ
也可用vue全家桶构建完整项目(v-cli、v-router、vuex、axios
)需先安装node.js、npm 、v-cli
下图是使用v-cli,创建项目shareProject
vue init webpack shareProject
2.1 Vue的特点是什么?
1.组件化,清晰的文档结构
2.声明式渲染,双向数据绑定(v-model),数据更新视图(页面)
3.虚拟dom,开发者可以不再需要操作dom,把重心放在处理业务逻辑上
2.Vue常用指令
与vue聊天的暗号
2.1 条件判断:v-if、v-else-if、v-else
判断条件是否成立,按条件渲染页面元素;相近的指令v-show
v-if和v-show的区别:
v-show:使用该指令的元素会始终渲染在dom中,通过改变该元素的display值来实现是否显示在页面上,不需要操作js,开销相比较小
v-if:真正的条件渲染,当满足条件时才将元素添加到dom中并渲染到页面,反之销毁元素。因此性能开销大。
2.2 列表遍历、渲染:v-for
使用v-for指令可以很方便地遍历数组或对象并将其数据展示到页面上。
2.3 事件处理:v-on (简写@)
使用v-on可以很简便地监听dom事件,如focus、click、dblclick、mousedown等,同时vue允许在v-on指令中添加js代码并执行
2.4 表单输入绑定:v-model
在一些常用的表单元素如、、,使用v-model实现双向数据绑定
2.5 属性绑定:v-bind ( 简写 :)
v-bind指令用于为元素绑定属性并能在其使用表达式,对于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
3. V-router路由系统
3.1 路由配置&&路由嵌套
v-router通过在router文件夹中的index.js配置路由表,可很方便的切换组件展示内容,使用路由嵌套则可很方便地实现页面菜单切换,层次分明易维护。
index.js
HelloWorld.vue
<template><div class="hello"><router-link to="//a">A</router-link><router-link to="/b">B</router-link><router-link to="/c">C</router-link><router-view></router-view></div>
</template>
a.vue
<template><div class="A"><p>This is page A</p><router-link to="/a/a-1">A-1</router-link><router-link to="/a/a-2">A-2</router-link><router-link to="/a/a-3">A-3</router-link><router-view></router-view></div>
</template>
b.vue
<template><div class="B"><p>This is page B</p></div>
</template>
a-1.vue
<template><div class="A-1"><p>This is page a-1</p></div>
</template>
在线例子
界面展示
此时路径为:http://localhost:8082/a(a未使用 redirect 重定向时)
(a使用 redirect 重定向时)
b.vue界面
3.2 路由跳转的几种方式
- router-link
<router-link to="/a/a-1">A-1</router-link><router-link to="{path:"/a/a-2",query:{id:1}}">A-2</router-link><router-link to="/a/a-3">A-3</router-link>
- this.$router.push() (在函数里面调用)
if (this.$route.query.from == 'bindCorp') {this.$router.push({path: '/clue/index',//以query传参是,可用/name:'xxxxx'query: {id:'1'} //以params传参时只能用name})}//取参时用 let id = this.$route.params.id
- this.$router.replace() (用法同push)
两者区别:
this.$router.push 跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面
this.$router.replace 跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)
- this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数
3.3 动态路由的使用
动态路由可实现不同的路由能访问同一个组件,这能提高组件的复用率,且一定程度上优化程序响应时间。
动态路由的参数以 :parameter的形式定义,下面例子中定义的path,会匹配所有诸如此类的路径: /c/123/abc 、/c/huhu/1234
{path: "/b/:id",name: "b",component: pageB},{path: "/c/:id/:name", // "/c/:id/user/:name"name: "c",component: pageC},
在组件中获取参数
<template><div class="C"><p>This is page C</p><p v-if="$route.params">获取到的id:{{$route.params.id}}</p><p v-if="$route.params">获取到的name:{{$route.params.name}}</p></div>
</template>
4. Vue生命周期
4.1 vue 2.xxx 生命周期流程图
钩子函数:
- 1.beforeCreate:vue实例化之前
- 2.created:实例化完毕,此时已能读取到data里面的数据,已经vue实例的方法,此时页面还没渲染
- 3.beforeMount:组件挂载前,页面仍未显示,但虚拟dom已经配置
- 4.mounted:组件挂载后,此时页面已渲染到浏览器
- 5.beforeUpdate:组件更新前
- 6.updated:组件更新后
- 7.beforeDestory:销毁前
- 8.destroyed:销毁
例子:
created () {this.getIndustryList()this.getIndustryData()// this.reloadAllAddressMap()reloadAllAddressMap(() => {this.locationList = JSON.parse(localStorage.getItem('allAddress')) || []})this.reloadCountryMap()this.$store.dispatch('getClueOriginList').then(data => {let dataList = []data.map(item => {dataList.push({name: item.label,value: '' + item.value,parent: '0'})if (item.children.length) {item.children.map(it => {dataList.push({name: it.label,value: '' + it.value,parent: '' + item.value})})} else {dataList.push({name: '',value: '',parent: '' + item.value})}})this.clueSourceOptions = dataList})},mounted () {if (this.$route.query.type == 2) {this.getClueDetail(this.$route.query.clueId, this.$route.query.status)}this.getProtectedCount()},
vue的基础知识-vue基础入门相关推荐
- [Python图像处理] 一.图像处理基础知识及OpenCV入门函数
该系列文章是讲解Python OpenCV图像处理知识,前期主要讲解图像入门.OpenCV基础用法,中期讲解图像处理的各种算法,包括图像锐化算子.图像增强技术.图像分割等,后期结合深度学习研究图像识别 ...
- Oracle 12C 基础知识与使用入门(修订版)
Oracle 12C 基础知识与使用入门 ORACLE数据库系统是美国ORACLE(甲骨文)公司提供的一款关系数据库管理系统,可在所有主流平台上运行.Oracle数据库12c 引入了一个新的多承租方架 ...
- 音视频开发入门基础知识(视频入门篇)
RTSP实时音视频开发实战课程:<RTSP实时音视频开发实战> 音视频开发入门基础知识(音频入门篇) 目录 一.前言 二.视频采集和显示 三.视频常见的格式 四.RGB转YUV和YUV转R ...
- 炒股入门基础知识之炒股入门?炒股入门股票基础知识该掌握哪些
最近几年越来越多的朋友们开始进入股票市场,为了也是自己在业余的时间,可以有一个事情做,如果能够赚钱的话自然是更好的,但是如果赔钱自己也能够乐观的面对,毕竟投资是有风险的,我们为大家介绍一下<阿尔 ...
- 音视频开发入门基础知识(音频入门篇)
RTSP实时音视频开发实战课程:<RTSP实时音视频开发实战> 音视频开发入门基础知识(音频入门篇) 目录 前言 音频的采集和播放 音频常见的格式 音频的编码 前言 在音视频开发入门基础知 ...
- Google SEO基础知识,新手入门教学。
一.什么是搜索引擎优化? 搜索引擎优化 (SEO) 是一种从搜索引擎的自然排名中获取网站目标流量的做法.与 SEO 相关的常见任务包括创建高质量内容.围绕特定关键字优化内容以及构建反向链接. 换句话说 ...
- 计算机wrod初级考试题及答案,计算机基础知识+Word基础知识+Excel基础知识试题答案解析.doc...
文档介绍: 计算机基础知识+ Word基础知识+ Excel基础知识 第一部分 一.单项选择题 1.世界上第一台电子数字计算机取名为( ). A.UNIVAC B.EDSAC C.E ...
- 使用微型计算机的基础知识,计算机应用基础考试大纲基本要求1具有使用微型计算机的基础知识.DOC...
计算机应用基础考试大纲基本要求1具有使用微型计算机的基础知识 计算机应用基础考试大纲 基本要求 ???????????????????????????????????????????????????? ...
- 公共基础知识计算机,公共基础知识计算机基础知识试题
计算机基础知识是公共基础知识考试的组成成分之一,以下是由学习啦小编整理关于共基础知识计算机基础知识试题的内容,希望大家喜欢! 公共基础知识计算机基础知识试题 1.CPU的主要功能是进行( ). A.算 ...
- 计算机硬件价钱分配,电脑基础知识计算机硬件基础课件.ppt
电脑基础知识计算机硬件基础课件 操作系统的概念 指直接控制和管理计算机的硬件和软件资源以便于有效的使用这些资源的程序. 操作系统分类 :单用户操作系统.批处理操作系统.实时操作系统.分时操作系统.网络 ...
最新文章
- (继承)virtual与访问控制
- cuda linux编译器_CUDA与Linux系统
- MySQL create table as与create table like对比
- 数据库的缓存管理[ASPNET2.0深入挖掘系列听后感]
- python中的demo_python中简单工厂实现demo
- 你必须『收藏』的Github技巧
- 老公年收入百万,却不愿拿出二十万帮我弟弟买房子,我该离婚吗?
- SpringBoot关于@RequestBody请求参数
- 每天一点正则表达式积累(三)
- catia重心主惯量矩 m1_CATIA_Knowledge_Advisor_help
- 【读书笔记】重新定义团队
- 微信创建公众号菜单时出现48001,api unauthorized rid怎么解决?
- openstack上 的云主机手动疏散案例
- From Nand to Tetris Week1 超详细2021
- tplinkwr710n改无线打印服务器,TP-Link TL-WR710N V1无线路由器AP模式设置
- C语言文件操作之----文件的读写
- Java课程设计-画图工具
- HTMl综合各大网站谈谈Meta标签和meta property=og标签含义
- 物联网是大家都看好的创业方向
- JavaWeb——JavaScript基础(三)
热门文章
- 移动应用开发技术选择六要素
- Android 获取通话记录和短信内容
- 已从IT辞职4年,誓要做个不死的闯将!!!(有多少IT兄弟想辞职创业的?)
- ios 持续获取定位 高德地图_【IOS开发】高德地图定位坐标偏差()
- 数字音频总线A2B开发详解十一(A2B一Slave板做音效处理-31段EQ,高中低音分频,延时,3D音效等)
- 腾讯20岁生日前夕,给了自己一个改变
- Payton编程实现温度转换
- android获取GPU信息;android获取GPU渲染器、供应商、版本和扩展名等信息
- android自定义计步器形状,Android自定义View仿QQ运动步数效果
- 【青少年编程】【四级】计算三角形面积