Vue 历史

作者：尤雨溪，英文名Evan You

本科就读于美国科尔盖特大学，艺术与艺术史专业

帕森设计学院艺术硕士

毕业后在Google Creative Lab担任UI相关工作

后来转为全职JavaScript开发工程师

现为独立开发者，靠每个月十几万以上的捐款生活

Linkedin主页、GitHub 主页、个人域名

主要作品

Vue、Vue Router、Vuex、 @vue/cli

安装Vue CLI

官方网站

安装这个Vue包

yarn global add @vue/cli

你还可以用这个命令来检查其版本是否正确：

vue --version

全局安装: yarn global add @vue/cli

创建目录: vue create路径(路径可以用.点)

选择使用哪些配置

进入目录，运行yarn serve开启webpack dev-server

用WebStorm或VSCode打开项目开始CRM

进入@vue/cli官网看看目录，万一后面会用到(课后题)

完整版(Vue.js)与非完整版（vue.runtime.js）区别

非完整版（vue.runtime.js）不支持从HTML文件里面获取视图

最佳实践:总是使用非完整版，然后配合vue-loader和vue文件

template 和 render 怎么用

template——html的方式做渲染

完整版就必须用template。

下面就是一个创建了一个加1的代码。

new Vue({
    data: {
        n: 0
    },
    template: `
    <div id="app">
    <p>{{ n }}</p>
    <button @click="add">+1</button>
    </div>
    `,
methods: {
      add() {
      this.n += 1
    }
    },
}).$mount('#app')

render——js的方式做渲染

这里也是创建一个加1的代码

非完整版就的用render写法。里面的h 就是 const h = createElement就是创建一个标签

new Vue({
  el: "#app",
  data: {
    n: 0,
  },
// 就用js创建一段HTML
  render(h) {
    return h('div', [this.n, h("button", {
        on: {
          click: this.add
        }
      },
      "+1"
    )])
  },
  methods: {
    add() {
      this.n += 1;
    },
  },
})

codesandbox.io 写 Vue 代码

第一步：点击Vue图标就可以创建

第二步：出现如下界面

第三步：如果想下载就可以点击左上角的file然后点击 Export to ZIP就可以导出写的代码啦。