{
    "status": "ok",
    "msg": "注册成功",
    "data":  {
        "id" : 1,
        "username": "Tom",
        "avatar": "http://avatar.com/1.png",
        "createdAt": "2019-10-19T15:15:33.343Z",
        "updatedAt": "2019-10-19T15:15:33.343Z"
    }
}

{
    "status": "ok",
    "msg": "注册成功",
    "data":  {
        "id" : 1,
        "username": "Tom",
        "avatar": "http://avatar.com/1.png",
        "createdAt": "2019-10-19T15:15:33.343Z",
        "updatedAt": "2019-10-19T15:15:33.343Z"
    }
}

{
    "status": "ok",
    "isLogin": "true",
    "data":  {
        "id" : 1,
        "username": "Tom",
        "createdAt": "2019-10-19T15:15:33.343Z",
        "updatedAt": "2019-10-19T15:15:33.343Z"
    }
}

{
    "status": "ok",
    "msg": "获取成功",
    "total": 200,//全部博客总数
    "page": 2,//当前页数
    "totalPage": 10, //总页数
    "data": {
        "id": 1,
        "title": "博客标题",
        "description": "博客内容简要描述",
        "user": {
            "id": 100, //博客所属用户id
            "username": "博客所属用户username",
            "avatar": "头像"
        },
        "createdAt": "2019-10-19T15:15:33.343Z", //创建时间
        "updatedAt": "2019-10-19T15:15:33.343Z", //更新时间
    }
}

{
"status": "ok",
"msg": "获取成功",
"data": {
    "id": 1,
    "title": "博客标题",
    "description": "博客内容简要描述",
    "content": "博客内容",
    "user": {
        "id": 100, //博客所属用户id
        "username": "博客所属用户username",
        "avatar": "头像"
    },
    "createdAt": "2019-10-19T15:15:33.343Z", //创建时间
    "updatedAt": "2019-10-19T15:15:33.343Z", //更新时间
}
}

{"status": "fail", "msg": "登录后才能操作"}
{"status": "fail", "msg": "博客不存在"}
{"status": "fail", "msg": "无法修改别人的博客"}

{"status": "fail", "msg": "登录后才能操作"}
{"status": "fail", "msg": "博客不存在"}
{"status": "fail", "msg": "无法删除别人的博客"}

{
"status": "ok",
"msg": "删除成功"
}

import Vue,app,router from ...
new Vue({
    el:"#app",
    router,
    component: { App },
    template: '<App />
})

const URL = {
    REGISTER: '/auth/register',
    LOGIN: '/auth/login',
    LOGOUT: '/auth/logout',
    GET_INFO: '/auth'
}

export default {
    register({username, password}){
        return request(URL.REGISTER, 'POST', { username, password })
    },
    login({ username, password}){
        return request(URL.LOGIN, 'POST', { username, password })
    },
    logout(){
        return request(URL.LOGOUT)
    },
    getInfo(){
        return request(URL.GET_INFO)
    }
}

const URL = {
    GET_LIST: '/blog',
    GET_DETAIL: '/blog/:blogId',
    CREATE: '/blog',
    UPDATE: '/blog/:blogId',
    DELETE: '/blog/:blogId'
}
export default {
    getBlogs({ page=1, userId, atIndex } = { page:1 }){
        return request(URL.GET_LIST, 'GET', { page, userId, atIndex })
    },
    getIndexBlogs({ page=1 } = { page: 1 }){
        return this.getBlogs({ userId, page, atIndex })
    }
    getDetail({ blogId }){
        return  reuqest(URL.GET_DETAIL, replace(':blogId', blogId))
    },
    updateBlog({ blogId }, { title, content, description, atIndex }){
        return request(URL.UPDATE, replace(':blogId', blogId), 'PATCH', { title, content, description, atIndex })
    },
    deleteBlog({ blogId }){
        return request(URL.DELETE, replace(':blogId',blogId), 'DELETE')
    },
    createBlog({ title = '', content = '', description = '',atIndex = false } = { title = '', content = ''}){
        return request(URL.CREATE, 'POST', { title, content, description })
    }
}

// @/assets/moudles/auth.js
const state = {
  user: null,
  isLogin: false,
};

const getters = {
  user: (state) => state.user,
  isLogin: (state) => state.isLogin,
};

const mutations = {
  setUser(state, payload) {
    state.user = payloag.user;
  },
  setLogin(state, payload) {
    state.isLogin = payload.isLogin;
  },
};

const actions = {
  async login({ commit }, { username, password }) {
    let res = await auth.login({ username, password });
    commit("setUser", { user: res.data });
    commit("setLogin", { isLogin: true });
    return res.data;
  },
  async register({ commit }, { username, password }) {
    let res = await auth.register({ username, password });
    commit("setUser", { user: res.data });
    commit("setLogin", { isLogin: true });
    return res.data;
  },
  async logout({ commit }) {
    await auth.logout();
    commit("setUser", { user: null });
    commit("setLogin", { isLogin: false });
  },
  async checkLogin({ commit, state }) {
    //判断state中是否有登录状态,有返回true
    if (state.isLogin) return true;
    //如果state中没有,调用res
    let res = await auth.getInfo();
    //从res中获取isLogin状态设置Login
    commit("setLogin", { isLogin: res.isLogin });
    //如果res中未登录,返回false
    if (!res.isLogin) return false;
    //如果res中已登录,设置user并返回true
    commit("setUser", { user: res.data });
    return true;
  },
};

export default {
  state,
  getters,
  mutations,
  actions,
};

//header.vue
import { mapState, mapActions } from 'vuex'

export default {
    data(){
        return {}
    },
    computed(){
        ...mapGetters([
            'isLogin',
            'user'
        ])
    },
    created(){
        //在生命周期created调用methods的方法
        this.checkLogin()
    },

    methods: {
        //将state中的方法映射进来
        ...mapActions({
            'checkLogin'
        })
    }
}

// Login/template.vue
<template>
    <div id="login">
        <h4>用户名</h4>
        <input v-model="username" placeholder="用户名">
        <h4>密码</h4>
        <input v-model="password" type="password" placeholder="密码" @key.enter="onLogin">
        <el-button size="medium" @click="onLogin">立即登录</el-button>
        <p class="notice">没有账号?<router-link to="/register">注册新用户</router-link></p>
    </div>
</template>

//Login/template.js
import { mapActions } from 'vuex'

export default {
    data(){
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        //把login从vuex中拿出来
        ...mapActions(['login'])

        onLogin(){
            //test
            console.log(this.username + this.password)
            //执行登录,把用户名密码传递
            this.login({username: this.username, password: this.password})
            //调用then下一步操作,跳转到首页或者定向页面
                .then(() => {
                    this.$router.push({path: this.$route.query.redirect || '/'})
                })
        }
    }
}

import Vue from "vue";
import Router from "vue-router";

//引入store为了checkin
import store from "./src/store.js";

Vue.use(Router);

//先声明,最后再导出
const router = new Router({
  routes: [
    {
      path: "/",
      //使用匿名函数import方式实现异步懒加载
      //当需要跳转该模块时才会引入相关路径
      component: () => import("@/pages/Index/template.vue"),
    },
    {
      path: "/login",
      component: () => import("@/pages/Login/template.vue"),
    },
    {
      path: "/detail/:blogId",
      component: () => import("@/pages/Detail/template.vue"),
    },
    {
      path: "/edit/:blogId",
      component: () => import("@/pages/Edit/template.vue"),
      meta: { requiresAuth: true },
    },
    {
      path: "/create",
      component: () => import("@/pages/Create/template.vue"),
      meta: { requiresAuth: true },
    },
    {
      path: "/user/:userId",
      component: () => import("@/pages/User/template.vue"),
    },
    {
      path: "/my",
      component: () => import("@/pages/My/template.vue"),
      meta: { requiresAuth: true },
    },
    {
      path: "/register",
      component: () => import("@/pages/Register/template.vue"),
    },
  ],
});

router.beforeEach((to, from, next) => {
  //判断是否有元信息meta
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    //如果有就触发checkLogin检查登录状态
    store.dispatch("checkLogin").then((isLogin) => {
      if (!isLogin) {
        next({
          path: "/login",
          query: { redirect: to.fullPath },
        });
      } else {
        next();
      }
    });
  } else {
    next();
  }
});

export default router;

<template>
    <div id="edit">
    <!-- 创建博客 -->
        <h1>创建文章</h1>
        <h3>文章标题</h3>
        <el-input v-model="title"></el-input>
        <p class="msg">限30个字</p>
        <h3>内容简介</h3>
        <el-input type="textarea" v-model="description" :autosize="{ minRow: 2, maxRows: 4 }"></el-input>
        <p class="msg">限30个字</p>
        <h3>文章内容</h3>
        <el-input type="textarea" v-model="content" :autosize="{ minRow: 4, maxRows: 30 }"></el-input>
        <p class="msg">限30个字</p>
        <p>
            <label>是否展示到首页</label>
            <el-switch v-model="atIndex" active-color="#13ce66" inactive-color="#fff">
            </el-switch>
        </p>
            <el-button @click="onCreate">确定</el-button>
    </div>
</template>

<script>
import blog from '@/api/blog'

export default {
    data(){
        return {
            title: '',
            description: '',
            content: '',
            atIndex: false
        }
    },
    methods: {
        onCreate(){
            blog.createBlog({ title: this.title, content: this.content, description: this.description, atIndex: this.atIndex})
                .then(res => {
                    this.$message.success(res.msg)
                    this.$router.push({ path: `/detail/${res.data.id}`})
                })
        }
    }
}

</script>

function friendlyDate(datsStr) {
  let dateObj = typeof datsStr === "object" ? datsStr : new Date(datsStr);
  let time = dateObj.getTime();
  let now = Date.now();
  let space = now - time;
  let str = "";

  switch (true) {
    case space < 60000:
      str = "刚刚";
      break;
    case space < 1000 * 3600:
      str = Math.floor(space / 60000) + "分钟前";
      break;
    case space < 1000 * 3600 * 24:
      str = Math.floor(space / (1000 * 3600)) + "小时前";
      break;
    default:
      str = Math.floor(space / (1000 * 3600 * 24)) + "天前";
  }
  return str;
}

export default {
  install(Vue, options) {
    Vue.prototype.friendlyDate = friendlyDate;
  },
};

//express脚手架
npm install express-generator -g

express -h
  Usage: express [options][dir]
  //用法

  Options:

    -h, --help          output usage information
        --version       output the version number
    -e, --ejs           add ejs engine support
        --hbs           add handlebars engine support
        --pug           add pug engine support
    -H, --hogan         add hogan.js engine support
        --no-view       generate without view engine
    -v, --view <engine> add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory

$ express --view=pug myapp

   create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/views
   create : myapp/views/index.pug
   create : myapp/views/layout.pug
   create : myapp/views/error.pug
   create : myapp/bin
   create : myapp/bin/www

cd myapp
npm install

DEBUG=myapp:* npm start

set DEBUG=myapp:* & npm start

app.use(express.static("public"));

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

app.use(express.static("public"));
app.use(express.static("files"));

app.use("/static", express.static("public"));

app.use("/static", express.static(__dirname + "/public"));

var express = require("express");
var app = express(); //在`myapp/bin/www`里创建了app的服务器

app.get("/", function (req, res) {
  red.send("hello world"); //给浏览器发一个hello world
});

//GET
app.get("/", function (req, res) {
  res.send("GET request to the homepage");
});

//POST
app.post("/", function (req, res) {
  res.send("POST request to the homepage");
});

app.all("/secret", function (req, res, next) {
  console.log("Accessing the secret section ...");
  next(); // pass control to the next handler
});

app.get("/", function (req, res) {
  res.send("root");
});

app.get("/about", function (req, res) {
  res.send("random.txt");
});

//此路由路径将匹配 abcd、abbcd、abbbcd 等。

app.get("/ab+cd", function (req, res) {
  res.send("ab+cd");
});
//此路由路径将匹配 abcd、abbcd、abbbcd 等。

app.get("/ab+cd", function (req, res) {
  res.send("ab+cd");
});

//此路由路径将匹配 abcd、abxcd、abRABDOMcd、ab123cd 等。

app.get("/ab*cd", function (req, res) {
  res.send("ab*cd");
});

//此路由路径将匹配 /abe 和 /abcde。

app.get("/ab(cd)?e", function (req, res) {
  res.send("ab(cd)?e");
});

app.get("/example/a", function (req, res) {
  res.send("Hello from A!");
});

app.get(
  "/example/b",
  function (req, res, next) {
    console.log("the response will be sent by the next function ...");
    next();
  },
  function (req, res) {
    res.send("Hello from B!");
  }
);

var cb0 = function (req, res, next) {
  console.log("CB0");
  next();
};

var cb1 = function (req, res, next) {
  console.log("CB1");
  next();
};

var cb2 = function (req, res) {
  res.send("Hello from C!");
};

app.get("/example/c", [cb0, cb1, cb2]);

var cb0 = function (req, res, next) {
  console.log("CB0");
  next();
};

var cb1 = function (req, res, next) {
  console.log("CB1");
  next();
};

app.get(
  "/example/d",
  [cb0, cb1],
  function (req, res, next) {
    console.log("the response will be sent by the next function ...");
    next();
  },
  function (req, res) {
    res.send("Hello from D!");
  }
);

app
  .route("/book")
  .get(function (req, res) {
    res.send("get a book");
  })
  .post(function (req, res) {
    res.send("add a book");
  })
  .put(function (req, res) {
    res.send("update a book");
  });

var express = require("express");
var router = express.Router();

// middleware that is specific to this router
//use是不管get还是post都可以匹配
router.use(function timeLog(req, res, next) {
  console.log("Time: ", Date.now());
  next();
});
// define the home page route
router.get("/", function (req, res) {
  res.send("Birds home page");
});
// define the about route
router.get("/about", function (req, res) {
  res.send("About birds");
});

module.exports = router;

var birds = require('./birds');
...
app.use('/birds', birds);

//index.js文件中引入http模块
var http = require("http"); //引入http模块
var server = http.createServer(function (request, response) {
  response.setHeader("Content-Type", "text/plain; chartset=gbk"); //内容渲染形式:字符串.解码方式gbk
  //设置响应头
  response.writeHead(200, "ok"); //设置状态码
  response.write("hello");
  response.end(); //结束
}); //创建服务器

server.listen(9000); //启动服务器，监听9000端口

console.log("open http://localhost:9000");

var http = require("http");
//http模块
var fs = require("fs");
//fs模块读写文件

//创建服务器
var server = http.createServer(function (req, res) {
  console.log(__dirname + "/static" + req.url);
  //fs同步读取,路径由文件绝对路径+static+请求url拼接.使用二进制格式
  var fileContent = fs.readFileSync(__dirname + "/static" + req.url, "binary");
  res.write(fileContent, "binary");
  res.end();
});

//监听8080端口
server.listen(8080);
console.log("visit localhost:8080");

var http = require("http") //引入http模块
var path = require("path") //自动处理路径问题
var fs = require("fs") //读写文件
var url = require("url") //解析url

//
function staticRoot(staticPath, req, res){
  var pathObj = url.parse(req.url, true)
  //url.parse是node.js方法，将一个URL字符串转换成对象并返回
  console.log(pathObj)

  if(pathObj.pathname === "/"){
    pathObj.pathname += "index.html"
 } //不加后缀可以默认加后缀

//请求文件的具体路径
var filePath = path.join(staticPath, pathObj.pathname)
//拼接文件地址

//同步读取文件
// var fileContent = fs.readFlieSync(filePath,'binary')
// res.write(fileContent, 'binary')
// res.end()

//异步读取文件
fs.readFile(filePath, "binary", function(err, fileContent){
  //'binary'表示二进制格式
  if(err){
     res.writeHead(404, "not found")
     res.end("<h1>404 Not Found</h1>")
}else{
    res.writeHead(200, "ok")
    res.write(fileContent, "binary")
    res.end()
    }
})

console.log("path.join(_dirname, "static")

var server = http.createServer(function(res,req){
   staticRoot(path.join(__dirname, "static"), req, res)
   //__dirname代表当前文件路径,join拼接上static路径
})

server.listen(8080)
console.log("visit http://localhost:8080")

//服务器配置
var http = require("http");
var fs = require("fs");
var url = require("url");

http
  .createServer(function (req, res) {
    //解析请求url
    var pathObj = url.parse(req.url, true);

    switch (pathObj.pathname) {
      case "/getWeather":
        res.end(JSON.stringify({ a: 1, b: 2 }));
        break;
      case "user/123":
        res.end(fs.readFileSync(__dirname + "/static/user.tpl"));
        break;
      default:
        res.end(fs.readFileSync(__dirname + "static" + req.url));
    }
  })
  .listen(8080);

let fs = require("fs"); //引入fs模块

fs.readFile("flie.txt", "utf-8", function (err, str) {
  if (err) {
    console.log("error");
  } else {
    console.log(str);
    //要去掉字符串里的数字空格
    const strAfter = str.replace(/\d/gm, "");
    console.log(strAfter);

    //去掉数字后把strAfter写出来
    fs.writeFile("fileAfter.txt", strAfter, (err) => {
      if (err) throw err; //如果报错直接使用throw抛出
      console.log("the file has been save!");
    });
  }
});

function replaceDigit(str) {
  return str.replace(/\d/gm, "");
}

module.exports.replaceDigit = replaceDigit;
//把这个封装好的函数暴露出来可以使用了

//封装好后在上面的代码里就可以使用了
//先引入
let strApi = require("./stringApi"); //如果在同级目录下,直接使用相对路径引入

//然后将上面的代码const strAfter = str.replace(/\d/gm, '')替换成
const strAfter = strApi.replaceDigit(str);

npm install -g nrm //安装nrm工具
nrm ls //查看nrm支持的源的列表
nrm use taobao //使用淘宝的源
nrm use npm //切换回npm源

{
  "scripts": {
    "css:autoprefixer": "postcss -u autoprefixer -r dist/css/*",
    "css:compress": "csso in.css --output out.css",
    "js:lint": "eslint src/js",
    "js:uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js",
    "image:imagemin": "app=imagemin-cli npm run check; imagemin src/images dist/images -p",
    "server": "browser-sync start --server --files 'dist/css/*.css, dist/js/*.js'",
    "watch": "onchange 'src/js/*.js' -- npm run css:compress",
    "start": "npm run server"
  }
}

npm run css:autoprefixer
npm start

1. get(target, propKey, receiver)
2. set(target, propKey, value, receiver)
3. has(target, propKey)
4. construct(target, args):
5. apply(target, object, args)

<!-- 基本 -->
 <keep-alive>
   <component :is="view"></component>
 </keep-alive>

 <!-- 多个条件判断的子组件 -->
 <keep-alive>
   <comp-a v-if="a > 1"></comp-a>
   <comp-b v-else></comp-b>
 </keep-alive>

<keep-alive>
  <router-view></router-view>
</keep-alive>

// 修改数据
vm.msg = "Hello";
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
});

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick().then(function () {
  // DOM 更新了
});

<div id="app">
    <input type="text" v-model:value="childrens.name" />
    <input type="text" v-model:value="lastName" />
</div>

<script type="text/javascript">
    var vm = new Vue( {
        el: '#app',
        data: {
            children: {
                name: '小强',
                age: 20,
                sex: '男'
            },
            tdArray:["1","2"],
            lastName:"张三"
        },
        watch:{
            children:{
                //如果childrens发生变化,函数就会执行
                handler:function(val,oldval){
                    console.log(val.name)
                },
                deep:true//对象内部的属性监听，也叫深度监听
            },
            'children.name':function(val,oldval){
                console.log(val+"aaa")
            },//键路径必须加上引号
            lastName:{function(val,oldval){
                console.log(this.lastName)
                },
                immediate:true //立即以'childern.name'触发回调
            }
        },//以V-model绑定数据时使用的数据变化监测
    } );
    vm.$watch("lastName",function(val,oldval){
        console.log(val)
    })//主动调用$watch方法来进行数据监测
</script>
</body>

var unwatch = vm.$watch("a", cb);
// 之后取消观察
unwatch();

// 创建构造器
var Profile = Vue.extend({
  template: "<p>{{firstName}} {{lastName}} aka {{alias}}</p>",
  data: function () {
    return {
      firstName: "Walter",
      lastName: "White",
      alias: "Heisenberg",
    };
  },
});
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount("#mount-point");

Vue.mixin({
  beforeCreate() {
    //..逻辑
    //这种方法会影响到每个组件的beforeCreate钩子函数
  },
});

this.text-----context.props.text
this.$slots.default------context.children

<div id="app">
<my-component value="haha">
</my-component>
</div>
<script>
Vue.component('my-component',{
    functional: true, //开启函数化,无实例,无状态.this失效
    render: function(createElement,context){
        //添加context参数
        return createElement('button',{
            on: {
                click: function(){
                    console.log(context)
                    console.log(context.parent) //父组件
                    console.log(context.parent.msg)
                    console.log(context.props.value)
                }
            }
        },'点击我') //第三个参数
    },
    props:['value']
    )

var app = new Vue({
    el: "#app",
    data: {
      msg: "我是父组件内容"
    }
})
</script>

<div id="app">
  <p class="text">hello world!!!</p>
</div>

return createElement("h1", this.blogTitle);

<template id="hdom">
//template下只允许有一个子节点,所以用div包裹三个标题
	<div>
		<h1 v-if="level==1">
			<slot></slot>
		</h1>
		<h2 v-if="level==2">
			<slot></slot>
		</h2>
		<h3 v-if="level==3">
			<slot></slot>
		</h3>
	</div>
</template>

<script>

 Vue.component('child', {
     //使用template命名的方法将大段代码写在html里
     props: ['level'],
     template: '#hdom'
 })

 Vue.component('child', {
      //使用render函数替代template,节省大量代码
     render: function (createElement) {
         return createElement('h' + this.level, this.$slots.default);
     },
     props: ['level']
 })
</script>

Vue.component("child", {
  render: function (createElement) {
    return createELement("h1");
    //参数是字符串.返回<h1></h1>
    return createElement({
      template: `<div>鹅鹅鹅</div>`,
    });
    //参数是对象.返回<div>鹅鹅鹅</div>
    var domFun = function () {
      return {
        template: `<div>鹅鹅鹅</div>`,
      };
    };
    return createELement(domFun());
    //参数是函数.返回<div>鹅鹅鹅</div>
  },
});

Vue.component('child',{
    render: function(createElement){
        return CreateElement({
            template: `<div>鹅鹅鹅</div>`
        },{
            //添加class选项,其中为true的会添加到模板<div>中
            'class':{
                foo: true
                baz: false
            },
            //添加style属性
            style: {
                color: 'red',
                fontSize: '18px'
            },
            //正常的html属性
            attrs: {
                id: 'foo',
                src: 'xxxx'
            },
            //原生DOM属性
            domProps: {
                innerHTML: '<span style="color:blue">我是蓝色</span>'
            }
        }

        )
    }
})

Vue.component("child", {
  render: function (createElement) {
    return createElement("div", [
      createElement("h1", "我是h1标题"),
      createElement("h6", "我是h6标题"),
    ]);
  },
});

Vue.component("my-component", {
  render: function (createElement) {
    var header = this.$slots.header;
    //返回的就是含有VNode的数组
    var main = this.$slots.default;
    var footer = this.$slots.footer;
    return createElement("div", [
      createElement("header", header),
      createElement("main", main),
      createElement("footer", footer),
    ]);
  },
});

<div id="app">
<my-component v-bind:name="name" v-model="name"></my-component>
{{ name }}
</div>
<script>
Vue.component('my-component',{
    render: function(createElement){
        props:['name'],
        var self = this //指的是当前的Vue实例
        return createElement('input',{
            domProps: {
                //原生DOM
                value: self.name
            },
            on: {
                //这里添加事件
                input: function(event){
                    //此处的this是window,所以需要声明self指代vue实例
                    self.$emit('input',event.target.value)
                }
            }
        })
    }
})

var app = new Vue({
    el: "#app",
    data: {
        name: "Tom"
    }
})
</script>

<div id="app">
<my-component>
    <template scoped="prop">
        {{ prop.text }}
        {{ prop.msg }}
    </template>
</my-component>
</div>
<script>
Vue.component('my-component',{
    render: function(createElement){
        return createElement('div',this.$scopedSlots.default({
            text: '我是子组件传递的数据',
            msg: 'scopetext'
        }))
})

var app = new Vue({
    el: "#app",
    data: {

    }
})
</script>