Vue简介
-
什么是Vue
Vue是用于构建用户界面的前端框架。
传统的Web前端开发基于jQuery+模板引擎用户界面,Vue提供了构建用户界面的一整套解决方案(vue全家桶):- vue 核心库;
- vue-router 路由方案;
- vuex 状态管理方案;
- vue组件库 快速搭建页面UI效果的方案。
以及一些辅助Vue项目开发的工具:
- vue-cli 一键生成工程化的vue项目,基于webpack,大而全,npm全局包;
- vite 一键生成工程化的vue项目,小而巧,npm全局包;
- vue-devtools 浏览器插件,辅助调试工具;
- vetur vscode插件,语法高亮和智能提示。
-
Vue的特性
- 数据驱动视图:Vue会监听数据的变化,从而自动重新渲染页面的结构(单项数据绑定);
- 双向数据绑定:在不操作DOM的前提下,自动将用户填写的内容同步到数据源中,开发者不需要手动操作DOM元素来获取表单元素的最新值。
-
MVVM
MVVM是Vue实现“数据驱动视图”和“双向数据绑定”的核心,他将HTML页面分为以下三个部分:
- View:当前页面所渲染的DOM结构;
- Model:当前页面渲染时依赖的数据源;
- ViewModel:连接视图和数据,同步更新,表示Vue的实例,它是MVVM的核心
-
Vue的版本
- 1.x 版本几乎被淘汰,不建议学习与使用;
- 2.x 版本是目前企业级项目开发中的主流版本;
- 3.x 发布于2020-09-19,成长中。
Vue2.x中绝大多数API与特性,在Vue3.x中同样支持。
Vue3.0还增加了“组合式API”、“多根节点组件”、“更好的TypeScript支持”等。同时废弃了如“过滤器”、“ o n ”、“ on”、“ on”、“off”、“$once”等实例方法。
Vue的基本使用
使用步骤
- 导入vue.js的script脚本文件;
- 在页面中声明一个将要被vue控制的DOM区域;
- 创建vm实例对象(vue实例对象)。
<body>
<div id="app">
{{username}}
</div>
<script src="./lib/vue.global.js"></script>
<script>
Vue.createApp({
data(){
return{
username:'明月',
}
}
}
).mount('#app')
</script>
</body>
使用JavaScript表达式
在vue提供的模板渲染语法中,除了支持绑定简单的数值外,还支持JavaScript表达式运算
{{number + 1}}
{{ok ? 'YES' : 'NO'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-'+id"></div>