旅游网站开发
关注
分享
扫一扫
Paris one
me
展开
-
7-3 首页轮播图
借助第三方的轮播插件，npm install vue-awesome-swiper@2.6.7--save在全局使用vue-awesome-swiper插件：src目录下的main.js引入以下四个：在具体小组件中使用，要复制以下代码（他们的功能分别是）：显示轮播图下面的点点、显示上页按钮、显示下页按钮、显示下划线接下来，在Home下的components下创建一个Swiper.vue来做轮播图让它做循环输出：对swiper-slide用v-for做循环，遍历list做.原创 2020-08-27 10:01:34 · 353 阅读 · 0 评论 -
7-2 引入并应用iconfont图标，完善header
一、在gitee麦子商城下载得到如下：引入以上文件：进入src目录下的asstes目录下的styles目录下创建一个文件iconfont，将以上文件中的字体文件放入（iconfont.css放的位置与iconfont是平级），修改iconfont.css中的引入路径至此，iconfont就可以被引入了，那如何引入呢：在main.js中(因为各个页面都需要引入iconfont，所以不如将iconfont的引用放在main.js中)引入成功，即可在页面上使用，如何使用：在hea.原创 2020-08-26 11:07:30 · 411 阅读 · 0 评论 -
7-1首页header区域开发
首页的整体设计图，依照设计图设计网页：量上方盒子的尺寸——用stylus（CSS辅助开发的工具，类似于less或者sass）可以帮助我们在Css中使用变量，方便我们快速编写css代码——通过终端打开项目所在的文件夹，在详谬中安装几个依赖包：stylus : npm install stylus --savestylus loader : npm install stylus-loader --save安装完毕，重新启动项目：npm run startvue 的基础模板：<.原创 2020-08-25 11:20:10 · 464 阅读 · 0 评论 -
二、项目代码结构
src:main.js：入口文件App.vue：根组件Router——>index.js：放所有路由components：放项目中的小组件assets：放图片类资源config:index.js：基础配置信息dev.env.js：开发环境的配置信息prod.env.js：线上环境的配置信息build:放项目打包的webpack内容...原创 2020-08-18 10:53:15 · 383 阅读 · 0 评论 -
一、项目预热
项目环境准备1、安装node.js：LTS下的windows——>打开终端——>输入node-v安装成功——>npm-v工具安装成功2、打开github——>创建仓库“travel”存储代码——>本地线上代码关联——>本地安装git——>终端git --vision——>公钥私钥大同线上线下——>克隆git仓库地址——>终端：git clone地址3、创建vue项目4、本地上传到仓库基本的git操作：本地已有项目提交到git原创 2020-08-18 10:48:28 · 347 阅读 · 0 评论 -
非父子组件间的传值——使用发布订阅模式
目的：点击Dell,lee变成Dell；点击Lee,Dell变成Lee<body> <div id="root"> <child content="Dell"></child> //1（1 2 3） <child content="Lee"></child> <div>{{total}}</div> </div> <sc原创 2020-08-18 10:07:02 · 97 阅读 · 0 评论 -
父子组件的数据传递2：父组件给子组件传值，props
1、父组件通过属性形式（props）给子组件传数据（单向数据流——子组件不能直接改变父组件传递的值——克隆副本，改副本）2、子组件通过事件触发给父组件传值<body>//根组件 <div id="root"> <!--1、父组件给根组件传参:count="3"--> <counter :count="3" @inc="handleIncrease"></counter> //子组件原创 2020-08-18 09:47:16 · 280 阅读 · 0 评论 -
父子组件的数据传递1：子组件给父组件传值，事件绑定
利用“ref引用”获取DOM节点（vue中很少操作，基本都是绑定事件）this.$ref.ref的值1、自组件点击数字+12、父组件中total=两个自组缉拿count的和——>发布订阅 this.$emit("change")——子组件改变，向外触发change时间子组件通过事件触发的方式向父组件传数据<script>//根组件 <div id="root"> //ref获取DOM节点 父组件在这监听子组件传来的事件原创 2020-08-18 09:27:45 · 372 阅读 · 0 评论 -
Vue中的列表渲染v-for：对数组和对象做循环，以及vue中的set方法
data中的list有三个值，把这三个值循环到页面上——vue中的列表渲染，对list做循环，列表中的每一项都放到item中，所以页面上打印出item即可，{{item}}（一般来说list是后端返给前端的一个值，会携带数据库或者id）为了提升循环显示的性能，我们会给每个循环项加一个唯一的key值，尽量不要使用index作为key值当我们想动态地(让页面有响应)给list里面添加内容时:(类似于todolist)1、要用数组变异方法 2、改变数据的引用地址在控制台输入：用的是vm~.原创 2020-08-10 15:40:08 · 2560 阅读 · 0 评论 -
vue中的条件渲染v-if和v-show的区别、以及v-else-if、v-else
v-if后面是一个JS表达式，它的返回值true或者false来决定这个<div>是否挂载在页面之上v-show也能控制一个模板标签是否在页面上显示在浏览器的控制台上：可以用vm.show来改变show的值：在浏览器的控制台上：可以用vm.show来决定是否显示：它俩的区别：v-if对应的JS表达式的值为false，那么它对应的标签压根不会出现在DOM之上v-show对应的JS表达式的值为false，那么它对应的标签依然在DOM之上，只不过是以display:no原创 2020-08-10 14:34:30 · 295 阅读 · 0 评论