MyVueNote

2018.10.15 周一 day01

2018.10.15 星期一

1.vue安装

1）node8
2) cnpm 淘宝代理

>cnpm install xxx@x

3)vue-cli@2.9.6

npm install vue-cli --global

2.vue的第一个项目(重点)

1. 下载vue基础项目模板(不包含依赖)

   vue init webpack app01

2. 安装依赖

   cd app01
   npm install

3. 启动服务(webpack-server)

   npm run dev
   构建项目工程（转换-打包）
   部署

4. 访问
   http://localhost:8080
5. 交付(打包)

   npm run build

生成以下目录文件：
   dist
     index.html
     static
        css
        img
        js
        font

3. vue核心技术点

1. vue 的特点
   1）可以以模块化方式构建工程，具有完备的工具。
   2）mvvm模式使得程序员从dom操作中脱离出来。（纯前端思想）
   m module 数据模型
   v view 视图
   vm view module 控制器（框架本身提供），视图与数据的绑定

   mvc模式化 (JSP) 全栈思想
   m module 数据模型 Java Pojo
   v view 视图 JSP (servlet) 动态地在服务器端产生
   c constroller 需要手动编程

2. 名称

1. vue-Router vue核心下的一个重要插件，实现虚拟路由的功能（页面局部刷新）
2. es-lint 代码格式约束
3. unit tests 单元测试

3.介绍

目录：
src
node_module
index.html
package.json

 .vue文件 --- vue模块（html+css+js）

//模板

  <template>
        html代码，直接子元素只能有一个
  </template>

//脚本

  <script>
        es6代码 模块化
        //导入模块
        export default{} 
  </script>

//存放css代码

 <style>
    css代码
 </style>

Vue-loader
vue转换器 .vue -> js

4. vue对象实例化

new Vue({
el:’’,
data(){
return{
}
},
components:{
//注册，调用其他模块
}
})
el 表示vue实例绑定到哪个dom中，只能在使用new关键字创建实例的时候使用。
data 表示vue中绑定的数据，在子模块中必须通过函数返回一个对象，这样避免变量共享。
commponents 表示组件注册，组件的应用包含以下四个步骤：

    1）定义 Bind.vue文件，表示一个组件

      //模板
          <template>
            <div class="bind">
              <h1>{{a}}</h1>
            </div>
          </template>
      //脚本
          <script>
            export default {
              name:'bind',
              data(){
                return {
                  a:'hello bind',
                  b:['terry','larry'],
                  c:true
                }
              }
            }
          </script>
      //样式表
          <style>
            //...
          </style>

    2）引用，在App.vue的script脚本中：

        import Bind from './components/Bind'

    3）注册，在App.vue的script脚本中：

            export default {
              name: 'App',
              components: {
                HelloWorld,
                Bind
              }
            }

    4）应用，在App.vue的template模板中

        <Bind/>  //组件名作为标签名直接应用

methods 表示事件处理函数   

5. 单个值绑定

1）先在data中定义值
  data(){
    return {
       mas:'hello vue'
    }
  }

2）通过双大括号绑定值
 <div> {{msg}} </div>

6. 循环绑定

v-for='item in arr'

 <ul>
  <li v-for='b in bs'>{{b.name}}</li>
 </ul>

7. 条件绑定

   v-if=’’
   v-else

登录

欢迎您，{{user.name}}

8. 双向数据绑定(表单中)

   data:{
   a:‘hello’
   }

<input type="text" v-module='a'>

9. 事件绑定

   1）将事件处理函数定义在methods属性中

   methods:{
   foo(){
   console.log(‘foo’,this);
   alert(‘hello’);
   }
   }
   2）绑定

<h1 v-on:click='foo'>{{a}}</h1>

---

2018.10.16 周二 day02

2016.10.16 星期二

vue 开发

复习：

1）环境搭建

node8
npm
vue-cli@2.9.6

2）vue工程
1.创建
> vue init webpack app01
2.安装依赖
> cd app01
> npm install
3.构建-测试
> npm run dev
或
> npm run start
4.打包
> npm run build

3）vue工程项目结构
app01
build webpack配置文件
config 当前项目的配置文件
dist 打包后的目标目录
node_modules 第三方模块存储目录
src 源码目录
static
index.html 首页
package.json node的核心文件
.babelrc babel配置文件
.gitignore 定义了不受git管理的文件：dist,node_modules

4）技术点

1. vue实例(每个.vue文件中都有一个vue实例)

  vue中的methods中的函数、生命周期钩子函数中的this都指向当前vue实例。
  vue实例可以直接访问data中定义的变量和methods中定义的函数。

    var v = new Vue({
       data:{
         a:1,
         b:2
       },
       methods:{
         ...
       },
       components:{},
       //生命周期钩子函数
       beforeMount(){
         //查询数据
         $.get('',()=>{})
       },
       mounted(){

       }
    })

     export default {
          data(){
            return {

            }
         }
      }


2. vue文件

  一个vue文件包含三部分：
  
  1）模板  html  template
       <template>
          <div>

          </div>
       </template>
  2）脚本  js    script
        <script>
           ...
           export default{
              data(){},
           }
        </script>
  3）样式  css   style

3. 简单的数值绑定

   data:{
      a:'hello'
   }
   mounted(){
      setTimeout(()=>{
          this.a = 'world';
      },1000);
   }
   <div>{{a}}</div>

4. 循环绑定（渲染）

    data:{
       users:[{
          id:1,
          name:'terry'
       },{
           id:2,
           name:'larry'
       }]
    }   

    <ul>
      <li v-for='user in users'>
          {{user.id}}
          {{user.name}}
      </li>
    </ul>

5. 条件绑定（渲染）

     <div v-if='user'>
        {{user.name}}
     </div>
     <div>
        登录
     </div>

6. 双向数据绑定（定义在表单上）

   data:{
      a:'hello'
   }
   <input type="text" v-model='a'>

7. 事件绑定

  <h1 v-on:click='foo'>{{a}}</h1> 

---

1.生命周期

1）准备数据
beforeCreate
created
2）准备模板
beforeMount
3）初次渲染
mounted
4）监听data的改变，随时准备重新渲染（循环）
beforeUpdate
updated
5）销毁
beforDestroy
destroyed

2.绑定html

<div v-html='msg'></div>
data(){
   return {
      msg:'<h2>hello world</h2>'
   }
}

3.绑定属性

<div v-bind:title='msg'>111</div>

4.绑定事件处理函数

<h1 v-on:click='handler'></h1>    

5.双大括号中的表达式

data:{
    user:{
      id:1,
      name:'larry',
      gender:1
    }
  }

  {{ user.gender=='male'?'男':'女' }}
  {{ user.id+1 }}

6.简写

属性绑定（':'）  
    <div v-bind:title='msg'>111</div>
    =>
    <div :title='msg'>111</div>
  事件绑定（'@'）   
    <h1 v-on:click='foo'>{{a}}</h1> 
    =>  
    <h1 @click='foo'>{{a}}</h1>   

7. 计算属性

   {{reverseMsg}} //使用的时候当做属性来用

     {
       data(){
          return {
             msg
          }
       },
       computed:{
         reserveMsg(){  //定义的时候使用是方法
             return
         }
       } 
     }
   

   与方法的区别：
   1）计算属性在使用的时候当做属性来用，而方法必须加()才能被调用
   2）计算属性多次调用，如果值没有改变，多次调用只会调用一次函数，而方法每次调用都会执行一次函数。

8. 侦听器

   export default {
   data(){
   return {
   a:1,
   b:{
   a:1,
   b:2
   }
   }
   },
   watch:{
   //1）监听基本类型的值
   b:function(now,old){
   console.log(‘a值的改变:’,now,old);
   },
   //2）监听对象
   b:{
   handler:function(now,old){
   },
   //深度
   deep:true
   }
   }
   }

9. class与style绑定

   {{msg}}
   {{msg==1?’’:’’}}
   v-bind
   v-on
   v-html

      data:{
         dyClass:'one',
         one:true,
         first:false,
         activeClass:'active',
         errorClass:'text-danger'
      }
   

9.1 class的绑定

 1）绑定的值为字符串
      <div :class='dyClass'></div>
      =>
      <div class='one'></div>

 2）绑定的值为对象
      <div :class='{one,first}'></div>
      =>
      <div class='one'></div>

 3）绑定的值为数组
      <div :class='[acyiveClass,errorClass]'></div>
      =>
      <div class='active,text-danger'></div>

9.2 style的绑定

 1）绑定的值为字符串
    

 2）绑定的值为对象
     data:{
        one : {
          color:orange;
          font-size:16px;
        },
        two : {
          background-color:#ededed;
          border:1px solid #ccc;
        }
    }
    <div :style='one'></div>

 3）绑定的值为数组
     <div :style='[one,two]'></div>

---

2018.10.17 周三 day03

2018.10.17 星期三

1.条件渲染

...

//动态移除对应的属性，为了提升效率，有时候可能不是完全的卸载。 //为了使dom完全卸载，可以为每个dom添加key

//动态改变display属性

---

2018.10.18 星期四

事件处理

1)绑定事件处理函数

添加
methods:{
foo(id){
alert(n);
}
}

'v-on:事件类型 ’ => ‘@事件类型’
v-on:click=‘函数名’ => @click=‘函数名()’

2)属性值可以为js代码

@click=‘flag=!flag;num++’

3)传递原始事件对象（尽可能不用）

@click=‘foo($event)’

4)事件修饰符

事件对象相关
.stop
.prevent
.passive
.capture
.once
.self

按键修饰符（keycode/别名）
@keyup.13 //13表示enter键
.enter
.tab
.delete（捕获“删除”和“退格”键）
.esc
.space
.up
.down
.left
.right

系统修饰符
.ctrl
.alt
.shfit
.meta

鼠标按钮修饰符
.left
.right
.middle
@mousedown.left

表单输入绑定

data{
user:{
name:’’
}
}

1）单行文本框

2）多行文本框

以后用富文本编辑器替换

3）单个复选框
可以绑定到一个boolean变量
4）多个复选框
共同绑定到一个数组，每个复选框都应该有value值，用于区分不同的复选框。

v-model修饰符
  .number     
  .trim

---

2018.10.19 星期五

组件基础

1)定义全局组件

 Vue.component(组件名称,参数对象)

例如：
Vue.component(‘my-info’,{
template:<div @click='foo' style='border:1px solid orange;padding:.5em;color:orange;border-radius:3px'> {{info}} </div>,
data(){
return{
info:“警告！”
}
}，
methods:{
foo(){
alert(this.info);
}
}
});

 引用：<my-info></my-info>

2)局部注册

 //data一定要是个方法

   var myInfo = {
      template:``,
      data(){
         return {}
      },
      methods:{},
      //子组件
      components:{"my-alert":myAlert}
   }

   var userCommonent = {
        template:`
           <div>
              <my-info></my-info>
           </div>
        `,
        data(){},
        methods:{},
        //子组件
        components:{"my-info":myInfo}
   }
   
   new Vue({
      el:'',
      //子组件
      components:{
          "user-component":userComponent
      }
   });

3)父组件向子组件传递数据

  在子组件中的props属性中定义期望父组件传递给子组件的属性

   1.props的取值为数组

      props:["color":"msg"]

   2.props的取值为对象，属性名为期望接收的属性，值为数据类型。

      props:{
         msg:String,
         color:String,
         num:Number
      },

   3.如果想要为子组件传递number类型，boolean类型，Array类型，Object类型的值，name需要动态传值（v-binf:num 或 :num），默认静态传值传的是String类型，即使直接传递数组或布尔类型，也会被默认转换为Sring类型。

      <my-info :num=1></my-info>

      let myInfo = {
          props:["num"]
      }

      num接收到Number类型1

   4.为子组件一次性传递多个值

      <my-info v-bind="prop"></my-info>
      data:{
         prop:{
            msg:'two',
            color:'teal',
            num:2
         }
      }

      等价于

      <my-info :msg='two' color="teal" :num="2"></my-info>

   5.props传值是单向数据流，也就是说子组件的值随着父组件的改变而改变，反之则不行。即子组件不能改变props中的值。

   6.子组件有时候可能不希望直接应用父组件通过props传递过来的值。

    <my-info></my-info>

    let myInfo = {
        template:``,
        //父组件没有传递num，如果直接使用num，可能会出现问题，但是子组件又不能直接改变num的值，此时可以通过计算属性，重新计算出一个值来。
        props:["num"],
        computed:{
          number:function(){
              return this.num?this.num:1
          }
        }
    }

    7.自定义组件

    子组件触发的时候要通知父组件。

    //子组件
      var myBtn = {
          template:`
             <button @click='foo'>{{btnName}}</button>//绑定事件
          `,
          computed:{
             btnName(){
                return this.name?this.name:"按钮"
             }
          },
          methods:{
             foo(){
             //子组件向父组件发射事件
             this.$emit('bar');
             }
          }
      }

    //父组件
      <my-btn v-on:bar='handle'></my-btn>//监听事件
      new Vue({
         data:{
            num:0
         },
         methods:{
            handle(){
                this.num++;
            }
         }
      });

    8.插槽

      当调用子组件的时候，在模板中可以通过标签来调用。
      如果向标签内部添加内容，子组件默认不接收。
      如果想要让标签内的内容显示在子组件中，子组件需要提供一个slot标签来接收父组件传递过来的内容。

      1)默认插槽

           var myInfo = {
              template:`
                 <div style="border:1px solid orange;padding:.2em .5em;margin:.5em;border-radius:3px;color:orange">
                    <slot></slot>
                 </div>
              `
           }

           <my-info>
              //ul的内容会被替换到myInfo的slot中 
              <ul>
                 <li>one</li>
                 <li>two</li>
                 <li>three</li>
              </ul>
           </my-info>

      2)具名插槽（用于多个插槽）

          var myInfo = {
             template:'
                <div>
                   <slot name='top'></slot>  
                   <slot name='bottom'></slot>  
                </div>  
             '
          }

          <my-info>
              <!-- ul的内容会被替换到myInfo的slot中 -->
              <ul slot='bottom'>
                 <li>one</li>
                 <li>two</li>
                 <li>three</li>
              </ul>
              <h2 slot='top'>hello slot</h2>
           </my-info>

---

2018.10.22 星期一

作用域插槽
插件
VueRouter 路由
Vuex 数据状态维护
ElementUI
Bootstrap/myModal/myInfo

---

本周作业
使用 vue+bs3+jquery+fontawesome+lodash完成看点资讯

代码规范
src
components
MyModal.vue
pages
Category.vue
增
表单验证（正则表达式）
删
先询问再删除
改
修改与添加的模态框为同一个
查
列表 （bs table）
Article.vue
User.vue
App.vue
分别引入pages中的页面
main.js
全局组件注册

---

2018.10.18 周四 day04

2018.10.19 周五 day05

2018.10.22 周一 day06

2018.10.22 星期一

父组件模板的所有东西都会在父级作用域内编译。
子组件模板的所有东西都会在子组件作用域内编译。

每个组件只能访问每个组件的作用域

vue

1.自定义组件

let myList = {
   template:`
      <button @click='foo'>
           <slot name='one'></slot>
      </button>
   `,
   data(){
      return{

      }
   },
   props:['data'],
   components:{},
   methods:{
      foo(){
         this.$emit('bar');
      }
   },
   watch:{

   },
   computed:{

   }
}

2.注册

Vue.component(‘my-list’,myList);

3.引用

<my-list :data=‘data’ @bar=‘bar’>
btn

---

2018.10.23 星期二

1.作用域插槽

2.element-ui应用

1）安装
npm install element-ui --save
2）在main.js中引入
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);
3）在所有的vue文件中可以直接应用

3.axios（ajax封装库）

1）原生ajax

1. http协议（B/S架构）
 ----------------------
     浏览器与服务器的交互

     http://120.78.164.247:8099/manager/user/findAllUser

     var user = {
         name:'terry',
         gender:'male'
     }

     对象不能封装进请求报文中。所以需要序列化。

序列化：将对象转换为具有特殊格式的字符串
  1）表单格式，即查询字符串
       key=val&key=val
  2）json
       '{"name":"terry","gender":"male"}' 
  3）二进制格式
        文件上传         

请求方（浏览器）
   请求报文
       请求行
          GET /manager/user/findAllUser
       请求头
          HOST   http://120.78.164.247:8099
          Accept   text/html;application/json
          Content-Type  application/x-www-form-urlencoded  (表单格式)规定请求体里的数据格式。post请求时一定要设置。
          ...
          user agent
       请求体
          name=terry&gender=male  (表单格式)
响应方（服务器）
   响应报文 
       响应行（状态行）         
           200  ok
       响应头
           Content-Type   application/json              
           Content-Length 199kb 
           ...
       响应体
           '[{},{}]'   (json格式)    


XMLHttpRequest（可扩展超文本传输请求，是浏览器提供的，用于在后台与服务器交换数据，ajax API）如果是get请求，不用做第3,4步。
1）创建一个xhr对象
      let xhr = new XMLHttpRequest();
2）打开一个链接
      xhr.open(method,url);

• 3）设置请求头信息
  xhr.setRequestHeader(‘Content-Type’,‘application/json’);

• 4）发送请求
  xhr.send(data);
  //data的类型取决于我们设置的Content-Type，如果Content-Type为json，data一定要序列化为json字符串。如果Content-Type为json为x-www-form-urlencoded，data一定序列化为查询字符串。
  5）监听响应
  xhr.onreadystatechange = function(){
  //就绪状态 1~4
  if(this.readyState == 4){
  //状态码 200
  if(this.status == 200){

          }
      }
   }
  

  状态码：
  200 请求成功
  404 请求失败，找不到请求资源
  500 请求失败，后台代码异常
  403 请求失败，没有权限

2.请求类型
-----------------------
    同步请求
       在浏览器地址栏中输入一个地址，点击回车
       特点：造成页面全部刷新。请求数据会直接显示到浏览器页面上
    异步请求
       ajax发送一个请求
       特点：局部刷新页面。请求数据无法直接显示到浏览器页面上，而是要通过js获取。

    ids:[1,2,3]
    查询字符串

    ids[]=1&ids[]=2&ids[]=3
    id[0]=1&id[1]=2&id[2]=3  struts2
    ids=1&ids=2&ids=3   springmvc

    options=[{title:'one,code:1'},{title:'two',code:2}]  

    options[0].title=one
    options[0].code=1
    options[1].title=two
    options[1].code=2

2）jQuery ajax （只能运行在浏览器下）
特点：
ajax仅属于jQuery中的一部分；
回调函数机制；
依赖XMLHttpRequest，所以只能运行在浏览器中；
自动将data数据转换为查询字符串；

  $.ajax({
     url:'',  //请求地址
     method:'',  //请求方式：get/post
     data:'',  //提交数据。post请求时设置。
      //如果data为对象，该对象在发送到服务器之前会先被自动转换为查询字符串（由于contentType默认为x-www-form-urlencoded）。可以通过processData选项来阻止这样的默认转换行为。
     dataType:'',  //期望接收的数据类型
     async:true,   //异步
     contentType:'application/x-www-form-urlencoded',
         application/x-www-form-urlencoded
             查询字符串 key=val&k2=v2，如果value中有特殊字符，使用十六进制表示，比如空格、中文。
         multipart/form-data
             二进制
         text/plain
             普通字符串
         ============
         application/json。在发送post请求之前会先发送一个options请求。
     beforeSend:function(){},  //在调用send方法之前
     success:function(){}, //成功
     error:function(){},  //失败
     complete:function(){}  //完成                
  });

1. 有如下数据，以json格式发送到服务器端
  var user = {
     name:'terry',
     gender:'male'
  }

  $.ajax({
    url:'',
    method:'post',  // 发送一个对象
    data:JSON.stringify(user),
    contentType:'application/json?charset=UTF-8',
    processData:false
  })

2. 有如下数据，以查询字符串格式发送到服务器端
  var user = {
     name:'terry',
     gender:'male'
  }

  $.ajax({
    url:'',
    method:'post',
    data:user
  })


  $.ajaxSetup({})
  $.ajax({})
  $.get()
  $.getJSON()
  $.post()

  GET / POST / DELETE / PUT (REST架构)
  GET   查询
  POST  添加
  DELETE  删除
  PUT   修改

3.异步文件上传
  post
  connectType:'multipart/form-data',
  processData:false,
  ...  

3）axios (可直接在node环境下执行。)
特点：
纯粹的ajax库；
应用了promise机制；
可直接在node环境下执行，也可以运行在浏览器下；
自动将data数据转换为JSON

1.底层API

 $.ajax({
   baseURL:'http://120.78.164.247:9999',  //基地址
   url:'/user/findAll',   //请求地址
   method:'get',
   data:{},  //适用于post传参
   params:{},  //适用于get传参
   headers:{s
      'Content-Type':'application/json'
   },
   responseType:'json', //类似于jquery
   // 在执行send之前，用于修改data/headers
   transformRequest:[function(data,headers){
       return qs.stringify(data);
   }],
   // 在执行send之前，用于修改params
   paramsSerializer:function(params){
       return qs.stringify(params);
   },
   //在获取到响应信息，在then/catch执行，用于修改响应信息
   transformResponse:[function(data){ }]
   xsrfCookieName
   xsrfHeaderName
 });


 1）通过id删除一个用户信息，get方式传递id
    axios({
       url:'',  //可拼接在URL后
       methods:'get',
       params:{
          id:1
       },
       //将对象转换为查询字符串
       paramsSerializer:function(params){
           return qs.stringify(params);
       }
    })

 2）保存用户信息，data格式为json
    axios({
       url:'',
       method:'post',
       data:user
    })   
 
 3）保存用户信息，data格式为查询字符串
     axios({
        url:'',
        method:'post',
        data:user,
        headers:{
           'Content-Type':'application/x-www-form-urlencoded'
        },
        transformRequest:[function(data,headers){
            return qs.stringify(data);
        }]
     });

现有如下格式的数据：
{
name:‘js’,
options:[{
id:1,
name:‘String’
},{
id:2,
name:‘Number’
}]
}

一般情况下springboot后台要的数据格式：
name=js&options[0].id=1&options[0].name=String

2.快捷API
axios.get(url[,config])
axios.post(url[,data][,config])

3.封装
如何全局设定baseURL
axios({
headers:{
post:{
Content-Type
}
}
})

  axios.defaults.baseURL=''
  axios.defaults.headers.post['Content-Type']=''

  axios.get()
  axios.post()   

4.拦截器

  axios.interceptors.request.use((config)=>{
    config.method
    config.data
    config.params
  });

---

2018.10.24 星期三

1.ajax

1）http协议

  请求报文
     请求行
         GET /index.html
     请求头
         Accept:text/html;text/css;/application/json
         Content-Type:'application/json'
     请求体
         '{"id":100}'
  响应报文
     响应行（状态行）
         200  success
     响应头
         Content-Type:'text/html;charset=utf-8'
     响应体
        <html></html>

  前后台数据对接常见数据格式：
     application/x-www-form-urlencoded
     application/json
     multipleSelection
     text/html
     text/css
     ...

2）原生ajax（async javascript and xml）
异步的JavaScript和XML
let xhr = new XMLHttpRequest(); //ajax api

  xhr.open();

  xhr.setRequestHeader();

  xhr.send();

  xhr.onreadystatechange = function(){
      if(this.readyState == 4){
         if(this.status == 200){
              this.response

              JSON.parse('');
         }
      }
  }

[{"id":1001,"name":'terry'},{"id":1002,"name":"larry"}]

<list>
  <category>
    <id>1001</id>
    <name>terry</name>
  </category>
  <category>
    <id>1002</id>
    <name>larry</name>
  </category>
</list>

3）jQuery

 $.ajax({
    url:'';
    method:'',
    data:{},
    processData:true,  //默认处理data->qs
    contentType:'application/x-www-form-urlencoded'

    async:true,
    cache:true,
    json:
    jsop:

    beforeSend(){},
    success(){},
    error(){},
    complete(){}
 });

全局参数设定
$.ajaxSetup({
   error(){}
});
$.get(url[,params][,success][,dataType]);
$.post(url[,params][,success][,dataType]);

{ids:[9,8,7]}
ids[0]=9&ids[1]=8&ids[2]=9

跨域：

跨域在异步请求的时候常见。交给后台解决。

4）axios

---

2018.10.25 星期四

vueRouter (基于vue的机制)

1. 核心
   路由表定义
   路由地址切换
   组件显示

路由地址–模块

2.应用
1）安装
> npm install vue-router --save
2）配置
创建路由表

src/router/index.js
          import Vue from 'vue'
          import VueRouter from 'vue-router'
          import HelloWorld from '@/pages/HelloWorld'
          Vue.use(Router)

          export default new VueRouter({
              rotues:[{
                  path:'/',
                  component:HelloWorld
              },{

              }]
          });

在main.js将路由表注册到跟vue实例
  import router from '@/router'
  new Vue({
    el:'',
    router,
  })

应用
  改变路由地址
     http://localhost:8080/index.html#/category

     <router-link to="/article"></router-link>

  组件渲染位置  
     <router-view></router-view>

3.动态路由匹配

   new VueRouter({
       routes:[{
          path:'/article/:id',
          component:Article
       }]
   })

/article/1 id为1的用户界面
/article/2 id为2的用户界面
…
/article/300 id为2的用户界面

this.$route.params

http://39.108.81.60:80/#/article/23
http://39.108.81.60:80/#/article/29

http://39.108.81.60:80

如果改变动态路由中的参数，组件不会重新加载，
也就是说很多生命周期钩子函数只会执行一次，例如，mounted.
要想监控这种改变，可以通过watch来监听$route

4.嵌套路由

  new VueRouter({
       routes:[{
          path:'/category',
          conponent:'Category',
          children:[{
             path:'check',
             component:'CategoryCheck',
          }]   
       }]
   })

---

2018.10.26 星期五

技术栈
vue + VueRouter + Vuex(中大型项目)
插件
element-ui
axios
qs
lodash
font-awesome
animate.css

VueRouter

1.作用
vue路由机制（虚拟路由）
后台（路由地址 -> 方法（数据库操作））

前台（路由地址 -> 组件（页面局部更新））

2.应用
1）安装
> npm install vur-router --save
2）配置

   1.路由表
       src/router/index.js
       import Vue from 'vue'
       import Router from 'vue-router'   
       ...
       Vue.use(Router)
  export default new Router({
      routes: [
        {
          path: '/',
          component: HelloWorld
        },{
          path: '/category',
          component: Category
        }]
    })

  2.集成vue


  3.应用
    http://localhost:8080/#/
    http://localhost:8080/#/category

    <router-view></router-view>

  4.路由改变方式
    1）直接修改浏览器地址栏 （程序员测试）
    2）<router-link to='/category'></router-link>
    3）<button @click='$router.push("/category")>category</button>
    4）导航？
       1.自己编写导航代码
       2.组件库
       <el-button></el-button>
       <el-submenu>
          <el-menu-item></el-menu-item>
          <el-menu-item></el-menu-item>
       </el-submenu>
       <el-menu> 
          <el-menu-item></el-menu-item>
          <el-menu-item></el-menu-item>
          <el-menu-item></el-menu-item>
       </el-menu>

3.动态路由

   new Router({
      routes:[{
         path:'/article/:id'
         component:Article
      }]
    })
/article/1     
/article/2
...     
/article/1000

如何在article中获取id？
  1） $route
     this.$route.params     
     this.$route.path

  2）通过props获取参数
     new Router({
      routes:[{
         path:'/article/:id'
         component:Article，
         props:true
      }]
    })
   
   <router-link :to='{path:"/article/1"}'></router-link>
   <router-link to="/article/1"></router-link>

4.嵌套路由

new Router({
     rotues:[{
        path:'/exam',
        component:Exam,
        children:[{
           path:'create'
        }]
     }]
  })

5.命名视图

path:’/person’

6.命名路由

7.重定向

属性：
path
component
name
props
children
components
redirect

8.HTML History模式

---

2018.10.29 星期一

1）文章管理

---

构建项目app03

1. vue init webpack app03

2. cd app03

3. cnpm install（安装依赖）

4. cnpm install element-ui --save （安装element-ui插件）

5. npm run dev

6. 访问http://localhost:8080/

7. 在sublime中，file->open file->app03

8. 在main.js中引入element-ui插件：
   import ElementUI from ‘element-ui’;
   import ‘element-ui/lib/theme-chalk/index.css’;
   Vue.use(ElementUI);

9. 在App.vue中编写自己的代码：、

---

构建项目mycms
1）在src新建文件夹pages
2）在pages新建文件Category.vue,Article.vue,User.vue
3）在router的index.js中设置路由表
4）首页布局，添加样式
5）提供左侧导航
6）编写User.vue文件，安装element-ui、axios插件。
7）在main.js注册、导入element-ui

8）新建Exam.vue
9）注册路由
10）在APP.vue添加对应的router-link to=’/exam’

---

将本地项目上传至github步骤：

登录github，点击右上角“+”号，选择“New repository”，填写仓库名称（自命名），其他默认，Create Repository。
打开项目所在目录，在搜索栏键入"cmd"进入命令行窗口

1. git init
2. git add *
3. git status
4. git commit -m “this is the first time to commit”
   <–
   5. git config --global user.email “xxxxxxxxx@qq.com”
   6. git config --global user.name “xxxxxxx”
      –>
5. git remote add origin https://github.com/lym-123/news.git
6. git pull origin master
7. git push origin master

---

1.set数组

2.es6与commonJS的区别

3.vue函数
1）函数绑定
2）函数相互调用

4.增删改查

5.successHandler

6.异步操作与闭包

7.监听器
1）语法
2）监听值
3）监听对象

8.class类

9.vue生命周期

10.Promise

---

媒体查询

@media screen and (min-width:414px){
.one{
background-color:red;
}
}
@media screen and (max-width:375px){
.one{
background-color:blue;
}
}
@media screen and (min-width:375px) and (max-width:414px){
.one{
background-color:yellow;
}
}
.one{
width:100px;
height:100px;
}

---

2018.10.23 周二 day07

2018.10.24 周三 day08

2018.10.25 周四 day09

2018.10.26 周五 day10
…

2018.11.1 周四