一.官网
- 英文官网: https://vuejs.org/
- 中文官网: https://cn.vuejs.org/
二.简介
- 渐进式 JavaScript 框架
- 作者: 尤雨溪(一位华裔前 Google 工程师)
- 作用: 动态构建用户界面
三.特点
- 遵循 MVVM 模式
- 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
- 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目
- 借鉴 angular 的模板和数据绑定技术
- 借鉴 react 的组件化和虚拟 DOM 技术
四.扩展插件
- vue-cli: vue 脚手架
- vue-resource(axios): ajax 请求
- vue-router: 路由
- vuex: 状态管理
- vue-lazyload: 图片懒加载
- vue-scroller: 页面滑动相关
- mint-ui: 基于 vue 的 UI 组件库(移动端)
- element-ui: 基于 vue 的 UI 组件库(PC 端)
五.Helloworld
1.Idea配置vue插件
2.Idea创建web项目
3.Tomcat配置
先配置defalt的tomcat,后面才有“+”里的tomcat,项目要先maven编译生成target,后面才有tomcat的artifct选项
MVVM模型
<script type="text/javascript" src="js/vue.js"></script>
<body>
<h2>Hello World!</h2>
<!--div是一个view-->
<div id="app">
<input type="text" v-model="username">
<p>hello {{username}}</p>
</div>
<script type="text/javascript">
//创建Vue实例
const vm = new Vue({ //Vue是一个vm
el:'#app', //元素
data:{ //data是一个model
username:'firstDemo'
}
})
</script>
六.浏览器插件
下载地址
官网地址
谷歌访问助手
历史版本
温情提示:
1.vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的
2.安装后, 需要关闭浏览器, 再重新打开, 才能使用
按F12,选择Vue选项,即可调试
七.原理
1.理解MVVM
d_d