vue学习一：vue框架快速入手
vue的官网：简介 | Vue.js
vue提供了MVVM（Model-View-ViewModel）的设计模式，对比传统的mvc（Model-View-Controller）模式，model与view互不相通，view通过viewModel自动让modle生成逻辑，然后自动传递view。避免了大型项目中controller的臃肿。
<div id="app"> //定义到DOM内 <a :href="link">百度</a> // “:”是“v-bind：”的简写，用于动态绑定html属性。若此处删去“：”，则无法跳转百度链接，只会显示link的对应文本 <input type="text" :placeholder="inputValue"> <img :src="imgSrc" :style="{width:w}" alt=""> </div>简而言之。div标签中用于定义函数以及中间变量，后面的script标签定义组件，在组件中续写变量值和将组件内容挂载到dom中。
div标签中还可以使用js语句：
简单的事件绑定如按钮增减数值：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3>count的值为：{{count}}</h3> <button v-on:click="addcount">+1</button> <button @click="count-=1">-1</button>//两种实现方法都可 </div> <script> const vm={ data:function(){ return{ count:0, } }, methods:{ addcount(){ this.count+=1 }, }, } const app=Vue.createApp(vm) app.mount('#app') </script> </body> </html>以及列表渲染：
条件渲染