1.1引入vue
安装vue
npm install vue -g
下载vue的最新版本
npm install -g @vue/cli
创建项目
vue create study-vue
vue2.0和vue3.0的区别
-
打包方式
2.0是通过:npm run dev
3.0是:npm run serve -
文件夹目录:
3.0取消掉了config目录、build目录、static目录 ,还有最重要的一点,3.0的安装项目时自动下载node-model,vue.config.js也没了,需要手动添加。 -
创建项目方式
3.0的安装:vue create 项目名;
2.0的安装:vue init webpack 项目名
1.2Hello World
创建一个vue程序
<template>
<div id="app">
{{title}}
</div>
</template>
<script>
export default {
name:"App",
data(){
return{
title:'hello,vue'
}
},
mounted(){
setTimeout(()=>{
this.title = 'mua~,vue'
},1000)
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
1.3理解Vue的设计思想
数据驱动应用
MVVM模式的践行者
MVVM框架的三要素:响应式、模板引擎及其渲染
响应式:Vue如何监听数据的变化?
模板:vue模板如何编写和解析?
渲染:vue如何将模板转化为html?
详细代码地址:https://gitee.com/JingYaBei/study-vue