位置: IT常识 - 正文

Vue基础教程(下篇)(vue基础知识)

编辑:rootadmin
Vue基础教程(下篇)

推荐整理分享Vue基础教程(下篇)(vue基础知识),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue入门教程简书,vue入门视频教程,vue教程pdf下载,vue入门教程简书,vue入门视频教程,vue入门视频教程,vue入门视频教程,vue教程书,内容如对您有帮助,希望把文章链接给更多的朋友!

😊作者简介:大家好,我是是你的大头呢,一名大三学生,考研备考中。让我们一起加油,一起努力! 🧑‍💻博客主页:是你的大头呢 🥰欢迎关注🎊点赞👑收藏⭐留言✒ 如果觉得博主的文章还不错的话,三连支持一下博主。 💪格言:未来仍很未知,请努力。

目录一.Vue-cil的安装与使用1.什么是Vue-cil2.安装Vue-cil2.1安装所需要的环境2.2安装vue-cil3.创建一个vue项目4.vue项目目录二.路由1.什么是路由2.路由的使用3.路由嵌套4.参数传递一.Vue-cil的安装与使用1.什么是Vue-cil

Vue-cli是vue.js的脚手架,用于自动生成vue.js + webpack的项目模板。可以轻松的创建新的应用程序而且可用于自package.json文件是项目根目录下的一个文件,定义该项目开发所需要的各种模块以及一些项目配置信息。

2.安装Vue-cil2.1安装所需要的环境

Node.js:

1.使用官方下载页下载:https://nodejs.org/zh-cn/download/

下载自己电脑对应的安装包,然后安装,使用默认配置安装一直点next即可,安装路径默认在C:\Program Files下,也可以自定义修改。

说明:安装好了node.js,就安装了npm。

2.确认node.js是否安装成功

打开cmd(最好使用管理员运行),输入node -v,查看是否能显示出对应的版本号;输入npm -v,查看是否能显示出对应的版本号。

淘宝镜像安装:

//方法一,一次性安装,无需重复安装(推荐使用) npm install -g cnpm --registry=https://registry.npm.taobao.org//方法二,只需要使用一次 npm install --registry=https://registry.npm.taobao.org//检查是否安装成功 $ cnpm -v2.2安装vue-cil//在对应的文件夹打开终端,安装npm install --global vue-cli//查看是否安装成功npm -V (v大写)3.创建一个vue项目

1.在对应的文件目录下打开cmd,输入vue create 项目名称

2.根据实际情况选择vue3或者vue2

3.等待创建完成后,输入npm run serve

4.成功后,一个项目就创建完成

4.vue项目目录

Vue基础教程(下篇)(vue基础知识)

1、node_modules:npm 加载的项目依赖模块

2、src:开发的目录,开发工作大部分都在这个目录里。里面包含了几个目录及文件:

1)assets:资源目录,放一些图片或者文件。

2)components:组件目录,我们需要组件就放在这个目录里面;

3)App.vue:根组件;

4)main.js:入口js文件;

3、index.html:首页入口文件。

二.路由1.什么是路由

路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。

路由分为前端路由和后端路由

1).后端路由是由服务器端进行实现,并完成资源的分发 后端路由性能相对前端路由来说较低。 2).前端路由是依靠hash值(锚链接)的变化进行实现 前端路由的基本概念:根据不同的事件来显示不同的页面内容,即事件与事件处理函数之间的对应关系,前端路由主要做的事情就是监听事件并分发执行事件处理函数

2.路由的使用

1.安装路由的方法

<script src="lib/vue_2.5.22.js"></script><script src="lib/vue-router_3.0.2.js"></script>//打开命令行工具,进入你的项目目录,输入下面命令npm install vue-router --save-dev

2.创建组件

import Vue from 'vue' //引入Vueimport Router from 'vue-router' //引入vue-routerimport Hello from '@/components/Hello' //引入根目录下的Hello.vue组件Vue.use(Router) //全局使用Routerexport default new Router({ routes: [ //配置路由 { path: '/', //链接路径 name: 'Hello', //路由名称, component: Hello },{ path:'/datou', component:Datou, children:[ //子路由,嵌套路由 {path:'/',component:Datou}, {path:'datou1',component:Datou1}, {path:'datou1',component:Datou2}, ] } ]})

3.router-link

router-link 是一个组件,它默认会被渲染成一个带有链接的a标签,通过to属性指定链接地址。

<router-link to="/">[text]</router-link> <router-link to="/about">[text]</router-link>

说明:

to:导航路径,要填写的是你在router/index.js文件里配置的path值,如果要导航到默认首页,只需要写成 to="/" ,[text] :就是我们要显示给用户的导航名称。

4.router-view

构建 SPA (单页应用) 时,方便渲染你指定路由对应的组件。 是用来承载当前级别下的子级路由的一个视图标签,此标签的作用就是显示当前路由级别下一级的页面。

<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </div><router-view/> </div></template>3.路由嵌套

嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成。

找到/router/index.js文件,在其路由中配置一个children数组,用来配置子路由

配置子路由的path

引入子路由组件,配置子路由的component

在父级路由中表明子路由显示的配置

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)import Home from "@/components/Home.vue"import Faxian from "@/components/Faxian.vue"import Fenlei from "@/components/Fenlei.vue"import Mymusic from "@/components/Mymusic.vue"//路由规则数组const routes = []//创建路由实例对象const router = new VueRouter({ routes: [ //默认某个子路由,用redirect重新定向父路由的路径 { path: '/', redirect: '/home/faxian' }, { //路由嵌套,children数组存储子路由 path: '/home', component: Home, children: [ { path: 'mymusic', component: Mymusic }, { path: 'fenlei', component: Fenlei }, { path: 'faxian', component: Faxian }, ] } ]})export default router4.参数传递

1.params传递参数

//配置路由
本文链接地址:https://www.jiuchutong.com/zhishi/298658.html 转载请保留说明!

上一篇:YOLOv5 + StrongSORT with OSNet

下一篇:Javaweb实验:静态网页制作(javaweb实例教程)

  • 纯外贸企业出口到运费可以抵扣吗
  • 冲减计提
  • 收到劳务发票还未付款
  • 企业的免税收入用于支出所形成的费用
  • 补报以前年度收入后当年所得税怎么处理
  • 购入国内旅客运输服务
  • 开发票怎么操作
  • 劳务报酬收入是否含税
  • 交强险怎么查
  • 房租合同印花税计算方法
  • 承兑汇票贴现计算公式
  • 固定资产抵扣对账怎么算
  • 对以前年度的收入调整
  • 短期借款计提利息例题
  • 预收物业费是否必须开具发票
  • 客户给现金
  • 货运发票和提供建筑服务的专票备注怎么写?
  • 个人开机械租赁发票需要什么
  • 协会会费入账科目是哪个
  • 开个人发票需要身份证号码吗
  • 发票作废时间有多长
  • 现金盘盈盘亏怎么计算
  • 收取对方损失赔偿
  • 出口退税的账务关键是什么
  • 全资子公司合并抵消
  • 监控 固定资产
  • 支付宝账户记录
  • 根据完工进度确认成本
  • PHP:php_check_syntax()的用法_misc函数
  • 冲销以前年度多计提的工资资产负债表怎么平
  • 丢失增值税专用发票最新规定
  • 详解金球奖之争
  • 融资性租赁会计处理计入固定资产
  • 小微企业没有进账,可以不报税吗
  • 买一赠一的会计处理与税务处理
  • 抵扣认证发票统计确认后可以退回吗?
  • 超级鸽卫星
  • 税法折旧和会计折扣会计分录
  • discuz怎么用
  • 销售房产收取预算费用
  • 坏账准备计提范围包括
  • phpcms怎么样
  • 认缴制注册资金不交可以吗
  • 发票已经勾选却统计不出来
  • 固定资产折旧方法一经确定不得随意变更
  • mdf和ndf文件
  • oracle 删除用户下所有表
  • 企业补缴税款如何申报
  • MySQL中使用FREDATED引擎实现跨数据库服务器、跨实例访问
  • 普票和专票的区别对比
  • 餐饮会计内账怎么记账
  • 一般纳税人固定资产处置税率
  • 所得税预缴多了可以不退税嘛
  • 一般纳税人购货取得普通发票
  • 存在弃置费用的固定资产例题
  • sql clean
  • mysql远程访问不了
  • 对于微软用户来说,为了防止计算机意外故障
  • 在mac设备上用到什么
  • 怎么给ubuntu扩容
  • win8.1内存占用过高
  • win10怎么禁用device/credential guard
  • win7小技巧
  • win7系统里面怎么找到微信程序
  • 查看syslog
  • window10系统连接wifi
  • cocos2dx4.0入门
  • 调用perl脚本
  • 支持css的浏览器
  • nodejs获取当前时间
  • Android通过HttpURLConnection获取JSON并进行UI更新
  • jquery动态创建元素
  • 用python定义一个函数
  • js需要学到什么程度
  • 怎么打印纳税申报表带章的
  • 印花税没有按时申报怎么办
  • 国家税务局令第16号文
  • 12月份买的车10月打电话让我去保养
  • 全面推进行政执法公示制度包含的主要内容有
  • epc项目不接受联合体投标违规吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设