2018-05-19 zn社 笔记三

一、过渡（动画）

引入 vue.js
bower-> （前端）包管理器
npm install bower -g
验证: bower --version
bower install <包名> 安装
bower uninstall <包名> 卸载
bower info <包名> 查看相关的包版本信息
<script src="bower_components/vue/dist/vue.js"></script>

• 动画
  本质是css3: transtion ,animation
  <div id="div1" v-show="bSign" transition="fade"></div>

动画:

        .fade-transition{
        }

进入：

        .fade-enter{
            opacity: 0;
        }

离开：

        .fade-leave{
            opacity: 0;
            transform: translateX(200px);
        }

animate.css 做动画

二、组件

1. vue组件：一个大对象

• 全局组件

 var Aaa=Vue.extend({
        template:'<h3 @click="change">{{msg}}</h3>',
        data:function () {
            return{
                msg:'111',
            }
          },
          methods:{
            change(){
                this.msg = 'aaa'

            }
          }
        });
        Vue.component('aaa',Aaa);
        var vm = new Vue({
            el:'#box',
        });

*组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json)

• 局部组件
  可以放到某个组件内部

var vm=new Vue({
    el:'#box',
    data:{
        bSign:true
    },
    components:{ //局部组件
        aaa:Aaa
    }
});

另一种编写方式:
全局

    Vue.component('my-aaa',{
        template:'<strong>好</strong>'
    });

局部

    var vm=new Vue({
        el:'#box',
        components:{
            'my-aaa':{
                template:'<h2>标题2</h2>'
            }
        }
    });

2. 配合模板:
   1. template:'<h2 @click="change">标题2->{{msg}}</h2>'
   2. 单独放到某个地方

<script type="x-template" id="aaa">
            <h2 @click="change">标题2->{{msg}}</h2>
        </script>

<template id="aaa">
            <h1>标题1</h1>
            <ul>
                <li v-for="val in arr">
                    {{val}}
                </li>
            </ul>
        </template>

3. 动态组件:
   <component :is="组件名称"></component>
4. vue-devtools -> 调试工具
   https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

vue默认情况下，子组件也没法访问父组件数据

5. 组件数据传递: √

---

1. 子组件就想获取父组件data
   在调用子组件：
   <bbb :m="数据"> </bbb>
   子组件之内:

        第一种：props:['m','myMsg']
        第二种：props:{
            'm':String,
            'myMsg':Number
        }

在html中属性有-的话，在js中要变成驼峰的形式，例如my-msg->myMsg

2. 父级获取子级数据
   *子组件把自己的数据，发送到父级
   vm.$emit(事件名,数据);
   v-on: @

• vm.$dispatch(事件名,数据) 子级向父级发送数据

• vm.$broadcast(事件名,数据) 父级向子级广播数据
  配合: event:{}

  在vue2.0里面已经，报废了

---

slot:
位置、槽口
作用: 占个位置(自定义组件中还有内容可以用这个
<ul slot="name">
template中：<slot name="name">
类似ng里面 transclude （指令）

---

三、SPA应用（单页面应用）

1. vue-resouce 交互
   vue-router 路由
   根据不同url地址，出现不同效果
   目前版本：0.7.13

主页  home
新闻页 news
html:
    <a v-link="{path:'/home'}">主页</a>   跳转链接
    展示内容:
    <router-view></router-view>
js:
    //1. 准备一个根组件
    var App=Vue.extend();
    //2. Home News组件都准备
    var Home=Vue.extend({
        template:'<h3>我是主页</h3>'
    });
    var News=Vue.extend({
        template:'<h3>我是新闻</h3>'
    });
    //3. 准备路由
    var router=new VueRouter();
    //4. 关联
    router.map({
        'home':{
            component:Home
        },
        'news':{
            component:News
        }
    });
    //5. 启动路由
    router.start(App,'#box');

• 跳转:（访问某页打开直接跳转，不需要点击）

    router.redirect({
        ‘/’:'/home'
    });

2. 路由嵌套(多层路由):
   主页 home
   登录 home/login
   注册 home/reg
   新闻页 news

    subRoutes:{
        'login':{
            component:{
                template:'<strong>我是登录信息</strong>'
            }
        },
        'reg':{
            component:{
                template:'<strong>我是注册信息</strong>'
            }
        }
    }

3. 路由其他信息:
   /detail/:id/age/:age
   {{$route.params | json}} -> 当前参数
   {{$route.path}} -> 当前路径
   {{$route.query | json}} -> 获取'?a=1'这种数据
4. vue-loader:（无需刷新）
   其他loader -> css-loader、url-loader、html-loader.....
   后台: nodeJs -> require exports

• broserify 模块加载，只能加载js
• webpack 模块加载器，一切东西都是模块, 最后打包到一块了。

require('style.css'); -> css-loader、style-loader
vue-loader基于webpack
.css .js .html .php 这些文件
a.vue / b.vue
.vue文件：放置的是vue组件代码

        <template>
            html
        </template>
        <style>
            css
        </style>
        <script>
            js  （平时代码、ES6）  babel-loader
        </script>

简单的目录结构:

|-index.html
|-main.js   入口文件
|-App.vue   vue文件，官方推荐命名法
|-package.json  工程文件(项目依赖、名称、配置)
    npm init --yes 生成
|-webpack.config.js webpack配置文件

ES6: 模块化开发
导出模块：
export default {}
引入模块:
import 模块名 from 地址

5. webpak准备工作:
   cnpm install webpack --save-dev
   cnpm install webpack-dev-server --save-dev

   App.vue -> 变成正常代码 vue-loader@8.5.4

    cnpm install vue-loader@8.5.4 --save-dev  下载vueloader
    cnpm install vue-html-loader --save-dev 
    vue-html-loader、css-loader、vue-style-loader 将vue解析成html/css
    vue-hot-reload-api@1.3.2 验证代码有没有错误

es6语法：bable相关模块需要去下载

    babel-loader
    babel-core
    babel-plugin-transform-runtime
    babel-preset-es2015
    babel-runtime

最最核心：