vue基础

v-if和v-show的区别

v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

v-html

v-html谨慎使用，容易被攻击，尤其表单提交不要用，保证页面安全性。

v-model三个修饰符

.lazy：取代 imput 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格。

v-bind

v-bind:src="",缩写：src

其他内部指令

v-pre:直接输入原始值，v-cloak:页面都渲染完成后再显示，v-once:只渲染一次，不改变

vue全局变量

全局变量，简单的来说就是在构造器外部用Vue提供给我们的API函数来定义新的功能。

自定义标签v-directive

自定义标签的三个参数

el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。

自定义标签的五个生命周期

1.bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2.inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3.update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4.componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5.unbind:只调用一次，指令与元素解绑时调用。

bind:function(){//被绑定
     console.log('1 - bind');
},
inserted:function(){//绑定到节点
      console.log('2 - inserted');
},
update:function(){//组件更新
      console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
      console.log('4 - componentUpdated');
},
unbind:function(){//解绑
      console.log('5 - unbind');
}

vue.set

由于Javascript的限制，Vue不能自动检测以下变动的数组。
当你利用索引直接设置一个项时，vue不会为我们自动更新。
当你修改数组的长度时，vue不会为我们自动更新。

vue的生命周期

 beforeCreate:function(){
                console.log('1-beforeCreate 初始化之后');
            },
            created:function(){
                console.log('2-created 创建完成');
            },
            beforeMount:function(){
                console.log('3-beforeMount 挂载之前');
            },
            mounted:function(){
                console.log('4-mounted 被创建');
            },
            beforeUpdate:function(){
                console.log('5-beforeUpdate 数据更新前');
            },
            updated:function(){
                console.log('6-updated 被更新后');
            },
            activated:function(){
                console.log('7-activated');
            },
            deactivated:function(){
                console.log('8-deactivated');
            },
            beforeDestroy:function(){
                console.log('9-beforeDestroy 销毁之前');
            },
            destroyed:function(){
                console.log('10-destroyed 销毁之后')
            }

组件和指令的区别

组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点。

propsData Option 全局扩展的数据传递

propsData三步解决传值： 1.在全局扩展里加入props进行接收。propsData:{a:1} 2.传递时用propsData进行传递。props:[‘a’] 3.用插值的形式写入模板。
作用：在单页应用中保持状态和数据的。

Mixins一般有两种用途：

1.在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
2.很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

路由

vue-router入门

第一步，在src/components目录下新建 Hi.vue 文件
第二步，修改index.js里面路由配置,
引入 Hi组件：我们在router/index.js文件的上边引入Hi组件,
增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象，代码如下。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import hi from '@/components/hi'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hi',
      name: 'hi',
      component: hi
    }
  ]
})

router-link制作导航
在 src/App.vue文件中的template里加入下面代码，实现导航

导航 ：
   首页
   Hi页面

vue-router配置子路由

第一步，建立hi1,hi2页面
第二步，修改index.js路由配置，
注意children:与后面内容加空格，children下的path值不能加 ' / ',
import引入模板，
代码如下：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hi',
      name: 'hi',
      component: hi,
      children: [
        {
          path: '/hi',
          name: 'hi',
          component: hi
        },
        {
          path: 'hi1',
          name: 'hi1',
          component: hi1
        },
        {
          path: 'hi2',
          name: 'hi2',
          component: hi2
        }
      ]
    }
  ]
})

第三步，hi.vue增加代码

第四步，app.vue增加代码

-Hi页面1
-Hi页面2

vue-router传参

传递name参数，直接在模板中写

$route.name

通过标签中的to进行传参，最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.,语法如下：

valueString

name：就是我们在路由配置文件中起的name值。
params：就是我们要传的参数，它也是对象形式，在对象里可以传递多个值。

单页面多路由区域操作

app.vue里面可以有多个，代表页面内的多个模块，配置路由注意component字段变成components

vue-router 利用url传递参数

:冒号的形式传递参数我们可以在理由配置文件里以:冒号的形式传递参数，这就是对参数的绑定，:后面是参数的名称,参数名称后面的括号内是正则表达式。 -. 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

{
    path:'/params/:newsId(\\d+)/:newsTitle',
     component:Params
}

在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了。

params |

在页面中通过插值的形式获取参数值，eg

{{$route.params.newsId}}

重定向

只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。

export default new Router({
  routes: [
    {
      path: '/',
      component: Hello
    },{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params
    },{
      path:'/goback',
      redirect:'/'
    }
  ]
})

重定向时传递参数,我们只需要在ridirect后边的参数里复制重定向路径的path参数就可以了,之后在模板正常接收就可以了

{
  path:'/params/:newsId(\\d+)/:newsTitle',
  component:Params
},{
  path:'/goParams/:newsId(\\d+)/:newsTitle',
  redirect:'/params/:newsId(\\d+)/:newsTitle'
}

alias别名

在index.js文件下给需要的模板起一个别名，

{
    path: '/hi1',
    component: Hi1,
    alias:'/jspang'
 }

起过别名之后，可以直接使用标签里的to属性，进行重新定向。
redirect和alias的区别

redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了中的内容。

注意：别名请不要用在path为’/’中，如下代码的别名是不起作用的。

{
  path: '/',
  component: Hello,
  alias:'/home'
}

路由的过渡动画

需要在标签的外部添加标签，标签还需要一个name属性。

css过渡类名：组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=”fade”,会有如下四个CSS类名：

fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。

过渡模式mode：

in-out:新元素先进入过渡，完成之后当前元素过渡离开。
out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。

mode的设置和404页面的处理

1.mode有两个值，可以在index.js下面修改

export default new Router({
    mode: "history",
    routes: [
      {
          path: '/',
          component: HelloWorld
      }
    ]
})

history:像普通url一样，不带#
hash:有#

2.404页面设置
在路由器配置文件index.js下面修改

{
   path:'*',
   component:Error
}

路由中的钩子

有两种写法

在/src/router/index.js中写，只有一种

{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params,
      beforeEnter:(to,from,next)=>{
        console.log('我进入了params模板');
        console.log(to);
        console.log(from);
        next();
},

在模板中写

beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开路由模板");
    next();
  }

三个参数：
to:路由将要跳转的路径信息，信息是包含在对像里边的。
from:路径跳转前的路径信息，也是一个对象的形式。
next:路由的控制参数，常用的有next(true)和next(false)。

vue