随笔分类 - Vue
学习系统搭建需要的一套用于构建用户界面的渐进式JavaScript框架。
摘要：建立一个商城项目，以及一个github仓库。 下载安装git https://git-scm.com/download/win 配置参数： Additional icons 附加图标 On the Desktop 在桌面上Windows Explorer integration Windows资源
阅读全文
摘要：axios有什么功能特点？ 1.可以在浏览器中发送xmlHttpRequests请求。 2.在node.js中发送http请求。 3.支持promise API 4.拦截请求和响应。 创建好了项目之后我们先下载axios： npm install axios --save 安装好后我们在main.j
阅读全文
摘要：Vuex是一个状态管理的工具，采用集中式存储管理。 例如，组件A的状态组件B也想用，组件B的状态组件C也想用，组件C的状态。。。那么这些状态互相传递十分麻烦，多个组件可能需要共享一个状态，放在谁那里都不合适，所以找一个“管家”，这个对象负责管理这些状态。 这里state代表单页面中data的内容，v
阅读全文
摘要：先解决前面留下的一个问题，如果引用的文件路径太长了，我们反复引用类似的文件太麻烦了，所以我们需要给一些文件起别名。 <img slot="item-icon-active" src="./assets/img/tabbar/money-active.svg" alt=""> 这里我们希望src中的内
阅读全文
摘要：TabBar中显示的内容由外界决定，可以传入图片文字等。 我们想制作这个东西，首先我们新建了一个tabbar的脚手架项目。 然后我们删除掉helloworld相关的内容，之后我们先写个大概试试： asserts下面设置两个文件夹，用来装css样式和img图片。 body{ padding: 0; m
阅读全文
摘要：动态路由：某些情况下，一个页面的path的路径可能是不一样的，例如进入/user的时候希望跟上一个/id。 如果想配置这样一个组件怎么做呢，首先我们得有一个user组件，创建一个：User.vue。然后还是要在router中的index配置路由。import 包完然后： {path:'/user',
阅读全文
摘要：ES6中的肩头函数： const cc = (参数列表)=>{} 例如：一个参数的时候括号可以省略掉 const power = num =>{ return num*num } 函数中没有参数的时候 const test = () =>{ console.log('hello world") }
阅读全文
摘要：开发大型项目，需要使用的Vue CLI。 因为：Vue.js直接开发需要考虑结构部署、目录结构、热加载、测试单元等等等都需要配置，效率太低，使用脚手架可以帮助我们自动生成好。 建筑上的脚手架： 首先电脑上一定要安装了node和npm，直接在cmd中输入node就可以检测。版本最必须要9以上的版本。
阅读全文
摘要：Es6语法并没有转换成Es5所以一些浏览器可能不支持，于是下载babel： npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 还是到官网把配置复制粘贴到config中。 { test: /\.js$/, excl
阅读全文
摘要：为什么需要模块化? 答：真实开发的时候，代码量大，js文件多，分工开发的时候大家都不知道别人的代码，容易引发全局变量灾难。 node应用由模块组成，采用的commonjs模块规范。每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等，对其他的模块都不可见。CommonJS规范规定，每个模块
阅读全文
摘要：子组件如何传递数据给父组件呢？通过自定义事件来传递： const cpn={ template:'#cpn', data(){ return { categories:[ {id:'aaa',name:'热门推荐'}, {id:'bbb',name:'手机数码'}, {id:'ccc',name:'
阅读全文
摘要：组件的使用流程： 1.创建组件构造器 2.注册组件 3.使用组件 1.调用Vue.extend()方法创建组件构造器 2.使用Vue.component()方法注册组件 3.在Vue实例的作用范围内使用组件 上代码： const cpnC = Vue.extend({ template:` <div
阅读全文
摘要：网课视频连接：https://www.bilibili.com/video/BV15741177Eh?p=40 首先我们新建了一个购物车的项目文件夹，然后创建三个文件，分别是：index.html、main.js、style.css 功能就和他们的名字一样，我们现在index文件中引入main st
阅读全文
摘要：v-bind绑定还有什么用呢： 通过v-bind：class='{active1:true,active2:false}'，这样class后面绑定是一个对象或者是数组，对象中为true的键值将被绑定。也就是等于v-bind：class='active1'这种形式。 例如： <div id="app"
阅读全文
摘要：用movies装载电影的内容我们用li标签把这些电影显示到网页上去，通过控制台输入：app.movies.push('aaa')可以在页面中马上添加了aaa。这是因为它是响应式的。 计数器案例： 设计一个记录点击次数的计数器，点击加号增加一次，减号就减少一次。 <div id="app"> <h2>
阅读全文
摘要：总结一下前面的知识点： vue实例化对象中： 1.先引包 <script type = "text/javascript" src="./node_modules/vue/dist/vue.js"></script> 2.new 一个vue实例对象：el后面对应#app。data函数要返回一个对象，
阅读全文
摘要：vue中对于页面+数据更为方便的输出，这些操作叫做指令。以v-xxx表示。如<div v-xxx>。 例如data中有这样的定义： data(){ return { msg:'欢迎', msg2:'<h3>欢迎</h3>' } } 我们可以将msg在p标签中进行显示，可以在template中这样写：
阅读全文
摘要：打开vscode，通过查看-终端打开终端，准备建一个vue项目。打开一个目标文件夹，终端给命令 npm install -g vue-cli 创建一个项目： vue init webpack projectName//cnpm install --global vue-cli 这个比上面更快一点 在
阅读全文
摘要：Vue.js的第一天，但愿能够坚持学完吧。昨天已经把Vue安装上了，安装的步骤并不难，搜索一下就可以找到。 Vue项目结构 下面的图片是一个Vue项目的目录结构。 粗略介绍一下文件夹都是干什么的： build文件夹，项目构建相关代码。 config：配置目录，端口号什么的。 node_modules
阅读全文
浙公网安备 33010602011771号