一、 Vue简介
1.Vue的定位是前端框架,因为它提供了构建用户界面的一整套解决方案
- vue(核心库)
- vue-router(路由方案)
- vuex(状态管理方案)
- vue组件库(快速搭建页面UI效果的方案)
2.辅助vue项目开发的一系列工具
- vue-cli(npm全局包,一键生成工程化vue项目,基于webpack)
- vite(npm全局包:一键生成工程化的vue项目,新一代)
- vue-devtools(辅助调试)
- vetur(语法高亮)
3.vue的特性
- 数据驱动视图
- 双向数据绑定
- MVVM
二、vue基本使用步骤
1.导入vue.js的script脚本文件
<script src="./vue-3.1.0.js"></script>
2.页面中声明一个被vue控制的dom区域
<div id="app">{
{username}}</div>
3.创建vm实例对象
<script>
const vm = new Vue({
el:'#app',
data:{
username: 'zs'
}
})
</script>
三、vue指令
1.v-bind
属性绑定
为元素的属性绑定属性值,单向绑定
<input type="text" v-bind:placeholder="inputvalue