Vue零基础学习

Vue 基本指令

v-on

v-bind

v-model

v-for

v-if

解决图片img标签 src="[object Module]"

解决办法：在 url-loader中加入options

{test:/\.(jpg|bmp|jpeg|png)$/,use:{loader:'url-loader',
options:{esModule: false}}}

Vue小技巧

当字符串中需要补充一个或几个字符时，可以用padStart/padEnd

绑定键盘事件 keyup/keydown 后面可以跟事件修饰符 .enter(具体键位)

数组拼接 concat

this.comments = this.comments.concat(res.body.message)

.trim()清除空格 可在上传数据中使用

this.$http.post('api/postcomment/'+$route.pramas.id,{ content: this.myComment.trim() })

若报错跟严格模式有关，禁用webpack打包时的严格模式即可

remove "use strick" directive

如果要操作DOM元素，最好在 mounted 生命周期函数里进行，因为这时候DOM元素已经加载完毕

babel-loader（webpack处理ES6语法）

1.安装:

cnpm install -D babel-loader @babel/core @babel/preset-env webpack

2.在webpack.cofig.js中配置:

{  test:/\.js$/,
   use:{
   oader:"babel-loader", 
   options: { 
     preset:['@babel/preset-env'], 
     plugins:[ '@babel/plugin-proposal-object-rest-spread','@babel/plugin-proposal-class- properties' ] } },
   exclude:/node_modules/  }

3.error：Support for the experimental syntax ‘classProperties’ isn’t currently enable 解决办法：

1.先安装依赖
cnpm i -D @babel/plugin-proposal-class-properties
2.在webpack.config.js中加入或在.babelur中加入
options: {
        plugins: ['@babel/plugin-proposal-class-properties']
         }

url-loader(webpack处理图片和字体文件)

默认情况下 webpack 无法处理 css 文件中的 url 地址 不管是图片还是字体库

.box{
  width: 100%;
  height: 500px;
  background: url('../images/senna.jpg');
}

1.安装 url-loader 和bootstrap：

cnpm i url-loader file-loader -D
cnpm i bootstrap -S

2.在main.js中引入bootstrap

注意： 如果要通过路径的形式，去引入 node_modules 中相关的文件不用写node_modules路径
import 'bootstrap/dist/css/bootstrap.css'

3.在webpack.cofig.js中配置:

 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
  // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
 { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 

使用Vue实例的render方法渲染组件

这种方法会将render中的组件替换掉整个el控制的元素

首先用 .vue 创建一个组件

<template>
  <div>
    <h1>这是登陆组件，用vue写的组件---{{msg}}</h1>
  </div>
</template>

<script>
export default {
  data (){
    return {
      msg: '123'
    }
  },
  menthods:{}
}
</script>

<style>

</style>

在vue的实例 vm 中加入一个属性 render

render: function(createElement){
  return createElement(login)
}
可以简写为：
render: c => c(login)

Vue preview plugin 实现预览图片的功能

1.下载并安装 vue-preview

cnpm i vue-preview -S

import VuePreview from 'vue-preview'
Vue.use(VuePreview)

2.使用方法

<template>
  <div>
    <div style="height: 1000px; background-color: pink;"></div>
    <vue-preview
      :list="list"
      :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
      :previewBoxStyle="{border: '1px solid #eee'}"
      :tapToClose="true"
      @close="closeHandler"
      @destroy="destroyHandler"
    />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list: [
        {
          src: 'https://placekitten.com/600/400',
          w: 600,
          h: 600
        },
        {
          src: 'https://placekitten.com/1200/900',
          w: 1200,
          h: 900
        }
      ]
    }
  },
  methods: {
    // 即将关闭的时候，调用这个处理函数
    closeHandler() {
      console.log('closeHandler')
    },
    // 完全关闭之后，调用这个函数清理资源
    destroyHandler() {
      console.log('destroyHandler')
    }
  }
}
</script>

3.参数说明

结合webpack使用vue-router

1.安装router

cnpm i vue-router -S

2.在main.js中导入vue-router

import VueRouter from 'vue-router'

3.手动安装 VueRouter

Vue.use(VueRouter)

4.创建路由对象

var router = new VueRouter({
  routes: [
    // account  goodslist
    { path: '/account', component: account },
    { path: '/goodslist', component: goodslist }
  ]
})

5.将路由对象挂载到vm上

var vm = new Vue({
  el: '#app',
  render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
  router // 5. 将路由对象挂载到 vm 上
})

webpack路由嵌套

创建并引入子路由

import login from './subcom/login.vue'
import register from './subcom/register.vue'

在路由规则中设置children属性

注意 children属性中path不用写’/login’，而是’login’

routes:[
    {path:'/account',component:account,children:[
      {path:'login',component: login},
      {path:'register',component: register}
    ]},
    {path:'/goodslist',component:goodslist}
  ]

在父级路由加入router-link和router-view

<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>

组件中style的lang和scoped属性

lang属性是设置语言，scss less等

<style lang="scss">
  
</style>

scoped属性是设置作用域在本身

<style scoped>

</style>

scoped属性是通过给div设置属性并在style中使用属性选择器的方式实现的

Mint-UI

下载安装：

cnpm install mint-ui -S

引入全部组件:

import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);

按需引入部分组件:
先安装：

cnpm install babel-plugin-component -D

再引入：

import { Cell, Checklist } from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

按键（button）的使用

<mt-button type="primary">default</mt-button>

Toast组件

this.toastInstance = Toast({
        message:'警告警告警告',
        position:'middle',
        duration:-1,
        iconClass: 'glyphicon glyphicon-ok',
        className: 'toast1'
      })

Promise解决回调地狱

连续读取3个文件

const fs =require('fs')


function getFileByPath(fpath){
  return new Promise (function(resolve,reject){
    fs.readFile(fpath,'utf-8',(err,dataStr)=>{
      if(err) { reject(err) }
      resolve(dataStr)
    })
  })
}

// 读取完 1.txt 接着读取 2.txt 3.txt  不用回调地狱，用 .then
getFileByPath('./files/1.txt')
.then((data)=>{
  console.log(data)
  return getFileByPath('./files/2.txt')
})
.then((data)=>{
  console.log(data)
  return getFileByPath('./files/3.txt')
})
.then((data)=>{
  console.log(data)
})

如果想要实现其中一个回调出错就停止所有可以在结尾加上 .catch

.catch((err)=>{
  console.log(err)
})

如果想要实现一个回调出错，其他回调继续执行则 在 （.then）中加上失败的回调即可