携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情 >>
最近跟着coderwhy在学Vue，以此记录一下，懂哥右转去官方文档，别来嘲讽小弟。
Vue是什么？
渐进式框架
什么是渐进式框架，即：你完全可以将原来的html逐渐替换成vue的代码，不需要完全重构原来的代码，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
其他内容
</div>
<div id="app"></div>
<script src="https://unpkg.com/vue@3"></script>
<script>
const app=Vue.createApp({
template:`<h2>hello world</h2>`
})
app.mount("#app")
</script>
</body>
</html>
不过一般选择使用vue的都是从0开始，基本上不会使用到这样的方式。
当然也会有人说渐进式，是描述Vue全家桶的，你可以最开始只使用VueJS构建组件，需要路由这些再使用VueRouter等，需要状态管理再使用Vuex等，这主要看个人的想法吧。
Vue起步
最开始我们在html中编写vue，进行语法学习
VueJS的引入方式
这里主要使用两个，第一个是CDN方式，第二个是将JS代码下载到本地引入。
第一种
使用CDN方式：unpkg.com/vue@3 我们可以在html中使用script 引入上面的链接。
第二种
就是将上述链接在浏览器中打开，然后复制到自建的vue.js 文件中，如图将代码粘贴到vue.mini.js 中，后续都会这样使用。
Vue初体验
如下代码所示，我们需要在html 先建立一个根元素 ，以备后续将vue 的组件挂载到页面上。第二步我们就可以将vue 的代码引入页面，然后通过全局的Vue 对象调用createApp 创建元素，之后我们的工作就会在createApp中进行，最后将app 挂载到根元素 上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="../lib/vue.mini.js" ></script>
<script>
const app=Vue.createApp({
template:`<h2>{{hello}}</h2>`,
data:function(){
return{
hello:'张三'
}
}
})
app.mount('#app')
</script>
</body>
</html>
补充： 可以看到上面代码中有一个template 属性，我们在这儿写的标签就会在页面显示出来，其实可以直接写到<div id="app"></div> 中，因为vue 默认找template ，如果找不到就会去找div#app 的children，进行渲染。那么我们在html 中学习vue 的时候，就完全可以直接在div#app 中书写内容了。
计数器
先尝试写一个计数器，预计会用到vue中的动态数据、方法。如下所示：当我们使用Mustache语法即双大括号包裹的变量就会前往app 中的data 中找。找到对应的counter 就会将值带回来渲染到页面中，而按钮需要绑定事件即可使用@click 这个是v-on:click 的语法糖，就是绑定点击事件，事件定义在methods 对象中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
<script src="../lib/vue.mini.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
counter: 0
}
},
methods: {
increment() {
this.counter++
},
decrement() {
this.counter--
}
}
})
app.mount('#app')
</script>
</body>
</html>
概念
声明式编程
从上面我们可以看到，写vue的时候，和以前用JS完全不一样，貌似只是声明了没有直接去调用呀，这就是声明式编程 区别于以前我们使用的命令式编程 ，即现在我们只需要告诉系统what to do 不需要告诉它how to do ，因为vue 底层已经为我们定义了how to do
MVVM模型
- MVC和MVVM都是一种软件的体系结构
- MVC是Model-View-Controller的简称
- MVVM是Model-View-ViewModel的简称
