icarusion / vue-book Goto Github PK

View Code? Open in Web Editor NEW

1.3K 97.0 825.0 1.1 MB

《Vue.js实战》源码及答疑

Vue 48.23% HTML 4.34% JavaScript 42.77% CSS 4.66%

vue-book's Introduction

vue-book

《Vue.js实战》源码及答疑

正版购买地址

京东 https://item.jd.com/12215519.html
天猫 https://detail.tmall.com/item.htm?id=559480603657
当当 http://product.dangdang.com/25180286.html
Vue.js 系列视频教程 https://segmentfault.com/ls/1650000011074057
iView 系列视频教程 https://segmentfault.com/ls/1650000016424063

已知勘误

感谢大家的反馈，目前已知的勘误如下，已修改，再次印刷时将更正。

[P26] 4.2章节个别错误 #2
[P60] 应该是：给 <select>添加属性 #13
[P81] 父链标题下有错别字 #5
[P87] 错别字 #23
[P135] VNode 对象参数 context 说明错别字 #24
[P204] htmlwebpackPlugin 更改为 htmlWebpackPlugin #20
[P271] 代码修改为 return year + '' + month + '' + day; #17
[P326] 倒数第三行少了个字符 's' #1

vue-book's People

Contributors

Stargazers

Watchers

Forkers

kingleoric2010 wangyuntao2016 jackli7758 html546 neverland0818 woniulinux dut3062796s lichengtao1989 rongrongzang kurotanshi senyuyin lion0010 kibbcao sky6862 hjw029 yizuocheng wilson921108 freedream520 semoren gaoxiaojuan wenhuiyang-luck veznlee fortara mengfangui facebesidewyj lipl1994 kisszpy kikilink airsola kirito6876 jerryq1 michaelshih eric-n3750 imloserlee songhaibing sharwoo anderleo finis199466 front-end-demo depd wyj18761874284 fengjianjunstudy huangwensheng luckytao09 gsben wenghaoping mrabbey diiwong chenlovmein h-cy mzl2333 teng2015 equalll mrmengj tccoca motsqueen dengzhiqiang01 ajlbb bingzhang007 abigcivet axl234 codeshan spartajet jolinlizhihua kunmr orange587 sexin xujiehui huangcaixian mqday hyhlinux eric-chen-2016 dwej blackmamba242424 waterthings tpx2008123 limscript ryanfu zhouliang3 jashonli alexwu59 yaosj htlp linjinquan007 woerwin drivenwinder liufajun myvueyyyy daipianpian lhuangshulang mxwmwx jiayichou gil2018 nbo2018 liangzuan1983 fire117 zhangjiawei30110 mrtung onemee shimengyu-o

vue-book's Issues

Page26，4.2章节个别错误

【提示】的下面第一行文字，div会拥有类名isActive（这里应该是Active）

54页，购物车答案。

源码跟效果可以查看下列链接：
顺便DISS一下作者，给个地址就不管事了，根据作者给的地址，根本就找不到这题的源码，新手一看到这题目直接懵逼，不知道从哪来下手，我也是借鉴了下方哥们的代码写出来的，不过我觉得我的代码跟清晰易读，嘻嘻。
发这个是希望还有买了这本书的新手不至于看到这个题目干瞪眼，最后再说一句：“Aresn, 能不能抽空回复一下我们这些新手？毕竟你出的书源码都不给我们！”

p42 return item.name.match(/JavaScript/);中的item改为this

Page 106 练习题答案

添加键盘事件

修改index-number.js 中的input为：

// @keyup.up="handleUp"  @keyup.down="handleDown" 
<input type="text" :value="currentValue" @change="handleChange"  @keyup.up="handleUp"  @keyup.down="handleDown" >

添加 prop - step 事件

index.html 中修改

// 添加 :step="10"
<input-number v-model="value" :max="100" :min="0" :step="10"></input-number>

Index-number.js 中修改

// props 中添加
step: {
  type: Number,
    default: 10
}

// methods 修改
handleDown: function () {
  if (this.currentValue <= this.min) return;
  this.currentValue -= this.step;
},
handleUp: function () {
  if (this.currentValue >= this.max) return;
  this.currentValue += this.step;
},

实战篇知乎日报每日推荐请求数据请求不到

代码是按照书上的写的，可是recommendList请求到的结果是空的，不知道那里的错

作用域插槽的这个示例代码列表渲染不出来，是我写错了吗

	<div id="app" v-cloak>
		<my-list :books="books">
			<template slot="book" scope="props">
				<li>{{props.bookName}}</li>
			</template>
		</my-list>
	</div>

	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script>

		Vue.component('my-list',{
			props: {
				books: {
					type: Array,
					default: function () {
						return [];
					}
				}
			},
			template: '\
			<ul>\
				<slot name="book">\
					v-for="book in books"\
					:book-name="book.name"\
				</slot>\
			</ul>'
		});

		var app = new Vue({
			el: '#app',
			data: {
				books: [
					{name: '《Vue.js 实战》'},
					{name: '《Javascript 语言精粹'},
					{name: '《Javascript 高级程序设计》'}
				]
			}
		})
	</script>

基础篇tabs组件代码问题

我按照书中的代码敲下来，浏览器只显示了一条横线，控制台没有任何报错！请问有谁遇到过

P188页webpack版本过旧，教程有些过时

现在webpack版本是4.x了，很多命令不一样，比如webpack-cli的问题困扰了很久，请问什么时候跟上新版的教程？

PAGE 56 v-model错误

理论上v-model是@input和:value的语法糖，是数据双向绑定的实现，但是代码中没有体现:value这一步，建议修改。

答案链接

看了一下其它的，这一个有bug
这是用prop传递的，不易理解

[daily实战项目]util.js文件prevDay函数返回日期不正确

[问题简述]
util.js文件的prevDay函数返回日期不正确，year, month , day为数字类型，相加结果为数字，非接口需要的时间格式；导致接口请求错误，其源码如下：

// 源码
// ...
// 获取上一天日期
Util.prevDay = function (timestamp = (new Date()).getTime()) {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = date.getMonth() + 1 < 10
        ? '0' + (date.getMonth() + 1)
        : date.getMonth() + 1;
    const day = date.getDate() < 10
        ? '0' + date.getDate()
        : date.getDate();
    return year + month + day;
};

修改如下：

// 修改
// ...
// 获取上一天日期
Util.prevDay = function (timestamp = (new Date()).getTime()) {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = date.getMonth() + 1 < 10
        ? '0' + (date.getMonth() + 1)
        : date.getMonth() + 1;
    const day = date.getDate() < 10
        ? '0' + date.getDate()
        : date.getDate();
    return year + '' + month + '' + day;
};

p42 return item,name.match(/JavaScript/);中的item改为this

重复使用组件问题

P144
return createElement('div',[ChildNode,ChildNode]);

实际测试<p>text</p>渲染了两次

是vue版本更新的原因还是？

p81错别字 p124 代码多个参数

p81 父链无线访问，可能想表达无限访问。
p124 根据上下文，bind钩子中定义的documentHandler 中第二个if内 binding.value 应该是handleClose方法，此方法不需要参数，而书中代码传入了event，虽不影响执行效果，但令人费解。

书中内容详细，示例完整，是目前见过vue教程中的良品。如果中间再穿插源码解释就再好不过了。

第204页ejs文件htmlwebpackPlugin中w应为大写

第10章webpack打包报错，找不到htmlwebpackPlugin,将w改为大写后通过

vue.min.js:6 Uncaught TypeError: e.bind is not a function

基础篇标签页组件报错，不知道哪里出问题了，请问有人知道吗

In webpack 4.0，the webpack.optimize.UglifyJsPlugin has been removed

p203,plugins中的webpack.optimize.UglifyJsPlugin出现了错误
webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
经查之后webpack4.0版本中已经没有webpack.optimize.UglifyJsPlugin，此例子中，应该改成在去掉

new webpack.optimize.UglifyJsPlugin({
    compress:{
        warnings:false
    }
})

的基础上，在plugins并行的位置上添加

optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: false
                }
            })
        ]
    },

P87页，作用域插槽scope特性2.5.0+已改为slot-scope

P87页，作用域插槽scope特性2.5.0+已改为slot-scope，望下版能够改正下

练习题不会做，有代码参考吗？

本书第54页，第二小题，使用二维数组分类商品，实在不知道怎么做，有代码可以参考吗？

Error: because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

各位，这是哪里出了问题？
Refused to apply style from 'http://localhost:8080/dist/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

代码运行

第一个Hello world的示例运行不了怎么回事。我这里把vue.js下载了下来

你好,{{ name }}

源码vue-book/daily/libs/util.js,28行有错

vue-book/daily/libs/util.js
28行改为:
return year + "" + month + "" + day;

7.1.2组件用法-这节的几个例子运行都没显示内容

按照书上内容，编码了7.1.2组件用法-这节的几个例子，运行都没显示内容，页面空白的，没报错，怎么回事？

电商网站项目实战项目通过打包之后怎么不能正常打开呢

显示一堆报错,

daily项目下运行npm run dev,项目成功运行了,但是/dist目录在哪里啊,我是Windows系统

此书坑太多，关于本书第10章使用webpack中，使用css设置背景图片不显示解决

问题已经解决！在webpack.config.js配置文件中新加针对vue文件样式引用的输出路径如下：
publicPath:'../dist/'

另外书中提到的的打包输出路径也是有问题，自己修改好了。
总之有问题自己解决，此书中坑太多，建议新手看书时候需要注意！

p114 Error compiling template

[Vue warn]: Error compiling template:

<div class="tabs">      <div class="tabs-bar">        <div          :class="tabCls(item)"          v-for="(item, index) in navList"          @click="handleChange(index)"          {{ item.label }}        </div>      </div>      <div class="tabs-content">        <slot></slot>      </div>    </div>

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

报这个错。。模板明明是在

这一个根元素上的啊

template: '\
    <div class="tabs">\
      <div class="tabs-bar">\
        <div\
          :class="tabCls(item)"\
          v-for="(item, index) in navList"\
          @click="handleChange(index)"\
          {{ item.label }}\
        </div>\
      </div>\
      <div class="tabs-content">\
        <slot></slot>\
      </div>\
    </div>',

关于将项目发布服务器上启动代理服务的问题

假设是要将daily项目发布到服务器上直接访问链接即可那么一般情况我们只需要打包这个项目发布就可以了,但是daily中用到了node proxy.js启动代理服务,我们要在打包的时候怎么处理或者在发布的时候怎么处理才能把这个启动代理服务在访问项目链接的时候自动开启呢?
个人解决思路:
1.写一个脚本自动开启
2.用别的代理替代或使用axios跨域

P114 this.$parent.updateNav is not function

methods:{
updateNav(){
console.log(this.$parent) =>this.$parent.updateNav is not function => this.$parent undefined
this.$parent.updateNav();
}
},

函数化组件示例根据change无法监听到props.data的改变

函数化组件9.4

示例代码,vue-smart组件props无法根据父组件的按钮来切换图片视频文本组件
演示

示例源码在那里

没有找到示例源码

p114 Error compiling template

[Vue warn]: Error compiling template:
<div class="tabs"> <div class="tabs-bar"> <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)" {{ item.label }} </div> </div> <div class="tabs-content"> <slot></slot> </div> </div>

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

报这个错。。模板明明是在 <div class="tabs"> 这一个根元素上的啊

template: '\
    <div class="tabs">\
      <div class="tabs-bar">\
        <div\
          :class="tabCls(item)"\
          v-for="(item, index) in navList"\
          @click="handleChange(index)"\
          {{ item.label }}\
        </div>\
      </div>\
      <div class="tabs-content">\
        <slot></slot>\
      </div>\
    </div>',

page54扩展1

<html>
<head>
	<title></title>
	<style type="text/css">
		[v-cloak] {
		  display: none;
		}
		table {
		  border: 1px soli #e9e9e9;
		  border-collapse: collapse;
		  border-spacing: 0;
		  empty-cells: show;
		}

		th, td {
		  padding: 8px 16px;
		  border: 1px solid #e9e9e9;
		  text-align: left;
		}

		th {
		  background-color: #f7f7f7;
		  color: #5c6b77;
		  font-weight: 600;
		  white-space: nowrap;
		}
	</style>
</head>
<body>
	<div id="app" cloak>
	  <template v-if="list.length">
	    <table>
	      <thead>
	        <tr>
	          <th><input type="checkbox" @click="handleAll" :checked="isCheckedAll()">全选</th>
	          <th>序号</th>
	          <th>商品名称</th>
	          <th>商品单价</th>
	          <th>购买数量</th>
	          <th>操作</th>
	        </tr>
	      </thead>
	      <tbody>
	        <tr v-for="(item, index) in list">
	          <td><input type="checkbox" @click="handleChecked(index)" :checked="isChecked(index)"></td>
	          <td>{{ index + 1 }}</td>
	          <td>{{ item.name }}</td>
	          <td>{{ item.price }}</td>
	          <td>
	            <button @click="handleReduce(index)" :disabled="item.count===1">-</button>
	            {{ item.count }}
	            <button @click="handleAdd(index)">+</button>
	          </td>
	          <td>
	            <button @click="handleRemove(index)">移除</button>
	          </td>
	        </tr>
	      </tbody>
	    </table>
	    <div>总价：￥{{ totalPrice }}</div>
	  </template>
	  <div v-else>购物车为空</div>
	</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script type="text/javascript">
	var app = new Vue({
		  el: '#app',
		  data: {
		    list: [
		      {
		        id: '1',
		        name: 'iPhone 7',
		        price: 6188,
		        count: 1,
		        status : 1
		      },
		      {
		        id: '2',
		        name: 'iPad Pro',
		        price: 5188,
		        count: 1,
		        status : 1
		      },
		      {
		        id: '3',
		        name: 'MacBook Pro',
		        price: 21488,
		        count: 1,
		        status : 1
		      }
		    ]
		  },
		  computed: {
		    totalPrice: function() {
		      var total = 0;
		      for(var i = 0; i < this.list.length; i++) {
		      	var item = this.list[i];
		      	if(item.status) {
		      		 total += item.price * item.count;
		      	}
		      }
		      return total != 0 ? total.toString().replace(/\B(?=(\d{3})+$)/g,',') : 0;
		    }
		  },
		  methods: {
		    handleReduce: function(index) {
		      if(this.list[index].count === 1) return;
		      this.list[index].count--;
		    },
		    handleAdd: function(index) {
		      this.list[index].count++;
		    },
		    handleRemove: function(index) {
		      this.list.splice(index, 1);
		    },
		    handleChecked: function(index) {
		  		this.list[index].status = !this.list[index].status;
		  	},
		  	isChecked: function(index) {
		  		return this.list[index].status;
		  	},
	      	isCheckedAll: function() {
	  			//列表全为true该status才为true，否则为false
		  		var status = true;
		  		for(var i = 0; i < this.list.length; i++) {
		  			//一旦列表的status有一个为false则status就为false
		  			if(!this.list[i].status) {
		  				status = false;
		  				return status;
		  			}
		  		}
		  		return status;
	  		},
		    handleAll: function() {
		  		//拿到是否是全选
		  		var status = this.isCheckedAll();
		  		status = status ? 0 : 1;
		  		for(var i = 0; i < this.list.length; i++) {
		  			this.list[i].status = status;
		  		} 
		  	}
		  }
		})
</script>
</body>
</html>

【勘误】P141注释“如果子组件定义 slot 的名称”下面缺少左花括号以及键值对缺少逗号

// 如果子组件定义 slot 的名称
slot: 'name-of-slot'
// .....
key: 'myKey',
ref: 'myRef'
}

// 如果子组件定义 slot 的名称
{ // 左花括号
slot: 'name-of-slot', // 逗号
// .....
key: 'myKey',
ref: 'myRef'
}

112页标签页组件代码有错误

按照示例代码敲了一遍，发现设置的默认选中的标签没起作用，发现问题应该出在下面这里。
在index.html 中：

<tabs v-model="activeKey">
...

v-model 是用于表单类元素的数据双向绑定，而 tabs 组件内部并没有用到表单元素。
所以应该是改为 v-bind 绑定：

<tabs :value="activeKey">

以上为本人的个人理解，并手敲了一遍，改后运行没有问题。如有不合理之处，麻烦大大帮忙指出，谢谢。

读者提交了这么多问题，作者也不回应下？

读者提交了这么多问题，作者也不回应下？至少哪些对，哪些错，处理下吧

P96异步更新队列疑问

书上说Vue会根据浏览器环境优先使用原生的Promise.then和MutationObserver，但是vue.js官方文档却是‘Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel‘，请问MutationObserver与MessageChannel有何区别，为什么两处的出入这么大？

P179面的数据通信问题

在《vue.js实战》这本书中，p179的v-textarea组件在数据绑定的时候，出现了
"vue.js:597 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
查过之后，是说Vue2中规定props的数据改成了单行流动，在组件内，不能修改由外层传来的数据。把_this.value=event.target.value
去掉就没有再报错了