随笔分类 - Vue学习笔记
从头开始学vue
摘要：jsonp 在前端开发中，我们一种常见的网络请求方式就是JSONP 使用JSONP最主要的原因往往是为了解决跨域访问的问题 JSONP的原理是什么呢？ JSONP的核心在于通过script标签的src属性来帮助我们请求数据. 原因是我们的项目部署在domain1.com服务器上时，是不能直接访问do
阅读全文
摘要：Vuex是做什么的？ 官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调
阅读全文
摘要：认识路由 路由 路由(routing)就是通过互联网的网络把信息从源地址传输到目的地址的活动 路由器提供了两种机制：路由和转送 路由是决定数据包从来源到目的地的路径 转送将输入端的数据转移到合适的输出端 路由中有一个非常重要的概念叫路由表 路由表本质上就是一个映射表，决定了数据包的指向 后端路由阶段
阅读全文
摘要：VueCLI相关 什么是Vue CLI 如果你在开发大型项目，那么你需要，并且必然需要使用Vue CLI 使用Vue.js开发大型项目时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作，那么效率比较低效，所以我们通常会使用一些脚手架工具来帮助
阅读全文
摘要：Webpack详解 认识webpack 从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具 打包工具： grunt/gulp/webpack/rollup等 前端模块化： 前面的学习中提到了为什么使用前端模块化，也提到了目前使用前端模块化的一些方案： AMD、CMD、
阅读全文
摘要：前端模块化 以前模块化的方式： 以前的方式可能出现的问题： 可能小红定义的全局变量覆盖了小明定义的全局变量，小明2中引用小明1的时候会导致数据紊乱，并且要保证执行正确，就要正确的顺序进行引用。 当然可以使用闭包的方式，但是如果用了闭包的方式，又不能访问小明1中的flag。 ES5的解决方法： 小明：
阅读全文
摘要：插槽slot 在原来的功能上具有扩展性 组件的插槽： 组件的插槽为了让我们封装的组件更加的具有扩展性 让使用者可以决定组建内部的一些内容到底展示什么 如何去封装这些组件？抽取共性，保留不同 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定
阅读全文
摘要：什么是组件化 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。 但如果，我们将一个页面拆分成一个个的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。 Vue组件化思想 提供了一种抽象，让我们可以开发
阅读全文
摘要：条件判断 v-if、v-else-if、v-else 这三个指令可以根据表达式的值在DOM中渲染或销毁元素或组件 <div id="app"> <h2 v-if="message < 60">不及格</h2> <h2 v-else-if="message >= 60 && message < 80"
阅读全文
摘要：v-on 参数 当通过methods中定义方法，以供@click调用时，需要注意参数问题 情况一：如果该方法不需要额外参数，那么方法后面的()可以不添加； 注意：如果方法本身中有一个参数，那么会将原生事件event参数传进去 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$even
阅读全文
摘要：表单绑定v-model 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。 Vue中使用v-model指令来实现表单元素和数据的双向绑定 案例： <div id="app"> <input type="text" v-model="message"> <h2>{{messa
阅读全文
摘要：ES5中的闭包 <script> var btns = document.getElementsByTagName("button"); for (var i = 0; i < btns.length; i++) { (function (i) { btns[i].addEventListener(
阅读全文
摘要：插值语法 Mustache（双括号语法） <div id="app"> <h2>{{message}}</h2> <h2>{{message}},Tolerate!</h2> <h2>{{firstName + lastName}}</h2> <h2>{{firstName + ' ' +lastN
阅读全文
摘要：一、简单认识Vue Vue是一个渐进式框架： Vue有很多特点和高级特性 解耦视图和数据 可复用的组件 前端路由技术 状态管理 虚拟DOM 安装： 方式一：直接CDN引入 选择开发版本或者是生产版本 <!-- 开发版本，包含了有帮助的命令行警告 --> <script src="https://cd
阅读全文
