Navicat Premium 10.1.3激活(vue知识点)

目录
2.3.1样式的使用 3

1. 数组 3
2. 数组中使用三表达式 3
3. 数组中嵌套对象 3
4. 直接使用对象 3
5. 直接在素上通过 的形式，书写样式对象 3
6. 将样式对象，定义到 中，并直接引用到 中 3
7. 在 中通过数组，引用多个 上的样式对象 3
8. this.$data/vm.$data====>data 14
9. this.$el/==vm.$el==>el 指定要绑定的素 14
10. vm.$options.aa/this.$options.aa 访问自定义属性 14
11. 获取所有ref属性的标签（获取DOM素） 14
    第一种方法一定要加（） 21
    第二种方法 21
    9.1 全局组件 21
    9.2 局部组件(也可以创建模板,这里没有演示，更全局方法一样） 22
    9.3组件传参 24
    Axios 59
    1.安装 59
    2.在 mian.js 中引入 59
    3.在 mian.js 中配置(还有其他配置，这里没讲) 59
    4.使用 this.$http 59

1.vue 特色 https://cn.vuejs.org/v2/guide/

mvvm（前端） m:model（数据） v:view（视图）
vm:viewmodel 数据和视图的桥梁

双向数据绑定

angular mvc（后端） m:model（数据） v:view（视图） c:controller(控制器)

m—>v

优点：轻量级
高效率
上手快
简单易学
文档全面简洁

2.指令
2.1. v-model 双向数据绑定

• {{value}}—{{index}}
• {{value}}–{{key}}—-{{index}}

• {{i}}

  注意：font-size这样的一定要加’’
  1. 直接在素上通过 的形式，书写样式对象

  这是一个善良的H1

  2. 将样式对象，定义到 中，并直接引用到 中
  + 在data上定义样式：
  data: {
  h1StyleObj: { color: ‘red’, ‘font-size’: ‘40px’, ‘font-weight’: ‘200’ }
  }
  + 在素中，通过属性绑定的形式，将样式对象应用到素中：

  这是一个善良的H1

  前后可以添加内容，会被覆盖

  2.10 v-on 事件

  {{msg}}

  简写：

  组合版（单按a,b，c）
  <input type=“text” @keyup.a.b.c=“showa”/>

  3.表单
  text,password,textarea—–>v-model—》value
  radio,checkbox,select—–>v-model checked/v-bind:value

  表单修饰符：
  .lazy:失去焦点（change事件同步）或者回车的时候才会同步数据
  .number:变成数值
  .trim:去掉前后空格，不会去掉中间空https://www.cnblogs.com/xiaobaiv/p/9153020.html

  4.ajax http://www.runoob.com/vue2/vuejs-ajax.html
  axios https://blog.csdn.net/sinat_/article/details/
  https://segmentfault.com/a/02115
  https://www.kancloud.cn/yunye/axios/（中文网）

  4.1. vue-resource发送请求步骤

  4.2. params：跟在url后面传参
  this.$http.get(url,{params:{user:”li”}}).then(res=>{},rej=>{})

  emulateJSON:设置请求体的类型为application/x-www-form-urlencoded
  this.$http.post(url,{user:”li”},{emulateJSON:true}).then(res=>{},rej=>{})

  //可以代替get和post
  this.$http({
  url:,
  data:,
  method:get/post,
  jsonp:“callback”
  }).then(res=>{},rej=>{})

  全局配置 htpp://…/api/1.html
  Vue.http.options.root=”http://…” —>使用 api/1.html
  Vue.http.options.emulateJSON=true;

  4.3.https://www.kancloud.cn/yunye/axios/
  https://www.cnblogs.com/jiangxifanzhouyudu/p/9102908.html
  https://blog.csdn.net/xjtarzan/article/details/

  4.3.3. Axios.defaults.baseURL = ‘https://api.example.com’;//配置你的接口请求地址
  Axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;//配置token,看情况使用
  Axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;//配置请求头信息。
  // 超时时间
  Axios.defaults.timeout = 5000;

  4.3.4.在请求或响应被 then 或 catch 处理前拦截它们。

  Axios跨域 https://www.cnblogs.com/wancheng7/p/8987694.html
  https://blog.csdn.net/jikangjian/article/details/
  如何使用proxyTable
  还是拿之前使用过的vue-cli举例。我们首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用，自然而然是要配置在dev里面：

  dev: {
  env: require(’https://blog.csdn.net/SupermeDCQ/article/details/dev.env’),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: ‘static’,
  assetsPublicPath: ‘/’,
  proxyTable: {
  ‘/api’: {
  target: ‘http://www.abc.com’, //目标接口域名
  changeOrigin: true, //是否跨域
  pathRewrite: {
  ‘^/api’: ‘/api’ //重写接口
  }
  },
  cssSourceMap: false
  }

  5.生命周期函数（钩子函数）https://segmentfault.com/a/10666
  https://segmentfault.com/a/81906

  https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA（图）

  执行了destroy操作，原来样式保留，后续就不再受vue控制了。

  6.computed和watch，methods
  https://segmentfault.com/a/48175
  https://www.cnblogs.com/fengxiongZz/p/8074731.html
  https://blog.csdn.net/lhban108/article/details/

  、和之间的对比

  1. (多个值变化，影响到一个结果) 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。他是函数主要当作属性来使用，逻辑简单。
  2. 方法表示一个具体的操作，主要书写业务逻辑；
  3. (一个值变化，影响到多个结果改变)一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化（watch监控路由对象‘$route’），从而进行某些具体的业务逻辑操作；可以看作是和的结合体；

  计算属性 computed (多个值变化，影响到一个结果) 原来没有属性（结果），创建可计算属性（get/set,一个默认get体）
  computed:{//前面的数值变化影响到结果—》get
  // ‘fullname’:function(){
  // return this.firstname+this.lastname;
  // }

  侦听属性 watch（变化的值） (一个值变化，影响到多个结果改变) 检测以有属性

  }
  // 立即以 的当前值触发回调
  //初始化之前，先监听一下操作，以原始的值回调

  // obj(){//无法监测到里面数值的变化
  // console.log(this.obj.a);
  // },
  // ‘obj’:{
  // handler(oldVal,newVal){
  // console.log(oldVal,newVal);//结果一样，都是新值
  // },
  // immediate: true,//初始化时就会先执行一遍该监听对应的操作
  // deep:true//console.log打印的结果,
  // //发现oldVal和newVal值是一样的,
  // //所以深度监听虽然可以监听到对象的变化,
  // //但是无法监听到具体对象里面那个属性的变化
  // },
  “obj.a”:{
  handler(oldVal,newVal){
  console.log(oldVal,newVal);//结果会不一样
  },
  immediate: true
  },
  firstname(){//普通的就可以用这种方式检测,无法添加检测属性
  console.log(this.firstname);
  }
  }
  })

  vm.$watch(“obj.a”,function(oldVal,newVal){
  console.log(oldVal,newVal);
  })

  7.vue实例的简单属性和方法
  https://www.cnblogs.com/wspblog/p/9876723.html

  属性
  1.this.$data/vm.$data====>data
  vm.a=100;
  vm.$data.a=100;直接使用数据实例的数据对象2.this.$el/==vm.$el==>el指定要绑定的素3.vm.$options.aa/this.$options.aa 访问自定义属性
  4. 获取所有ref属性的标签（获取DOM素）

  11111

  console.log(this.$refs.hOne.innerHTML);

  方法

  1. vm.KaTeX parse error: Expected ‘EOF’, got ‘#’ at position 8: mount(“#̲box”)=====>手动挂载…set(要修改的数据,属性名，属性值)/Vue.set(vm.jsona,‘sex’, ‘男’)/vm.$set(要修改的数据,属性名，属性值)====>任何时候添加对象属性

     3.vm.$destroy()/this.$destroy();>销毁 destoryed/beforeDestroy
     4.vm.$delete(vm.jsona,属性名)/Vue.delete(vm.jsona,“a“)/this.$delete(this.jsona,“a”)>删除对象属性

  2. vm.$forceUpdate()/this.$forceUpdate(); 更新==》
     （与updated/beforeUpdate相对较多）
     this.$forceUpdate();有时候你会碰到数据已经更新了但是组件还是没有刷新6.vm.$watch(data,callback[,options])

     7. vm.$nextTick(fn)/this.$nextTick()===>(原生DOM)

     this.KaTeX parse error: Expected ‘}’, got ‘EOF’ at end of input: …nsole.log(this.el.getElementsByTagName(“span”)[0].innerHTML)
     })

     Vue.nextTick().then(function(){
     console.log(vm.$el.getElementsByTagName(“span”)[0].innerHTML)
     })

     1.在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

     与之对应的就是beforeMount（）、mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

     2.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中

  其他属性和方法（组件）
  $parent
  $children
  $emit
  $on
  $root
  $refs

  8.自定义过滤器/自定义指令/自定义键盘信息/解除事件绑定

  1.0版 vue过滤器
  https://www.cnblogs.com/crazycode2/p/6736189.html
  capitalize 首字母大写
  uppercase 全部大写
  lowercase 全部小写
  currency 输出金钱以及小数点
  pluralize 输出复数的形式
  debounce 延期执行函数
  limitBy 在 v-for 中使用，限制数量
  filterBy 在 v-for 中使用，选择数据
  orderBy 在 v-for 中使用，排序

  2.0版本后，1.0过滤器都废弃，都需自定义
  自定义过滤器

  {{ message | capitalize }}

  {{msg | capitalize(‘aaa’,’123′)}}

  // 2.0全局过滤器—->可以作用在任何vue实例上
  Vue.filter(‘capitalize’,function (val,str=””,num=””){
  let firstcap=val.slice(0,1).toUpperCase();
  let lastcap=val.slice(1);

  // ,
  // filters:{//局部过滤器—>只能作用在自己的vue实例上
  // capitalize(val,str=””,num=””){
  // let firstcap=val.slice(0,1).toUpperCase();
  // let lastcap=val.slice(1);
  //
  // return firstcap+lastcap+str+num;
  // }
  // }
  })

  8.1、自定义指令：使用Vue.directive(id,definition)注册全局自定义指令，使用组件的directives选项注册局部自定义指令。
  Vue.directive(“focus”,{
  bind:function(){
  },
  inserted:function(){
  },…
  })

  简写指令：
  在 bind 和 update 钩子上做重复动作，并且不想关心其它的钩子函数
  Vue.directive(“focus”,function(){

  })

  // console.log(binding.value);//2,结果
  // console.log(binding.expression);//1+1 过程
  //console.log(vnode);//所有信息，包含子素

  vue.js怎样移除绑定的事件

  第一种方法一定要加（）

  第二种方法

  然后在data里添加unbind=false属性，需要解绑的时候将其设置为true

  9.组件（创建的时候可以用驼峰，使用的时候用- myCom ）
  组件除了没有el 和 data 变成函数之外,其他的跟new vue一样，还多了一个template,template就相当于new vue的视图
  9.1 全局组件
  Vue.component(“myCom”,{
  data(){
  return{
  msghead:“首页”
  }
  },
  methods:{

  局部组件创建 方法1 Vue.extend({})
  1.var cona=Vue.extend({//来创建组建
  data(){
  return{

  局部组件简写应用：

  2.局部组件创建 方法2 直接写在compontents里面

  new Vue({
  el:”#box2″,
  components:{
  “conb”:{
  data(){
  return{
  msg:“hello”
  }
  },
  methods:{

  var conc={
  data(){
  return{

  局部组件简写应用：

  9.2.1名称的使用
  组件挂载名称========>页面使用
  myCom

  mycom

  1.父组件向子组件传递参数（还可以传递函数） ====》props
  父组件通过自定义属性的方式传给子组件(:parentmsg=”msg”)，子组件用props接受(props:[“parentmsg”])

  https://segmentfault.com/q/79096

  如果你想看到错误，你要用vue的非压缩版

  事件绑定机制：父组件通过自定义事件的方式向子组件传递方法（@mymsg=“show”），子组件用this.$emit()接受(this.$emit(fun,参数1，参数2))，参数可以是子组件的，顺便传给父组件，实现子组件向父组件传值

  }
  })

  Event.$on(自定义事件名,()=>{}) 接收参数

  var Event=new Vue();

  组件1：
  methods:{
  send(){
  Event.$emit(“mymsgone”,this.msgone);
  }
  },

  组件3：
  mounted(){//created(){
  Event.$on(“mymsgone”,(one)=>{
  console.log(this);
  this.getone=one;
  })

  $children 获取子素的数据/方法(mounted钩子函数，要有下标）
  $refs 获取子组件的方法和数据/作用2：获取DOM素
  （一定要使用 ref属性）

  5. .native 子组件上添加事件（父组件），触发事件，没有.native无法触发
     无法在组件直接使用事件，需要加修饰符来实现 根素上监听原生事件
     （把vue组件转化成一个普通的HTML标签，并且对普通的HTML标签是没有任何作用的）
     6.为什么组件里的data是函数？
     在组件中，因为可能在多处调用同一组件，为了不让多处的组件共享同一data对象，只能返回函数。
     data为对象的话会报错，为了理解这种机制，我们假设data为一个对象，那么这同一个对象有可能被很多实例共享，一个实例改变其它也会跟着变，这明显是不对的。而通过data函数，每新建一个实例，都会调用data来return一组新的原始数据。

  ---

  ---

  ---

  // data:{
  // num:10
  // }

  // return {
  // num:10
  // }
  },
  methods:{
  },
  template:”#foot”
  };

  10.组件的切换效果

  10.动画 https://cn.vuejs.org/v2/guide/transitions.html
  https://bianchenghao.cn/developer/article/
  https://segmentfault.com/q/38500

  10.1使用过渡类名

  v-enter：定义进入过渡的开始状态。在素被插入之前生效，在素被插入之后的下一帧移除。
  v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
  v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
  v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
  v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
  v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

  1. HTML结构：
     使用name=”fade”属性，来设置多个动画的名称

  /* 定义进入和离开时候的过渡状态 */
  .fade-enter-active,
  .fade-leave-active {
  transition: all 0.2s ease;
  position: absolute;
  }

  10.2 使用第三方 CSS 动画库
  duration：过渡持续时间 (以毫秒计)

  https://www.cnblogs.com/cntian/p/13292041.html
  注意：vue 和 animate.css 版本兼容性问题导致动画不起作用
  Vue 官网引用的是 animate.css 3.5 版本
  不能引用 animate.css 最新版本 例如：(4.0)

  yarn add animate.css（添加）/ yarn remove animate.css(删除）
  https://blog.csdn.net/yunchong_zhao/article/details/

  Vue-cli

  1. 安装 npm i animate.css@3.7.2 yarn add animate.css@3.7.2

  2. 导入
     //引入animate.css
     import animated from ‘animate.css’
     //使用animated
     Vue.use(animated)

     3.重新启动项目 npm run serve / yarn serve

     4.按官网规则使用

  https://www.worldlink.com.cn/osdir/animatecss.html
  https://www.cnblogs.com/fang-1207/p/animationfang.html

  1. 导入动画类库：

  2. 定义 transition 及属性：

  动画哦

  注意：同时使用过渡和动画

  但是，在一些场景中，你需要给同一个素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
  https://www.haoht123.com/2330.html

  10.3使用动画钩子函数（半场动画）
  https://blog.csdn.net/weixin_/article/details/
  v-on:before-enter=“beforeEnter”入场动画之前执行beforeEnter方法
  v-on:enter=“enter”入场过程中执行的方法
  v-on:after-enter=“afterEnter”入场后执行的方法
  v-on:enter-cancelled=“enterCancelled”入场动画取消的时候执行方法（进入取消）进入过渡被打断时
  v-on:before-leave=“beforeLeave”离场动画之前执行beforeLeave方法
  v-on:leave=“leave”离场动画过程中执行的方法
  v-on:after-leave=“afterLeave”离场结束后执行的方法
  v-on:leave-cancelled=“leaveCancelled”离场动画取消时执行的方法离开过渡被打断时

  1. 定义 transition 组件以及三个钩子函数：

  10.4 可以通过 appear 特性设置节点在初始渲染的过渡（页面入场效果）

• {{item}}
• 10.5 过渡模式 in-out：新素先进行过渡，完成之后当前素过渡离开。 out-in：当前素先进行过渡，完成之后新素过渡进入。

  <button @click=“md=‘aa’”>a
  <button @click=“md=‘bb’”>b
  <button @click=“md=‘cc’”>c

  10.6 v-for 的列表过渡

  1. 定义过渡样式：
  2. 定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

  3. 定义 VM中的结构： // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: ‘#app’, data: { txt: ”, list: [1, 2, 3, 4] }, methods: { add() { this.list.push(this.txt); this.txt = ”; } } });

  10.7 列表的排序过渡

  默认转化为span，通过tag属性转化成为其他标签

  组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 特性，它会在素的改变定位的过程中应用。
  和 结合使用，能够让列表的过渡更加平缓柔和：
  .v-move{
  transition: all 0.8s ease;
  }
  .v-leave-active{
  position: absolute;
  }

  11.路由 https://router.vuejs.org/zh/

  什么是路由（https://blog.csdn.net/aaaaa1994/article/details/）

  1. 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

  2. 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现.

  3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

  11.1在 vue 中使用 vue-router

  1. 导入 vue-router 组件类库：
  2. 使用 router-link 组件来导航

  登录
  注册

  3. 使用 router-view 组件来显示匹配到的组件

  4. 创建使用创建组件
     // 4.1 使用 Vue.extend 来创建登录组件
     var login = Vue.extend({
     template: ‘

     登录组件

     ’
     });

     // 4.2 使用 Vue.extend 来创建注册组件
     var register = Vue.extend({
     template: ‘

     注册组件

     ’
     });

  5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
     // 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
     var router = new VueRouter({
     routes: [
     { path: ‘/login’, component: login },
     { path: ‘/register’, component: register }
     ]
     });

  6. 使用 router 属性来使用路由规则
     // 6. 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
     el: ‘#app’,
     router: router // 使用 router 属性来使用路由规则

  简写：router
  });

  11.2 设置路由高亮和重定向

  1. .router-link-active{
     color: red;
     font-weight: 800;
     font-style: italic;
     font-size: 80px;
     text-decoration: underline;
     background-color: green;
     }
     2…myactive {
     color: red;
     font-weight: 800;
     font-style: italic;
     font-size: 80px;
     text-decoration: underline;
     background-color: green;
     }

  var routerObj = new VueRouter({
  routes: [
  // { path: ‘/’, component: login },
  { path: ‘/’, redirect: ‘/login’ }, //路由重定向/的页面
  { path: ‘*’, redirect: ‘/login’ }, //路由重定向所有页面
  { path: ‘/login’, component: login },
  { path: ‘/register’, component: register }
  ],
  linkActiveClass: ‘myactive’//统一设置一个class,二级路由也可以用
  })

  3. const router = new Router({
     routes: [
     {
     path: “/”,
     name: “首页”,
     redirect: ‘/home’
     },
     {
     path: ‘/login’,
     name: ‘Login’,
     component: Login
     },
     { path: ‘*’, component: NotFoundComponent }
     ],
     linkActiveClass: “active-router”,
     //模糊匹配 /user /user/1 /user/aa=1
     linkExactActiveClass: “exact-router”//精准匹配 /user
     })
     https://blog.csdn.net/meikaied/article/details/

  11.3使用别名(alias)和给router-link修改原来的默认标签

  Alias
  {path:”/login”,component:Login,alias:’/lo’}

  router-link原来的默认标签是,通过 tag=”span” 修改
  登陆页面

  11.4 设置路由切换动效

  11.5 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
  如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
  const router = new VueRouter({
  mode: ‘history’,
  routes: […]
  })

  11.6 在路由规则中定义参数（动态路由）

  Query:
  登录
  1.在规则中定义参数：
  { path: ‘/login’, component: login }

  2. 通过 来获取路由中的参数：
     var register = Vue.extend({
     template: //this可以加可以不加

     });

  //methods里必须加this

  Params:
  登录

  1. 在规则中定义参数：
     { path: ‘/register/:id’, component: register }
  2. 通过 来获取路由中的参数：
     var register = Vue.extend({
     data(){
     return{
     aid:””
     }
     },
     created(){
     this.show();
     },
     methods:{
     show(){
     //console.log(this.$route.params.id);this.aid=this.$route.params.id;//必须加this
     }
     },
     template:
     //this可以加可以不加
     });

  11.7 $route和$router路由跳转https://www.bianchenghao.cn/p/fa0b5d
  https://www.cnblogs.com/hwldyz/p/9204346.html
  1 $route
  1.1 $route表示(当前路由信息对象)表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的routerecords（路由记录）。路由信息对象：即$route会被注入每个组件中，可以利用它进行一些信息的获取。
  1.$route.path\ast \ast 字符串，对应当前路由的路径，总是解析为绝对路径，如“/foo/bar“。\ast \ast 2.$route.params
  一个 key/value 对象，包含了 动态片段 和 全匹配片段，
  如果没有路由参数，就是一个空对象。
  3.$route.query
  一个 key/value 对象，表示 URL 查询参数。
  例如，对于路径 /foo?user=1，则有 $route.query.user==1，如果没有查询参数，则是个空对象。\ast \ast 4.$route.hash
  当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点
  5.$route.fullPath\ast \ast 完成解析后的URL，包含查询参数和hash的完整路径。\ast \ast 6.$route.matched
  数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
  7.$route.name当前路径名字\ast \ast \ast \ast 8.$route.meta 路由信息

  1.2. route object 出现在多个地方:
  (1)在组件内，即 this.$route
  (2)在 $route 观察者回调内 router.match(location) 的返回值
  (3)导航守卫的参数：
  router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息对象
  })
  watch: {
  $route(to, from) {
  // to 和 from 都是 路由信息对象
  }
  }

  2. $router对象
     全局的路由实例，是router构造方法的实例。
     在 Vue 实例内部，你可以通过 $router访问路由实例2.1全局挂载路由实例//全局注册的路由Vue.use(VueRouter)2.2路由实例方法pushhttps://blog.csdn.net/weixi{n}_{3}8199437/article/details/83030010//字符串this.$router.push(‘home’)// 对象
     this.$router.push(path{:}^{\prime }hom{e}^{\prime })//命名的路由this.$router.push({ name: ‘user’, params: { userId: 123 }})// 带查询参数，变成 /register?plan=123
     this.$router.push(path{:}^{\prime }registe{r}^{\prime },query:plan{:}^{\prime }123^{\prime })push方法其实和<router-linkto=“...“>是等同的。注意：push方法的跳转会向history栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。2.2路由实例方法go//页面路由跳转前进或者后退this.$router.go(-1) // 后退
     this.$router.go(0)//刷新this.$router.go(1)//前进
     this.$router.go(3)//前进3步
     2.3 路由实例方法replace
     //push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，不会向 history 栈添加一个新的记录

  05

  // 一般使用replace来做404页面
  this.$router.replace(’/’)

  11.8 使用 属性实现路由嵌套（二级路由）
  https://www.cnblogs.com/lwming/p/11282674.html

  Account

  11.9命名路由
  有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

  const router = new VueRouter({
  routes: [
  {
  path: ‘/user/:userId’,
  name: ‘user’,
  component: User
  }
  ]
  })
  要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

  User
  这跟代码调用 router.push() 是一回事：

  router.push({ name: ‘user’, params: { userId: 123 }})
  这两种方式都会把路由导航到 /user/123 路径。

  11.10响应路由参数的变化
  提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

  复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

  const User = {
  template: ‘…’,
  watch: {
  ‘$route’ (to, from) {
  // 对路由变化作出响应…
  }
  }
  }
  或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

  const User = {
  template: ‘…’,
  beforeRouteUpdate (to, from, next) {
  // react to route changes…
  // don’t forget to call next()
  }
  }

  11.11 命名视图实现经典布局（组件复用）

  1. 标签代码结构：
  2. JS代码：
  3. CSS 样式：

  11.12路由进阶https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

  路由懒加载
  https://www.cnblogs.com/yzq-fighting/p/7731545.html https://blog.csdn.net/mzrxLXR/article/details/81484676

  使用Bootstrap
  https://www.cnblogs.com/shengnan-2017/p/8094134.html

  12.vue-cli 2.0
  https://cli.vuejs.org/guide/installation.html—-》3.0
  https://www.cnblogs.com/blcorder/p/12015715.html—》4.0

  1.只在本电脑安装一次
  1.安装nodejs（https://nodejs.org/en/） 验证 node -v(version) 使用npm
  2.安装vue npm install vue
  3.安装vue-cli npm install vue-cli -g 验证 vue -V 使用vue

  2.多次使用 ===>创建工程
  本身集成很多项目模板:
  simple 个人觉得一点用都没有
  webpack 可以使用(大型项目)
  Eslint 检查代码规范，
  单测试
  webpack-simple 个人推荐使用, 没有代码检查 √

  3.想要安装 vue-resource====》使用

  4 vue-cli使用插件
  –save 和 –save -dev 的区别
  https://blog.csdn.net/sunhuaqiang1/article/details/

  1.按装插件 npm install vue-resource –save(生产环境)/–save -dev（开发环境） /空
  2.先引入，在use
  import vueResource from ‘vue-resource’
  Vue.use(vueResource)
  3.看文档，使用

  5.变化
  index.html ====>Index.vue

  axios

  https://www.kancloud.cn/yunye/axios/

  keep-alive https://www.bianchenghao.cn/p/4b55d312d297
  https://juejin.im/post/5a69894ab0f12f2

  时间插件
  http://momentjs.cn/
  Npm install moment -S import moment from “moment”
  import moment from ‘moment’
  Vue.filter(‘dateFormat’, function (dataStr, pattern = “YYYY-MM-DD HH:mm:ss”) {
  return moment(dataStr).format(pattern)
  })

  配置全局请求网址前半部分
  Vue.http.options.root = ‘http://vue.studyit.io’;

  Mock数据
  Iview 主要是写后台管理系统
  Reset-css https://www.npmjs.com/package/reset-css
  import “reset-css”
  初始化样式设置

  环境配置
  1.Nodejs
  2.mySQL https://dev.mysql.com/downloads/mysql/5.1.html#downloads
  配置和安装 https://blog.csdn.net/_/article/details/#%E5%85%88%E5%8E%BB%E5%AE%98%E7%BD%91%E4%B8%8B%E8%BD%BD%E7%82%B9%E5%87%BB%E7%9A%84MySQL%E7%9A%84%E4%B8%8B%E8%BD%BD%E2%80%8B
  初始账号和密码 root@localhost: >arjf*ayq30S

  其他
  设置密码https://blog.csdn.net/numberseven7/article/details/
  查看是否有sql服务 sc query mysql
  删除重新创建https://www.cnblogs.com/zhaocundang/p/8540746.html
  端口占用https://blog.csdn.net/_/article/details/
  2059错误链接https://blog.csdn.net/Long/article/details/

  3.Navicat Premium 12
  4.启动服务node app.js
  5.构建页面 写项目

  安装yarn(https://classic.yarnpkg.com/zh-Hans/docs/usage）
  npm install -g yarn
  查看版本：yarn –version

  Vue 如何使用 swiper
  （npm命令https://blog.csdn.net//article/details/）

  1. 6.0.0 版本以上，会存在一些功能失效的问题
     以下是使用规则：https://github.com/surmon-china/vue-awesome-swiper

  2.换成低版本
  你已经运行了下面命令
  npm install swiper vue-awesome-swiper –save

  or

  yarn add swiper vue-awesome-swiper

  解决：yarn add swiper@^5.2.0 npm install swiper@^5.2.0 –save

  在 main.js中添加
  import VueAwesomeSwiper from ‘vue-awesome-swiper’
  import ‘swiper/css/swiper.css’
  Vue.use(VueAwesomeSwiper, /* { default global options } */)

  使用：

  
  
  

  http://a.itying.com/upload//25.jpg
  循环加载图片https://www.cnblogs.com/SamWeb/p/8519735.html

  Axios
  http://www.axios-js.com/
  https://www.bianchenghao.cn/p/e36956dc78b8
  1.安装
  npm install axios
  cnpm install axios
  yarn add axios
  2.在 mian.js 中引入
  import axios from ‘axios’
  3.在 mian.js 中配置(还有其他配置，这里没讲)
  Vue.prototype. h t t p = a x i o s 4. 使 用 t h i s . http= axios 4.使用 this. http=axios4.使用th Navicat Premium 10.1.3激活is.http
  methods: {
  show() {
  this.$http({
  method: ‘get’,
  url: ‘/user’,
  data: {
  name: ‘virus’
  }
  })
  }

今天的文章
Navicat Premium 10.1.3激活(vue知识点)分享到此就结束了，感谢您的阅读。