Vue学习笔记（一）

MVVM框架

主要应用场景：

1. 复杂交互逻辑的前端应用
2. 提供基础的架构抽象
3. 通过Ajax数据持久化，保证前端用户体验

常见MVVM框架对比：

1. Angular
2. React
3. Vue

在MVVM架构下，视图层和数据层是不能直接通讯的，需要一个中间件ViewModel。能够监测到数据的改变，通知视图层更新。同时也能监测视图层的改变，同时数据更新。从而达到数据的双向绑定。

1. View
   视图 DOM
2. ViewModel
   通讯 观察者
3. MOdel
   数据 javascript对象

Vue核心思想

1. 数据驱动
2. 组件化

vue-cli 脚手架

1. vue init webpack elm

   初始化项目

2. vue-list

   查看项目类型

3. npm install

   安装项目依赖

4. npm run dev
   运行项目

webpack

• 配置文件

dev-server配置：
path node提供的api 文件路径操作方法
express node 提供的框架 用于启动webserver
webpack 核心编译工具
config 配置文件：
proxyMiddleware http协议代理中间件
webpack.dev.conf.js：
merge 合并配置文件
utils 工具方法
baseWebpackConfig webpack配置文件 开发时和运行时共享
HtmlWebpackPlugin webpack提供的操作html的插件
projectRoot 当前项目的根目录

mock后台数据

//build dev-server.jsvar appData = require('../data.json');var seller = appData.seller;var goods = appData.goods;var ratings = appData.ratings;// 定义路由var apiRoutes = express.Router();// 定义商家数据接口,取数据apiRoutes.get('/seller',function(req,res){  //收到请求后，吐给客户端一个json数据  res.json({    //数据请求正常，返回一个标志    errno: 0,    data: seller  });});// 食品数据接口apiRoutes.get('/goods',function(req,res){  res.json({    errno: 0,    data: goods  });});// 评论数据接口apiRoutes.get('/ratings',function(req,res){  res.json({    errno: 0,    data: ratinf  });});//所有接口相关的路由都会通过api这个路由app.use('/api',apiRoutes);//请求方式api/goods

引入header组件

<template>  <div id="app">    <v-header></v-header>    <div class="tab">      <div class="tabItem">商品</div>      <div class="tabItem">评论</div>      <div class="tabItem">商家</div>    </div>    <div class="content">content</div>  </div></template><script>  import Header from './components/header/header.vue';  export default {    components: {     'v-header': Header    }  };</script>

设置路由默认页

router.go('/goods');

草料二维码生成
http://cli.im/

移动端1px边框

border1px($color)    position:relative    &:after        display:block        position:absolute        width:100%        left:0        bottom:0        border-top:1px solid $color        content:''//兼容@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)    .border1px     &::after        -webkit-transform:scaleY(0.7)        transform:scaleY(0.7)@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)    .border1px     &::after        -webkit-transform:scaleY(0.5)        transform:scaleY(0.5)