weixin_48702807的博客

npm package : npm | Homeyarn package : Yarnnpm install packageNameyard add packageName

lodash 用法

如果多个组件中，都会调用相同的代码如相同的组件，相同的 methods, 相同的变量，相同的过滤器等，那么可以利用混入 mixins混入的 js 文件命名为：mixin.js//混入 minxin 导出的是一个对象，不是方法，这个对象中可以放 methods， data 等export const dateFormateFilterYYYYMMDD = { filters: { dateFormate(time) { return timeFormate(time, "

写这个是因为之前来公司的时候没有接触过 Vue 项目，不知道怎么把一个已经存在的 vue 项目给启动起来这个操作只做一次,打开 cmd: cd 到克隆到本地的文件夹 site 里 npm install 如果报错 ERR! code EINTEGRITY 就执行如下步骤： 首先全局更新了 npm: npm update --global npm 校验npm 缓存 npm cache verify 如果有 package-lock.json文件，就删掉，因为这个文件每个机器上不一样

安装 axios 和 引入安装： npm install axios - save 引用： import axios from 'axios' 网络请求可以测试的几个接口地址: http://httpbin.org/ get: http://123.207.32.32:8000/home/multidata post: http://123.207.32.32:8000/home/data?type=pop&page=1 http://123.207.32.32:8000/categ

变量如果是对象的话，那么需要给对象先定义好属性，才能响应式。因此需要提前定义好所需的属性，如 info: {name:'11', value:'22'}添加属性：如果想要再之后添加属性的话还想要响应式的话，有如下两种方式使用Vue.set() 这个可以是对象 Vue.set(对象, '新属性', 赋值) 也可以是数组 Vue.set(数组, 索引值, 赋值) 用新的对象给旧的对象赋值 info = {... info, 'newProp': 1}删除属性:响应式Vue.delete(对.

Vuex存储全局变量的，并且这个变量可以实现响应式更新 Vuex 使用单一状态树（Single Source of Truth: 也可叫单一数据源）来管理应用层的全部状态 一般什么情况下应用？ 用戶的登入状态 用户名称、头像、地理位置等信息 商品的收藏、购物车中的物品 它是一个插件，因此需要安装 npm install vuex 它要存在 src 下的 store 文件夹 index.js 文件 import Vue from 'vue'import Vuex from 'v

Vue 对象const vue = new Vue(options); el 类型：String | HtmlElement 作用： 挂载对象，决定之后Vue 对象会管理哪个 Dom template: `当同时有 el 和 tempalte 的时候这里写的 html code 会替换 el 对应的整个 Dom 元素` data 类型: Object | Function 在组件当中 data 必须是一个函数，而不能用 object 作用： Vue 实例对象的数据对象 m

v-on 事件监听v-on 绑定事件监听 缩写 @ v-on 函数参数 在事件监听的时候： 如果函数没有参数， 那么调用的时候可以不加括号, 也可以加括号 如 @click="add" add(){...} 如果函数有参数，我们调用的时候加写空括号，那么这个参数的值是 undefind 如 @click="add()" add(canShu){...} 如果函数有参数，我们调用的时候不写括号，那么这个参数的值是 event 如 @click="add" add(ev

v-model 双向绑定用来实现表单元素 input 和数据的双向绑定 原理 v-module 其实是一个语法糖，它的背后本质上包含两个操作： v-on:input 和 v-bind:value <input v-model="message" placeholder="edit me"> 相当于 <input :value="message" @input="dataChange" placeholder="edit me">data:{ message:

webpack针对 JS 的模块化打包工具查看当前版本 webpack --version安装webpack 的运行需要依赖 node 环境，因此需要先行安装 node 版本要大于 8.9node 环境为了可以正常的执行很多代码，会包含各种依赖的包 所以安装node 之后会自动会安装 npm (node package manager) 用来管理 node 上面的各种包全局安装 3.6.0, 因为 vue cil 2 依赖该版本： npm install webpack@3.6.0 -

vue CLI 脚手架大型项目需要考虑代码目录结构，项目结构和部署，热加载，代码单元测试等事情。如果手动完成这些配置是很麻烦的，因此会用到脚手架。 CLI: command line interface 命令行界面，俗称脚手架 Vue CLI 是官方发布的 vue.js 项目脚手架 Vue CLI 使用前提： 安装了 node, webpack 安装 Vue ClI 3： npm install -g @vue/cli 查看版本 vue --version 安装特定版本： npm insta

Vue-Router路由中有一个非常重要的概念叫路由表：本质上就是一个映射表，决定了数据包的指向。服务器渲染/后端渲染如 jsp, php, java ... 服务器直接生产渲染好对应的 html 页面，返回到客户端进行展示。 这种情况下渲染好的页面不需要单独加载任何的 css, js, 可以直接交给浏览器显示，这样也有利于 SEO. 缺点是逻辑代码和 html 混合在一起，维护糟糕，都是由后端人员完成。后端处理 url 和页面之间的映射关系前后端分离阶段前端人员由 js 执行 ajax

assetscssimagescomponents : 只放 share 的 componentsstore : 存 vuex 全局状态routerviewscarthome 主页profile

组件组件里的 data 必须是一个函数返回一个对象，而不是直接一个对象，是为了更好的复用 组件里正常也有 method 等属性组件使用的三个步骤(最原始的办法)创建组件构造器(后期都被合并了): 调用 Vue.extend() 方法 const myComponet = Vue.extend({template:'里面是 html code'}); html code 可以使用两种方式 script 标签： 不常用 <script type="text/x-template" id=

数据展示插值操作data 里的数据都是怎么显示在页面上的？Mustache 语法 (胡须，也就是双大括号) : {{变量 | 简单表达式}}v-once 指令的使用： {{message}}不加 v-once 的时候 message 之后变了，页面显示会跟着变。 如果需求是只显示最初的值，以后值不变，就要加这个指令。v-html : 当服务器给我们返回的数据带标签的时候， 如： url: ‘百度一下’,{{ur}}: 页面会把这一串标签当做字符转打印出来{{ur}} 页面会将这个a 标签正常

父组件通过 props 属性向子组件传递数据 props: ["子组件的属性"] //可以是数组(不常用)，也可以是对象(常用) 我们可以设置 prop 是否有默认值，是否是必传值，值得类型 子组件用 {{prop名}} 在 html 里来接值即可 子组件通过自定义事件向父组件发送消息: 在子组件中，通过 $emit 来触发事件 子组件里的某元素事件 @click="clickbutton('aaa')" 子组件的方法： clickbutton(value) { this.$emit('m

toSourceDetail(id) { //当前窗口打开 this.$router.push("/sourceDetail?sid=" + id); //新窗口打开 let routeUrl = this.$router.resolve({ path:"/sourceDetail", query:{sid: id} }); window.open(routeUrl.href, '_blank');}

tabbar.vue<template> <div class="tab-bar"> <slot></slot> </div></template><script>export default { name: "TabBar",}</script><style scoped>.tab-bar { display: flex; /*让它一直处于底部 左右占满*/ pos