vue.js
Ti小芬
这个作者很懒,什么都没留下…
展开
-
如何安装并使用vue-router
如何安装并使用vue-router1、安装vue-router2、如何使用vue-router3、404配置4、激活class5、动态路由6、编程式导航7、嵌套路由8、路由元信息9、导航拦截1、安装vue-routervue init weppack 项目名 初始化项目的时候 选择安装vue-router即可? Install vue-router? (Y/n) // 选择输入y生成的目录介绍main.js 文件// The Vue build version to lo原创 2020-06-01 20:53:33 · 628 阅读 · 0 评论 -
Vue之多页面单页面优缺点
vue之多页面单页面优缺点1、多页面应用2、单页面应用1、多页面应用多页面应用: 一个网址对应一个页面资源跳转一个页面都需要重新加载整个页面的资源,页面跳转会刷新!seo优化好2、单页面应用单页面应用:整个网站都只有一个页面,里面通过相关手段展示不同的内容页面的跳转是使用js 实现判断路径的变化,去展示不同的组件内容。 页面自始至终都不会刷新!维护容易; 复用性强;组件缓存; 体验感好;快发速度快;缺点:首屏加载慢,不利于seo优化!如何管理这些 路径跳转和组原创 2020-06-01 20:41:19 · 1106 阅读 · 0 评论 -
仿美团界面之day01
实训项目day011、移动端响应式1.1 响应式尺寸1.2、解决方案2、项目搭建2.1、初始化项目2.2、处理rem2.3、搭建路由2.4、处理静态图片2.5、编写css样式3、轮播插件4、favicon制作1、移动端响应式1.1 响应式尺寸移动端屏幕的尺寸是特别多的,所以不可能像pc端那样,将尺寸固定死。移动端开发的时候,尺寸是不建议写死单位的,如 固定值为多少px,因为多少px无论在哪种设备上面都是一样的效果,所以大小尺寸不同的设备给用户的界面效果是不一样的!希望有一种单位可以实现屏幕尺.原创 2020-06-01 20:29:35 · 316 阅读 · 0 评论 -
axios的安装及使用
axios注意: axios不是Vue的技术点。 他是一个http请求库! 可以理解为一个http的请求插件。只不过我们在Vue开发的时候,数据请求的时候通常喜欢使用axios。1、axios如何安装在所创建的项目目录中调出cmd命令行窗口,输入以下指令cnpm i axios --save2、axios使用需要使用的组件里引入import axios from "axios"发送请求axios.get(地址).then(function(res){ // res.d原创 2020-05-28 20:55:36 · 708 阅读 · 0 评论 -
Animate动画效果
Animate动画效果Animate.css使用第1步: 在html里面引入animate.css文件 推荐3.x版本https://www.dowebok.com/demo/2014/98/animate.min.css第2步: 给需要动画的标签添加上 animated class值<标签 class="其他自定义class animated"/>第3步:根据文档,使用对应的动画class名即可<标签 class="其他自定义class an原创 2020-05-28 20:50:55 · 439 阅读 · 0 评论 -
vue组件之生命周期
组件生命周期生命周期: 一个东西从产生到消亡的整个过程。Vue的生命周期:四阶段创建阶段beforeCreate 创建之前created 创建之后 【重要】 创建之后,这里可以获取到data里面的数据! 通常我们会在这里 请求数据,赋给data里面的变量挂载阶段beforeMount 挂载之前mouted 挂载之后 【重要】 挂载之后,只有在这里才可以获取到真是的DOM节点内容更新阶段beforeUpdate 更新之前update原创 2020-05-28 20:47:46 · 170 阅读 · 0 评论 -
vue动态组件
动态组件有时候我们希望在一个地方展示不同的组件信息内容,我们就可以使用动态组件。实现<component is="组件名"></component>is属性的值是组件名, component标签用来渲染这个组件替代自己的位置代码<template> <div class="tab"> <div class="tit"> <span :class="curComName=='Son1原创 2020-05-28 20:43:57 · 92 阅读 · 0 评论 -
vscode常用插件
常用插件点击此处转载 2020-05-27 21:13:47 · 67 阅读 · 0 评论 -
vue.js组件与轮播图实现
1、组件化开发什么是组件???组件就是零件,组成一个功能局部零件!1.1、组件的注册全局注册Vue.component('组件名',{ template:"#id值" // 指定组件的模板})// HTML 中<template id="id值"> <!--模板只能有一个根标签!--> <div> 模板内容 </div> </template>局部注册(只能在当前整个V原创 2020-05-27 18:37:45 · 555 阅读 · 0 评论 -
vue.js表单与监听数据
day02笔记1、Vue表单Vue表单是双向数据绑定的!核心指令: v-model<标签控件 v-model="变量" />单选框、密码框、多行文本框<input type="text" v-model="变量" /><input type="password" v-model="变量" /><textarea v-model="变量"></textarea>单选<input type="rad原创 2020-05-27 18:35:54 · 777 阅读 · 0 评论 -
vue.js事件绑定
1、事件绑定1.1、事件绑定实现:// 模板里面<标签 v-on:事件类型="事件函数"></标签>// 缩写<标签 @事件类型="事件函数"></标签>// JS里面new Vue({ .... methods:{ // 事件 事件函数:function(){ ... } }})1.2、事件传参原创 2020-05-27 18:23:48 · 130 阅读 · 0 评论 -
vue.js 安装及常用指令
Day01笔记1、vue.js介绍什么是JavaScript: 是一门编程语言。 客户端脚本语言! 负责交互、客户端业务逻辑的开发。什么是框架: 一个已经具有基本雏形的体系技术点,可以在这个的基础上快速的开发自己的项目应用。Vue.js 是一个JavaScript 框架。1.1、安装开发环境:开发环境: 项目研发阶段,程序还在开发。生产环境: 项目已经研发结束,项目已经部署。版本介绍:开发版本: 开发阶段使用的版本<!-- 开发环境版本,包含了有帮助原创 2020-05-27 18:22:33 · 251 阅读 · 0 评论 -
vue.js中的父子组件通信与项目发送
1、组件通信1.1、父子组件通信本质: 子要用父的数据!实现:子定义props。 props就是组件的自定义属性,也就是组件标签上面可以添加的属性// 子组件JS里面{ ... props:['属性名1','属性名2','属性名3'] ...}// 子组件模板里面{{属性名1}}{{属性名2}}{{属性名3}}父组件模板里面<子组件名 属性名1="值" 属性名2="值" 属性名3="值"></子组件名>图解:原创 2020-05-27 17:19:11 · 96 阅读 · 0 评论 -
node.js环境安装
1、node.js环境的安装打开node.js 中文网:https://nodejs.org/zh-cn/找到下载: https://nodejs.org/zh-cn/download/选择windows安装包 下载下载完成之后,打开装个windows安装包,一路next 下去, 最后等安装完成!检测安装是否成功: 打开电脑的cmd命令行窗口: 输入node -v 如果显示版本号说明安装node环境成功!2、vue-cli脚手架安装安装淘宝镜像npm install -g c原创 2020-05-27 17:13:07 · 250 阅读 · 0 评论