vue.js仿锤子商城实战

一、前期准备

1、安装node.js(npm同步安装)

2、vue init webpack：安装vue-cli脚手架

3、npm install vuex --save：安装vuex，注意是--save，不是--save-dev

4、npm install axios vue-axios --save：安装axios

5、建好目录结构：

assets：静态资源文件

components：组件

lib：第三方库、模拟数据

router：路由配置文件

store：vuex文件

views：所有的单页面文件

6、在main.js引入样式文件，路径使用相对路径，

如：import app from './assets/css/app.css'

组件使用绝对路径

如：import HelloWorld from '@/components/HelloWorld'

二、数据导入

主要用到v-for="(item,index) in dataList"

注意：

export default dataList是将数据模块暴露 //使用的是export

要引入数据，使用import goodsData from '@/lib/newGoodsData' //使用的是import

goodsData是数据模块暴露的变量，即数据的变量名，import引入路径是数据js文件所在的路径

绑定数据的写法：

<img :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="'http://img01.smartisanos.cn/'+sku.spec_json.image+'20X20.jpg'">;

固定路径前后用''括起来，总的src值外面用""括起来，vue变量不用引号

插值：{{number}}，前面不用加:，不是动态绑定

如果是动态绑定，用:，不需要加{{}}

举例：<p>{{number}}</p> <img :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imgSrc alt="">

template里面的data里面的变量使用的时候，前面不加this.，在构造器里面才使用this.来获取

<a href="javascript:;" :class="{active:itemIndex===index}">

三、

零碎知识点总结：

1、template的模板可以是li之类的一部分，不一定必须是div

©著作权归作者所有：来自51CTO博客作者xxxpjgl的原创作品，如需转载，请注明出处，否则将追究法律责任