Vue.js--笔记一

一，基础

1，ES6–语法

关于 let 和 var

• 块级作用域

详细

• ES5中的var是没有块级作用域的(if/for)
• ES6中的let是有块级作用的(if/for)

关于闭包

用let 就行了

关于const

对象字面量的增强写法

2，事件监听

1，v-on

• v-on修饰符
  

2，条件判断

• v-if ，v-else if，v-else
  

3，v-show

4，组件的key属性

  <hr/>
  <ul>
    <!--官方推荐要添加 一个  :key 的属性-->
    <li v-for="go in gogo" :key="go">{{go}}</li>
  </ul>

5，检测数据更新–响应式

3，双向绑定 v-model

• 原理：

  <input type="text" v-model="message">
相当于
  <input type="text" :value="message" @input="message = $event.target.value">

1，v-model：radio

2，v-model：checkbox

3，v-model：select

4，值绑定

5，修饰符

4，组件化

步骤：

• 创建组件构造器
• 注册组件
• 使用组件

父子组件的通讯

• 父传子

props 里面定义属性

• 子传父

1.@click=“btclick(item)” 子模板调用子方法

<template id="cpn">
  <div>
    <button v-for="item in categories"
            @click="btclick(item)">
      {{item.name}}
    </button>
  </div>
</template>

2.btclick(item) 子方法调用v-on标签的方法

  <script>
  const cpn={
    template:'#cpn',
    data(){
      return{
        categories:[
          {id: '1',name:'小米'},
          {id: '2',name:'小高'},
          {id: '3',name:'笑笑'},
          {id: '4',name:'KIA'},
        ]
      }
    },
    methods:{
      btclick(item){
        // console.log(item);
        this.$emit('itemclick',item)
      }
    }
  }
  </script>

3.itemclick — v-on标签调用父类的方法

<cpn @itemclick="cpnclick"></cpn>

4.const app = new Vue

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好呀！',
    },
    components:{
      cpn
    },
    methods: {
      cpnclick(item){
        console.log(item.name);
      }
    }
  })

5，模块化

6，webpack

1，配置文件

• 编写webpack.config.js

const path = require('path');

module.exports={
  entry:'./src/main.js',   //入口
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js',
  }, //出口
}

-在控制台执行 npm init，会生成package.json文件

2，局部安装webpack

npm install webpack@3.6.0 --save-dev

3，依赖css文件

• 在main.js 中

const {add,mul} = require('./js/mathUtils.js');
console.log(add(12, 23));
console.log(mul(12, 2));


//依赖css文件
require('./css/normal.css');

//依赖less文件
require('./css/special.less')

在添加css样式，重新 npm run build时会包如下的错

ERROR in ./src/css/normal.css
Module parse failed: E:\WebVue\13-webpack的使用\02-webpack的配置\src\css\normal.css Unexpected token (1:4)
You may need an appropriate loader to handle this file type.

• 此时要在webpack.config.js中修改

const path = require('path');

module.exports={
  entry:'./src/main.js',   //入口
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js',
  }, //出口
  module: {
    rules: [
      {
        test: /\.css$/,
        //css-loader 只负责加载css文件 不解析
        //style-loader 负责将样式添加到DOM中
        //从右往左加载，位置换掉后会报错
        use: ['style-loader','css-loader' ]
      }
    ]
  }
}

• 然后在终端执行以下的命令

npm install --save-dev css-loader
npm install style-loader --save-dev

4，依赖less文件

• 终端

npm install --save-dev less-loader less

• webpack.config.js

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

5，依赖图片

• 注意
  

 {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片，小于limit时，会将图片编译成base64字符串形式
              //当加载的图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              //以这种方式命名
              name: 'img/[name].[hash:9].[ext]',
            }
          }
        ]
      },

6，ES6语法处理

babel-loader

文档

7，导入Vue

• npm install --save vue

• 在main.js声明（使用）
  

• 在webpack_config.js配置
  

---

• 使用 .vue 文件

添加 loader

npm install vue-loader vue-template-compiler --save-dev

修改配置

---

8，配置文件的分离

• 安装插件

npm install webpack-merge --save-dev

• 分离文件，dev.confog.js

const WebpackMerge = require('webpack-merge');
const baseConfig = require('./base.config.js');

module.exports = WebpackMerge(baseConfig,{
  devServer:{
    contentBase:'./dist',
    inline:true,
  }
})

• base.config.js是一个基础的配置文件

• package.json

7，vue-cli2->vue-cli3

1，vue-cli2初始化项目

2，vue-cli3初始化项目

3，动态路由

• 新建.vue文件
• 在index.js中映射关系
  
• 在APP.vue中使用路由

   <router-link replace :to="'/user/'+userName" tag="button">用户</router-link>

• 在User.vue中获取传过去的值
  

4，路由懒加载

5，路由嵌套

• index.js

  {
    path: '/home',
    component: Home,
    children:[
      {
        path:'',
        redirect:'new',
      },
      {
        path:'new',
        component:HomeNews,
      },
      {
        path: 'message',
        component: HomeMessage,
      }
    ]
  },

• Home.vue
  

• 效果
  

6，参数传递

• App.vue

<router-link replace :to="{path:'/profile',query:{name:'Mr-Jies',age:18,height:1.8}}" tag="button">档案</router-link>

• Profile.vue
  

8，异步操作

1，Promise

<script>
  //什么情况下会用到Promise?
  //一般情况下是有异步操作时，使用Promise对这个异步操作进行封装
  // new ->构造函数(1.保存了一些状态信息 2.执行传入的函数)
  //在执行传入的回调函数时，会传入两个参数，resolve, reject.本身又是函数

  new Promise((resolve, reject) => {
    //耗时操作1
    setTimeout(() => {
      //成功时调用resolve
      resolve('hello world')
      //失败时调用
      // reject()
    }, 1000)

  }).then((data) => {

    console.log(data);
    console.log(data);

   return new Promise((resolve, reject) => {
      //耗时操作2
      setTimeout(() => {
        resolve('你好呀！！')
      }, 1000)
    })

  }).then((data)=>{
    console.log(data);
    console.log(data);

    return new Promise((resolve, reject) => {
      //耗时操作3
      setTimeout(() => {
        reject('错误！！')
      }, 1000)
    })

  }).catch((err)=>{
    console.log(err);
  })
  
</script>

2，Promise三种状态

9，网络请求框架axios

• request.js

export function request(config) {

  //1.创建axios实例
  const instance = axios.create({
    baseURL:'********',
    timeout:5000,
  })


  //2.拦截器
  //2.1,请求拦截器
  instance.interceptors.request.use(config=>{

    //1.比如拦截config中的一些信息不符合服务器的要求

    //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标

    //3.某些网络请求，必须携带一些特殊的信息

    return config
  },error => {

  });

  //2.2,响应拦截器
  instance.interceptors.response.use(config=>{

    return config.data
  },error => {

  })

  //3.发送真正的网络请求
  return instance(config)

}

• 使用上面的封装函数

import {request} from "./network/request";

//最后的版本---为什么可以使用.then .catch 因为他的底层是AxiosPromise
request({
  url: '/api/h8/home/data',
  //请求参数拼接
  params: {
    type: 'pop',
    page: 1,
  }
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})