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.js
var 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)