随笔分类 - Vue2
摘要：当前的测试环境如下： ———— 新版的@vue/cli ———— Vue2.x版本 第一步：安装Element UI npm i element-ui -S 第二步：引入Element UI 在main.js中： import ElementUI from 'element-ui' import '
阅读全文
摘要：一、安装路由 Vue-router用于提供给vue项目在开发中用于绑定url和组件页面的关系的核心插件。 默认情况下，vue没有提供路由的功能，所以我们使用vue-router，并需要在项目根目录。 npm install vue-router 安装了vue-router插件以后，我们必须要对路由进
阅读全文
摘要：默认情况下，我们的项目中并没有对axios包的支持，所以我们需要下载安装。 在项目根目录中使用 npm安装包： npm install axios 接着在main.js文件中，导入axios并把axios对象 挂载到vue属性中多为一个子对象，这样我们才能在组件中使用。 main.js补充代码： i
阅读全文
摘要：1、父组件的数据传递给子组件 // 父组件 <Menu title="来自Home的数据" :clickNum="num"></Menu> // 子组件 <li @click="clickNum++">{{clickNum}}</li> props: { // 接收来自父组件的数据 title: {
阅读全文
摘要：前面显示Home.vue页面组件的内容时，我们是在App.vue通过import导入使用的。这个过程就是组件的嵌套使用。那么我们除了App.vue可以导入其他页面以外，也可以通过在Home.vue中导入其他子组件进行使用的。 src/ |- views/ |- Home.vue |- compone
阅读全文
摘要：一般在开发中，我们会人为把组件分2个目录存放，一个代表的页面组件，另一个代表页面一部分的子组件。 src/ |- views/ |- Home.vue |- components/ |- App.vue |- main.js 在组件中编辑三个标签，编写视图、vm对象和css样式代码。 1、templ
阅读全文
摘要：组件有两种：脚本化组件、单文件组件 脚本化组件的缺点： html代码是作为js的字符串进行编写，所以组装和开发的时候不易理解，而且没有高亮效果。 脚本化组件用在小项目中非常合适，但是复杂的大项目中，如果把更多的组件放在html文件中，那么维护成本就会变得非常昂贵。 脚本化组件只是整合了js和html
阅读全文
摘要：整个项目是一个主文件index.html，index.html中会引入src文件夹中的main.js，main.js中会导入顶级单文件组件App.vue，App.vue中会通过组件嵌套或者路由来引用其他页面组件文件，页面组件也可以嵌套或者路由引用的方式加载子组件。
阅读全文
摘要：src 主开发目录，要开发的单文件组件全部在这个目录下的components目录下 static 静态资源目录，所有的css，js文件放在这个文件夹 dist 项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js 代码以后,dist就出现了
阅读全文
摘要：1、生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录。 该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目： // 生成一个基于 webpack模板的新项目 vue create 目录名 例如：
阅读全文
摘要：1、安装node.js Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别： 运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上 功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，
阅读全文
摘要：组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。 而在网页中实现一个功能，需要使用html定义功能的内容结构，使用css声明功能的外观样式，还要使用js来定义功能的特效，因此就产生了把一个功能相关的[HTML、
阅读全文
摘要：ajax跨域(跨源)方案：后端授权[CORS]，jsonp，服务端代理 CORS是一个W3C标准，全称是"跨域资源共享"，它允许浏览器向跨源的后端服务器发出ajax请求，从而克服了AJAX只能同源使用的限制。 实现CORS主要依靠<mark>后端服务器中响应数据中设置响应头信息返回</mark>的。
阅读全文
摘要：同源策略，是浏览器为了保护用户信息安全的一种安全机制。所谓的同源就是指代通信的两个地址（例如服务端接口地址与浏览器客户端页面地址）之间比较，是否协议、域名(IP)和端口相同。不同源的客户端脚本[javascript]在没有明确授权的情况下，没有权限读写对方信息。 ajax本质上还是javascrip
阅读全文
摘要：vue.js默认没有提供ajax功能的。 所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。 注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。 下载地址： https://unpkg.com/axios@0.18.0/dist
阅读全文
摘要：在vue使用指令过程中，还提供了一些增加或者削弱指令效果的修饰符。 @事件名.stop="js代码" 阻止事件冒泡 @事件名.once="js代码" 限制事件只能触发一次 @事件名.prevent="js代码" 阻止页面刷新，常用于a元素或者form元素中 v-model.number="变量" 把
阅读全文
摘要：每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在vm对象创建的不同阶段加上我们需要的代码，实现特定的功能。 <!DOCTYPE html> <html lang="en"> <head> <meta chars
阅读全文
摘要：侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。 侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。 案例1： <!
阅读全文
摘要：在vue开发中，有时候我们需要在页面中展示一些数据的结果或者是一些数据的相关信息，此时我们可以通过声明计算属性来声明一些新的变量，这些变量与原来的数据进行一一绑定。也就是计算属性的变量会随着data数据的改变而改变。 案例1： <!DOCTYPE html> <html lang="en"> <he
阅读全文
摘要：1、使用Vue.filter()进行全局定义 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue-2.6.14.js"></script> <s
阅读全文
