本文介绍了Vue.js的基础概念，包括其作为渐进式框架的特点、安装方式，重点讲解了数据驱动视图和声明式编程。还介绍了常用的工具选择以及核心概念的总结，通过实例演示了如何在实际项目中应用Vue。
目录
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> |
效果图：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
