发表于

一、 header 组件开发 之数据的传递

1. App.vue 引入组件
1
import header from './components/header/header'
2. App.vue 中注册组件
1
2
3
4
5
export default {
    components:{
        v-header:header
    }
}
3. 使用组件
1
<v-header :sell="sellerObj"></v-header>
解释：:sell=”sellerObj”,这里就像一个函数传参一样把sell当成形参，sellerObj就是实参，那么父组件实参是怎么传给子组件的，通过什么传
4. 父组件向子组件传递数据
在父组件中需要将sellerObj作为数据导出，子组件通过props从父组件中获得数据，且要指定数据类型
1
2
3
4
5
6
7
export default {
 props:{  //  子组件获取 父组件 数据
 	sell:{
 	  type:Object // 传递的类型 
 	}
  }
 }

小结：

  • 子组件在props中创建一个属性，用以接收父组件传过来的值

  • 父组件中注册子组件

  • 在子组件标签中添加子组件props中创建的属性

  • 把需要传给子组件的值赋给该属性

5. 调用数据
1
2
3
4
5
6
7
<div class="logo">
  <img :src="sell.avatar" alt="" width='64' height='64'/>
</div>
<span class="name">{{sell.name}}</span>
<div class="description">
   {{sell.description + '/' + sell.deliveryTime + '分钟送达'}}
</div>

细节问题：

support 绑定数据时 加 v-if =’sell.supports’
理由 ： 在我们通过axios获取数据前在父组件中创建了一个空的对象sellerObj 先传给子组件，开始 没有数据传送过去就会报错 underfined，加上 v-if ，接受不到数据就不会解析，也就不会报错。

二、 header 组件弹出层（详情）

1.弹出遮罩层
(1) 设置一个状态，判断该状态控制显示隐藏
1
2
3
4
5
data (){
  return {
 	detailShow:false
  }
}
1
<div v-if="detailShow" class="detail"></div>
(2) 绑定点击事件,通过methods 方法改变 状态，控制显隐效果
1
2
3
4
<div class="bulletin-wrapper" @click="showDetails()" ></div>
<div class="detail-close" v-if="sell.supports">
   <i class="icon-close"  @click="hideDetail()"></i>
</div>
1
2
3
4
5
6
7
8
methods:{
  showDetails () {
    this.detailShow=true
  },
  hideDetail () {
 	this.detailShow=false
  }
}
2. 星级评分
(1) 绑定class 控制星级大小的类型
1
2
//  利用 computed 属性
<div class="star" :class="starSizeType"></div>
1
2
3
4
5
computed: {
  starSizeType() { //  返回 星级的大小类型  48/36/24
   return 'star-' + this.size;
  }
}
(2) 遍历星星的数量
1
<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>
(3) 定义常量 控制 每个星的状态
1
2
3
4
5
// 类名用变量存起来
const LENGTH = 5  //  星星长度
const CLS_ON = 'on'  // 全星
const CLS_HALF = 'half' // 半星
const CLS_OFF = 'off'// 空星
(4) 通过计算 判断每个span 的类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
itemClasses () {  //  返回一个数组为每个span 的类名  （遍历）
   let spanClassList=[];
   // 利用 实参评分来判断 有几颗全星，半星，空星
  let scores=( Math.floor(this.score * 2) ) / 2 
  let intNum= Math.floor(scores); // 全星个数  
  let HashalfNum= scores % 1 !== 0   // 半星
  for(var i=0;i<intNum;i++){ // 遍历全星的span
	spanClassList.push(CLS_ON)
  }
  if(HashalfNum){ //  如果有半星  加类名
	spanClassList.push(CLS_HALF)
  }
  while(spanClassList.length<LENGTH){//  判断 是否有空星 及个数
	spanClassList.push(CLS_OFF)
  }
   return spanClassList;	    	
  }
}
(5) 通过 动态绑定class 来 给span 加类名
1
2
3
<div class="star" :class="starSizeType">
  <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>
</div>

后续更新…

发表于

一、$mount()手动挂载

当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。
1
2
3
4
new Vue({
   router,
   render: h => h(App)
 }).$mount("#app");
1
2
3
4
5
new Vue({
  el: '#app',
  router,
  render: h => h(App) 
});
解释： render: x => x(App)
1
2
3
4
5
这里的render: x =>x(App)是es6的写法
转换过来就是：暂且可理解为是渲染App组件
render:(function(x){
     return x(App);
 });

二、mock数据

如果后端接口尚未开发完成，前端开发一般使用mock数据。
注意：新版的vue-cli 自动搭建的build 文件里没有dev-server.js 和 dev-client.js ，因此我们要在webpack.dev.conf.js 里配置
配置如下：
(1) 复制data.json 到该项目下
(2) 找到bulid目录下 webpack.dev.conf.js 找到 const portfinder = require(‘portfinder’)，在其下添加mock 数据
1
2
3
4
5
6
7
8
9
10
const portfinder = require('portfinder')
// 添加mock 数据
const express = require('express')
const app = express()
var appData = require('../data.json')//加载本地数据文件
var seller=appData.seller;
var goods=appData.goods;
var ratings=appData.ratings;
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
(3)接着找到 devServer 里的 watchOptions，其后紧跟
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
watchOptions: {
      poll: config.dev.poll,
    },
    before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })//接口返回json数据，上面配置的数据appData就赋值给data请求后调用
      }),
      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      }),
      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    }
(4)设置保存后 npm run dev 运行 访问http://localhost:8080/api/seller 就可接收到 该路由对应的json 数据

三、关于路由 vue-router

* 直接定义路由

(1) 首先定义路由
1
2
3
//  定义路由组件
const goods = { template: '<p>我是对应的goods下面的内容</p>' };
const seller = { template: '<p>我是对应的seller下面的内容</p>' };
(2) 创建路由实例
1
2
3
4
5
6
7
8
// 创建路由实例
var router = new VueRouter({
  routes:[
   //路由重定向即设置默认路由  
   {path:'/',redirect:'/goods',component:goods}, 
   {path:'/goods',component:goods},
   {path:'/seller',component:seller}
});
路由实例方法:
1
2
3
router.push({path:'goods'});  //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
router.replace({path:'goods'}) //替换路由，不会往历史记录里面添加
// router.go('goods')
(3)创建vue 实例
1
2
3
4
5
//  创建 vue 实例
	const app=new Vue({
		el:"#app",  //  挂载元素
		router
	})
(4)DOM 渲染
1
2
3
4
5
6
7
8
9
10
11
<body>
 <div id="app">
  <div class="nav">
   <router-link to='/goods'>good</router-link>
   <router-link to='/seller'>seller</router-link>
  </div>
  <div class="content">
   <router-view></router-view>
  </div>
 </div>
</body>

（main.js）引入路由组件

(1) 引入路由文件
1
2
3
import goods from './components/goods/goods'
import ratings from './components/ratings/ratings'
import seller from './components/seller/seller'
(2) 创建路由实例 定义路由组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const router = new VueRouter({
  routes: [{
    path: '/',
    component: goods
  },{
    path: '/goods',
    component: goods
  }, {
    path: '/ratings',
    component: ratings
  }, {
    path: '/seller',
    component: seller
  }]，
  linkActiveClass: 'active' //  将 router-link-active  改为 active（方便样式操作）
})
(3) 创建vue实例并挂载
1
2
3
4
5
6
7
8
new Vue({
  el:"#app",
  router,
  template: '<App/>',
  components: {
    App
  }
})

四、axios 请求数据

(1) 安装 axios
1
npm install axios
(2) 引入axios组件
1
import axios from 'axios'
(3) axios 请求数据（在此之前创建一个接受数据的对象sellerobj）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
 //  获取数据 准备  返回一个对象，后台获取数据后 赋予 该对象
   data (){
   	 return {
   	 	 sellerobj:{}
   	 }
   },
   created (){ //  创建之前 请求数据
   	 axios.get('static/data.json').then((result) => {
   	  	 console.log(result) //  控制台检查  数据存储在  result.data 里  
   	  	this.sellerobj = result.data.seller //  将数据存到sellerobj里  	 	
   	  })
   }
}

Yes!

后续更新…

发表于

一、安装主题

在博客目录D:\hexo下右键点击Git Bash，输入以下命令。其他的主题也类似操作。
1
git clone https://github.com/iissnan/hexo-theme-next

二、使用主题

修改博客目录D:\blog_config.yml中的theme属性，将其设置为next。

三、导航栏乱码问题

修改博客目录D:\blog_config.yml中的language设置为 zh-Hans 即可

待更新…

发表于

一、安装 Git

二、安装 Node.js

三、安装Hexo说明

（1）Hexo 的安装需要借助Node.js 的npm 命令来操作
（2）操作的方式是在任意的位置单击鼠标右键，选择Git bash命令，在里面输入：
npm install -g hexo //  安装

npm uninstall -g hexo //  卸载

四、安装 Hexo 步骤

（1）先选择一个盘符下新建一个文件夹，命名（英文字母），假设你是在F盘下建立了一个名叫blog的文件夹，那么路径就是F:\blog （后续的操作大多在这个文件夹里进行）；
（2）进入blog文件夹单击右键，单击鼠标右键，选择Git bash命令，在里面输入：
npm install -g hexo //  全局安装 hexo
（3）检查是否安装成功
hexo -v
（4）初始化 hexo
hexo init

说明：最后出现呢“Start blogging with Hexo！” 即初始化成功

（5）安装 组件
npm install
（6）首次 体验 Hexo
hexo g
（7）开启服务器 访问 Hexo
hexo s

说明：出现访问 http://localhost:4000/ 即成功

（8） 若页面无法跳转，可能是端口号被占用，执行ctrl+c 停止服务器，接着执行命令行来改变端口号
hexo server -p 5000 // 端口号自己定

说明：出现访问 http://localhost:5000/ 即成功

五、部署远程博客

（1）注册Github账号

因为是托管到Github上，所以第一步需要注册一个账号。已有账号的登录即可

（2）建立和用户名相对应的仓库

以我的例子来说，我的用户名是girl99,那么我的仓库就必须是girl99.github.io，否则可能就不成功。

（3）配置SSH公钥

远程代码是基于SSH的，所以需要SSH的相关配置。方法是现在本地生成SSH公钥，然后添加到Github上面。具体的操作如下：

设置你的邮箱和用户名：

git config --global user.email "lemoncode@qq.com"
git config --global user.name "girl99"

生成密钥，设置密码，输入的密码不显示（也可以不设置，按三次回车，密码为空）

ssh-keygen -t rsa -C "lemoncode@qq.com"

说明：上述的命令成功后，会得到id_rsa和id_rsa.pub两个文件，可能在C:\Users\Administrator.ssh文件夹里。 没有的话搜索下。

把SSH密钥添加到Github上

说明：登陆Github后，点击settings，然后进入SSH keys，title 写一个自己能记住的，把id_rsa.pub文件里内容粘贴进去就OK。

（4）修改配置文件

编辑F:blog目录下的配置文件_config.yml,在最下面输入以下内容，注意把里面的girl99替换成你的用户名

deploy:
  type: git
  repository: https://github.com/girl99/girl99.github.io.git
  branch: master

部署远程博客，输入以下命令

hexo g
hexo d

出现下面的提示表示部署成功

INFO Deploy done: git

若hexo d 没有部署成功,再次修改F:blog目录下的配置文件_config.yml，改成这样

deploy:
  type: git
  repository: git@github.com:girl99/girl99.github.io.git
  branch: master

再次执行：

hexo g
hexo d

若但是在部署的时候遇到 ERROR Deployer not found: github 的错误,运行以下指令

npm install hexo-deployer-git --save

继续运行指令

hexo g  
hexo d

五、部署完成，访问远程博客

https://girl99.github.io/

Yes!