目录
1.基础
Vue是一个渐进式的框架,可以理解为用Vue与jquery共存,然后慢慢用Vue从一个模块、一个模块的替换,直到全部替换完成;
Vue官网:https://cn.vuejs.org/
2.特点
解耦视图和数据
可复用组件
前端路由技术
状态管理
虚拟DOM
3.安装
方式1:直接CDN服务器引入,可以选择引入开发/学习版本,还是生产版本
开发/学习: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 生产环境: <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> |
开发/学习版本没有经过压缩,文件比较大,且一些日志也没有关闭,而生产版本则没有这些问题;
方式2:直接下载和引入
打开官网,选择“安装”模块:
https://cn.vuejs.org/js/vue.js
https://cn.vuejs.org/js/vue.min.js
方式3:NPM安装
在用 Vue 构建大型应用时推荐使用NPM 安装。NPM能很好地和诸如webpack或Browserify 模块打包器配合使用。同时Vue也提供配套工具来开发单文件组件。
4.工具介绍
目前主要有2个工具:
websotm工具:功能强大,但吃内存,打开比较慢;
vscode工具:微软产品,开源免费,插件丰富,轻量级;
5.总结
①核心概念就是:数据驱动视图;
②声明式编程:声明数据,后续工作交给框架来完成,数据驱动视图;之前js是命令式编程,数据与更新视图都是交给开发者来完成,开发者发布一个命令,则视图完成一个操作;
6.案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue学习</title> </head> <body> <div id="app"> {{day}},{{name}},{{works}} <ul> <li v-for="item in works">{{item}}</li> </ul> <h1>当前计数:{{counter}}</h1> <button v-on:click="counter++">+</button> <button v-on:click="pdd">-</button> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: '#app',// 挂载要管理的HTML元素 data: { // 定义数据 day: '2020年10月13日', name: '张三', works: ['开发','测试','上线'], counter: 0 }, methods: { pdd: function () { console.log('xxxxxxxxxxxxxx'); this.counter--; } } }); </script> </body> </html> |
效果图: