vue的概况及核心思想:
vue本身并不是一个框架:
vue结合周边生态,可以构成一个灵活的、渐进式的框架
声明式的渲染 → 组件系统 → 客户端路由 → 大规模状态管理 → 构建工具
vue的核心思想:
数据驱动、组件化
通过mvvm的数据绑定实现自动同步
DOM → VUE → 原生JS对象
vue实现数据绑定的原理:
//题目:在input中输入文字,在下面自动把文字显示出来 <p><input type="text" id="username"/></p> <p><span id="showname"></span></p> //传统做法: document.getElementById("username").addEventListener("keyup",function(){ document.getElementById("showname").innerText = event.target.value; }); //数据绑定做法: var obj = {}; Object.defineProperty(obj,"canshu",{ set:function(val){ document.getElementById("showname").innerText = val; } }); document.getElementById("username").addEventListener("keyup",function(){ obj.canshu = event.target.value; }); //这是因为:obj的属性"canshu"被赋值时,会自动触发 Object.defineProperty 里的set方法
//vue就是利用这个属性实现了数据绑定
vue与react的对比:
vue的特点:
模板和渲染函数的弹性选择
简单的语法及项目创建
更快的渲染速度和更小的体积
reace的特点:
跟适合大型应用和更好的可测试性
同时适用于web端和原生app
更大的生态圈带来更多支持的工具
两者的相同点:
都利用虚拟DOM实现快速渲染
轻量级
响应式组件
服务端渲染
易于集成路由工具、打包工具、状态管理工具
都有优秀的支持和社区
vue的环境搭建:
在多页应用中使用vue:
//直接引入法 <script src="https://unpkg.com/vue@2.3.3/dist/vue.min.js"></script> <p id="testEl">{{message}}</p> <script type="text/javascript"> new Vue({ el : "#testEl", data:{ message:"显示这行字" } }); </script> //npm安装法(在这之前要配置好node环境才行哦) 命令:cd 项目文件夹 命令:npm install vue --save-dev 这样就在项目目录下安装了vue,然后就和上面的用法完全相同啦 <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script> <p id="testEl">{{message}}</p> <script type="text/javascript"> new Vue({ el : "#testEl", data:{ message:"显示这行字" } }); </script>
利用vue-cli构建SPA应用:
//全局安装vue-cli 命令:npm install -g vue-cli //构建webpack-simple项目 命令:vue init webpack-simple 项目名 随后:根据需要填写项目梗概,就可以自动生成啦 //构建webpack项目 命令:vue init webpack 项目名 随后:根据需要填写项目梗概,就可以自动生成啦 //安装项目依赖 命令:npm install 随后:会自动下载项目的所有依赖,下载完成后会在项目文件夹中出现 node_modules //项目运行 命令:在READ.md中会写该项目的运行命令,通常是 npm run dev 随后:项目启动成功后就可以通过默认端口访问啦 //项目终止 命令:control + c
vue-cli脚手架中的文件简介:
重点关注,其他的知道就行啦
build文件夹//这次打包的配置所在的文件夹 build.js//构建生产包 check-versions.js logo.png utils.js//工具输出的配置 vue-loader.conf.js webpack.base.conf.js//打包的核心配置 webpack.dev.conf.js//开发版本的配置(继承base) webpack.prod.conf.js//生产版本的配置(继承base) config文件夹//打包对应的配置 dev.env.js index.js//也是打包配置,其实可以和webpack.base.conf.js合并成一个 prod.env.js src文件夹//项目源码 assets文件夹 components文件夹 router文件夹 App.vue//入口组件 main.js//项目入口文件 static文件夹//静态资源 .gitkeep .babelrc//ES6解析配置 .editorconfig//编辑器配置 .gitignore//git忽略配置,在这里配置的文件不会被提交到git上 .postcssrc.js//HTML添加前缀的配置 index.html//单页面的入口 package-lock.json package.json//项目基本配置 scripts(项目运行命令) dependencies(项目依赖库) devDependencies(开发依赖库) engines(开发引擎版本) browserslist(支持的浏览器版本) README.md//项目说明