day1

MVC 和 MVVM 的区别
学习了 Vue 中最基本代码的结构
插值表达式 v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show
事件修饰符： .stop .prevent .capture .self .once
el 指定要控制的区域 data 是个对象，指定了控制的区域内要用到的数据 methods 虽然带个 s 后缀，但是是个对象，这里可以自定义了方法
在 VM 实例中，如果要访问 data 上的数据，或者要访问 methods 中的方法，必须带 this
在 v-for 要会使用 key 属性（只接受 string / number）
v-model 只能应用于表单元素
在 vue 中绑定样式两种方式 v-bind:class v-bind:style

day2

filter 过滤器
生命周期
- beofreCreate 实例被创建前
- created （data created）初始化完成
- beforeMount 模版内存编译完成未渲染
- mounted 内存模板已经挂载到页面
- beforeUpdate 数据以更新未同步到页面
- updated 数据与页面以同步
vue-resource 数据获取
- getInfo get 发起请求
- postInfo post 发起请求
- jsonpInfo jsonp 发起请求
模拟客户端获取 jsonp 数据（node）

通过调用并执行本地的回调函数（端口，路由，数据判断，函数）
nodejs 开启端口为 3000 的服务
使用前端模板引擎 express
app.get 判断路由 /index
通过 url 获取到传过来的数据（query）
使用数据模板拼接 var scriptStr = ${query.callback}(${JSON.stringify(data)})(query.callback 是 url 获取过来的数据于后台服务的数据拼接)
res.end(data)把数据返回
在页面中就可以用函数接收传过来的数据（showInfor123 就是页面自定义函数名）

day3

动画 1 控制语句
- 通过@click 和 v-if 、 data 判断数据的显示隐藏
动画 2 transition css 控制
- transition vue 官方控制用在需要被动画控制滴元素，包裹起来
- css 控制
  - v-enter [这是一个时间点] 是进入前，元素的起始状态，此时还没有进入
  - v-leave-to 【】是动画离开之后，离开的终止状态，此时元素动画已经结束
  - v-enter-active 【入场动画的时间段
  - v-leave-active 【离场动画的时间段
动画修改 v-前缀(在定义多个不同动画的时候，用来解决动画重复问题)
- 在 transition 包裹的时候给它一个 name
- css 控制的时候
  - 就可以把 v-enter 改为 my-enter （这个就可以同时定义多个不同的动画效果）
动画 3 使用第三方类
- animate 第三方类
- 引入
- 入场使用 bounceIn 离场使用 bounceOut （不固定去官网看效果喜欢那个用那个）
- enter-active-class=”bounceIn”
- leave-active-class=”bounceOut”
- 使用 :duration=”{ enter: 200, leave: 400 }” 来分别设置入场的时长和离场的时长
- 用法简单添加在 transition 里面就可以
动画 4 钩子函数
- 使用 transition 元素，把需要被动画控制滴元素，包裹起来
- 绑定钩子方法 @before-enter=”beforeEnter” @enter=”enter” @after-enter=”afterEnter”
- 在 methods 实现方法
  - beforeEnter: function(el){//动画钩子函数的第一个参数：el，表示要执行动画的那个 DOM 元素，是个原生的 JS DOM 对象}// 函数开始前
  - enter: function (el,done) {// done 其实就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用}// 函数执行动画
  - afterEnter: function(el){// 动画完成后}
动画 5 动画列表
- 在实现列表过度的时候，如果需要过渡元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup
- 如果要为 v-for 循环创建的元素设置动画，必须给每一个元素设置 :key 属性
- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果
- 通过为 transition-group 元素，设置 tag 属性(指定渲染的类型如：span 就会渲染成 span ul 就会渲染成 ul)，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签
组件 1
- 使用 Vue-extend 来创建全局的 Vue 组件
- // Vue.component 第一个参赛:组件的名称，将来引用组件的时候，就是一个标签形式来引入它的第二个参赛：Vue.extend 创建的组件，其中 template 就是组件将来展示的 html 内容
1
2
3
Vue.component('myCom1', Vue.extend({
template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的html结构
}));
- 如果要使用组件，直接，把组件的名称，以 html 的标签形式，引入到页面中，即可
- 如果使用 Vue.component 定义组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之间，使用 - 连接；
1
<my-com1></my-com1>

组件 2

在组件 1 的基础上改进 Vue.component 第二个参赛直接返回一个对象

Vue.component('mycom2', {
 // 注意:不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素
 template: '<div><h3>这是使用 Vue.extend 创建的组件</h3><span>123</span></div>' // 通过 template 属性，指定了组件要展示的html结构
});

组件 3

在被控制的 #app 外面，使用 template 元素，定义组件的 html 模板结构

<template id='tmp1'>
    <div>
        <h1>这是通过 template 元素，在外部定义的组件结构，有代码的智能提示</h1>
        <h4>好用 不错</h4>
    </div>
</template>

定义全局组件

1
2
3

Vue.component('mycom3', {
    template: '#tmp1'
});

定义私有化

components: { // 定义实例内部的私有组件
        login: {
            template: '#tmp1'
        }
    }

组件中的 data
- 组件可以有自己的 data 数据
- 组件的 data 和实例的 data 有点不一样，实例中的 data 可以为一个对象，但是组将中的 data 必须是一个方法
- 组件的 data 除了必须为一个方法，这个方法内部，还必须返回一个对象
- 组件中的 data 数据，使用方法，和实例中的 data 使用方法完全一样！！！
  1
  2
  3
  4
  5
  data: function () {
  return {
  msg: '这是组件中data的数据'
  }
  }
组件的切换 1
- @click v-if v-else 控制
组件切换 2
- 通过改变 comName 这个数值改变显示组件（data 中 comName 是 login 就会显示 login 的数据 register 就会显示 register 的数据）
组件切换 3
- 通过 mode 属性，设置组件切换时候的模式（用来给组件添加动画的时候给 css 动画知道,等待动画完成再执行另一个动画）

day4

父组件向子组件传值
- 父组件，可以在引用子组件的时候，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用
- 使用 props 把父组件传递过来的（parentmsg）在 v-bind:parentmsg=”msg” 自定义的一个名称 msg 是父级的数据属性，先在 props 数组中，定义一下，才能使用数据
- 组件中的所有 props 中的数据，都是通过父组件传递给子组件的
- props 中的数据都是只读的，无法更新赋值（其实是可以修改但是不符合规定会报错）
父组件向子组件传方法
- 父组件向子组件传递方法，使用的是事件绑定机制 v-on，当我们自定义了一个事件属性之后，那么，子组建就能够，通过某些方法，来调用传递过来的数据
  1
  <com2 @func="show"></com2>//func是自定义的名称 show 是父组件的方法
- 在子组件如何调用父组件方法使用 emit 触发，调用
  1
  this.$emit('func',this.sonmsg)//第一个是上面调用定义的方法名第二个参数开始是向父组件传参数，可以有多个
localStorage.getItem 和 localStorage.setItem 本地存储的获取和设置
- 一般 getItem 是配和 JSON.parse 使用转化为 json 数据
- setItem 是配合 JSON.stringfy 使用解析为本地存储格式
ref 获取 dom 元素和组件
- 在元素中添加 ref=”login” （login 是自定义的名称）
- 在父组件就可以用 this.$refs.login 获取到 dom 元素
- this.$refs.login.show() 可直接获取到方法（show()是 login 子组件内的方法）

router 页面路由

vue-router 是 vue 的路由第三方插件
创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有一个路由当架构函数，叫做 VueRouter
linkActiveClass: ‘myactive’ // 通过 linkActiveClass 来修改样式属性名在 vuerouter 内定义
redirect 重定向

    // 在 new 路由对象当时候，可以为 构造函数，传递一个配置对象
    var routerObj = new VueRouter({
    // route // 这个配置对象中的 route 表示[路由匹配规则]的意思
    routes: [ // 路由匹配规则
        // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须当属性：
        //   属性1 是 path，表示监听 那个路由链接地址
        //   属性2 上 component，表示，如果 路由是前面匹配到的 path, 展示 component 属性对应的那个组件
        // 注意： component 的属性值，必须是一个 组件的模版对象，不能是 组件的引用名称

        // 不推荐使用
        // {
        //     path:"/",
        //     component: login
        // },
        { // 这里的 redirect 和 node 中的 redirect 完全啥两码事
            path: '/',
            redirect: '/login'
        },
        {
            path: '/login',
            component: login
        },
        {
            path: '/register',
            component: register
        }
    ],
    linkActiveClass: 'myactive' // 通过linkActiveClass 来修改样式属性名
});

/* vue-router 提供的类名修改样式 */
/* .router-link-active {
    color: red;
    font-weight: 800;
    font-style: italic;
    font-size: 80px;
    text-decoration: underline;
    background-color: pink;
} */

/* 自定义类名修改样式 */
.myactive {
    color: red;
    font-weight: 800;
    font-style: italic;
    font-size: 80px;
    text-decoration: underline;
    background-color: pink;
}

.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translateX(140px);
}

.v-enter-active,
.v-leave-active {
    transition: all .5s ease;
}

vue-router 提供的元素，专门用来当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去
router-link 默认渲染为一个 a 标签
tag 指定渲染类型

<!-- router-link 默认渲染为一个 a标签 -->
<!-- msg 指定渲染类型 -->
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>

<!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去 -->
<!-- 所以：我们可以把 router-view 认为是一个占位符 -->
<!-- mode 定义过渡摸索 先out 再 in -->
<transition mode='out-in'>
    <router-view></router-view>
</transition>

路由规则中定义参数 $route
- 方法一 query
  - 如果在路由中，使用查询字符串则不需要修改路由规则对 path 属性（在 router-link 直接用?拼接）
    1
    <router-link to="/login?id=10&name=李白">登录</router-link>
  - 数据会存储在 $route 内的 query 的对象中如何获取呢因为是在子组件内部获取的本身就是自己 this 可写可不写
    1
    2
    3
    console.log(this.$route.query);
    this.$route.query.id // 可获取到内部自己设置的id
    this.$route.query.(设置的数据名)
- 方法二 params
  - 与方法一不同的是数据名不是在 url 设置是直接在路由设置，直接写数据就可以 /数据
    1
    <router-link to="/login/12/yhf">登录</router-link>
  - 设置了 url 再去设置路由判断在路由后面以/:元素名的形式添加
    1
    2
    3
    4
    routes: [{
    path: '/login/:id/:name',
    component: login
    }]
  - 数据还是会存在 $route 里面但是不是在 query 里面了而是在 $route 内的 params 里面获取的方法和 query 一样
    1
    2
    3
    console.log(this.$route.params);
    console.log(this.$route.params.id);
    console.log(this.$route.params.name);

路由中嵌套路由

在一个路由中我们会通过点击这个路由，展示路由中另一个路由的内容（只是更改路由处的数据不影响其他页面的显示）
设置路由

1
2

<router-link to="/login">登录</router-link>// 为继承account路由 所有在数据查找的时候会在根目录查找 （也是因为后面路由的设置而判断 后面的路由继承了account 路由就不可以这样  继承的事根路由就要这样用）
<router-link to="/account/register">注册</router-link> // 继承在account下的路由

设置路由

routes: [{
        path: '/account',// 设置主路由
        component: account,// 路由展示的组件

        children: [// 设置嵌套的 子路由
            // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
            //这样就是设置了根为查找目录
            {
                path: '/login',
                component: login
            },
            // 这个就是嵌套了子路有 不需要添加 /
            {
                path: 'register',
                component: register
            }
        ]
    }
]

命名视图

在同一个页面展示多个视图在路由判断中就会被主路由覆盖
在路由判断中路由地址 component 不止可以存放一个地址

在存放多个地址的时候把 components 加个 s 接收对象就可以存放多个地址

routes: [{
    path: '/',
    components: { // 路由地址
        'default': header,// 设置多地址的时候 前面'' 号中填写的是这个路由的属性名（自定义） 后面的是路由地址
        'left': leftBox,
        'main': mainBox
    }
}]

如何使用多路由视图呢

1
2
3

<router-view></router-view>// 主路由可不用写属性名
<router-view name="left"></router-view>// 但是子路由就必须写属性名 name
<router-view name="main"></router-view>

day5

watch 监听 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数

watch: { // 使用这个 属性，可以监听 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
    // firstname 是data中定义的  在function的函数操作中会有两个默认的值
    // newVal 是接收到监听
    'firstname': function (newVal, oldVal) {
        // this.fullname = this.firstname+'-'+this.lastname
        console.log(newVal+'----'+oldVal);
        this.fullname = newVal
    },
    'lastname': function (newVal) {
        this.fullname = this.firstname + '-' + newVal
    }
}

watch 监听路由地址的变化

watch: {
    // $route.path 监听路由路径
    '$route.path': function (newVal, oldVal) {
        // console.log(newVal + '-' + oldVal);
        if (newVal === '/login') {
            console.log('登陆');
        } else {
            console.log('注册');
        }
    }
}

computed 可以定义一些属性，这些属性，叫做【计算属性】，计算属性的，本质，就是一个方法，只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当作属性来使用的；并不会把计算属性，当作方法去调用；

computed: {
    // 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；
    // 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值
    // 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；
    'fullname': function () {
        console.log('ok');
        return this.firstname + '-' + this.middlename + '-' + this.lastname;
    }
}

webpack 使用
项目地址
 项目插件安装使用

不忘初心，方得始终

Vue 重点

day1

day2

day3

day4

day5