Vue 历史
作者:尤雨溪,英文名Evan You
本科就读于美国科尔盖特大学,艺术与艺术史专业
帕森设计学院艺术硕士
毕业后在Google Creative Lab担任UI相关工作
后来转为全职JavaScript开发工程师
现为独立开发者,靠每个月十几万以上的捐款生活
主要作品
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
就可以导出写的代码啦。