Vue如何使用与vue常见问题z321616764的博客-vuecli4取消eslint规范

vue指令

Vue组件的组成：
一个组件就是一个XXX.vue文件

<template></template>// 模板 

只能有一个根标签(节点)

<template> <div>所有的内容都写在这里面</div> </template> 

<script></script> //业务逻辑 export default{  data(){return{}}，  methods:{},  ...... } 

css样式

App.vue里面的css样式是共用的
通过使用 实现组件之间的css隔离
在script标签里导入css文件 import ‘css文件路径’
vue组件的使用：
例:
编写组件
Test.vue

导入组件

 import  Test from '../components/Test.vue'  import  Test from '@/components/Test' //两种方式，第一种就是普通的跳出当前目录然后寻找， //第二种通过“@” @代表从src文件夹开始 

注册：

components{Test} 

使用

<Test></Test> 

条件渲染：

v-if  v-else v-else-if v-show //v-if和v-show的区别？ //v-if为false触发时，元素目标将会被卸载 //v-show触发时，元素目标会被添加一个display:none的属性 

文本显示：

{{ }} v-text  //只可渲染文本 v-html  //可渲染html标签 

事件：

v-on:事件名 或 @事件名
$event 事件的参数

• @click 单击事件

• @change 值发生变动失焦后触发

• @blur 离开input触发

• @input input发送变化立即触发

• …

属性：

v-bind:属性名称 或者 :属性名称

• :class
• :style
• :disabled
• …（很多）

表单(数据绑定)：

//v-model <input type="text" value="" v-model="flag"> //数据绑定 

修饰符号：

v-model.number // 转换为数字 v-model.lazy //延迟更新 

循环：

<div v-for="(item,index) in 要循环的目标" :key="index"></div> 

事件修饰符：

• stop //阻止事件冒泡
• once //只执行第一次
• prevent //阻止默认事件

例子：

@click.once.stop= " "; 

按键修饰符：

enter    esc up(↑) down(↓) left(←) right(→) //例如： @keyup.enter=" " //(enter键被按下触发) 

:class <div :class = " "> </div> //属性绑定(这里以div标签为例) <div :class="{key1:'val1',key2:'val2'....}"></div> //对象模式--val值为真，key对应class会绑定上, <div :class=" [ name1,name2]" //数组方式 要在data里定义一下样式 

 :style <div :style="{key1:'val1',key2:'val2'}"></div> //驼峰css格式书写例如 在style里面 font- size在这里要写成fontSize <div :style = "styles"></div> new Vue({ data:{ styles:{fontSize:"30px",backgroundColor:"#fff00"} } }) 

directives 自定义指令

<div id="app"> <div class="box"> //调用自定义指令v-img  并指定list数组里的三张图片 <div id="" class="box" v-img="list[0]"></div> <div id="" class="box" v-img="list[1]"></div> <div id="" class="box" v-img="list[2]"></div> </div> </div> <script type="text/javascript"> new Vue({     el:"#app",     data:{      list:['./images/1.jpg','./images/2.jpg','./images/3.jpg'] //新建一个list数组 里面放入图片 },     directives:{      img:{ //自定义指令的名称 inserted(el,binding){        let color = Math.floor(Math.random()*1000000);        el.style.backgroundColor = "#"+color;        el.style.backgroundImage = "url("+binding.value+")"; } } } }) </script> 

配置路由:

例如在src/views里新建了一个Base.vue (一般都是开头大写)
要在router文件夹里的index.js里配置

import Basefrom '../views/Base.vue' const  routes =[ {             path: '/base',             name: 'Base',             component: Base, } ] 

子路由的配置：

import Home from '../views/Home.vue' import Register from '../views/Register.vue' //在需要配置子路由的路由里添加children数组 : children:[]   //children里面就是子路由，可多个 const routes = [ {     path: '/',     name: 'Home',     component: Home,      children:[ {      path:'/register ',      name:'Register ',      component:Register     }, ] }, ] //register.vue就是Home的子路由 

跳转:

1： <router-link to="/login">登录</router-link>//跳转到登录页 

2： <button @click="GoLogin()">登录</button> export default{     methods:{ GoLogin(){ this.$router.push('/infolist') } } } //两种方式都可实现跳转 

生命周期：

beforeCreate   //创建前 created   //创建完成(可以获取到组件的实例  this   通常启用定时器 发起网络请求) beforeMount  //挂载前 mounted   //挂载完成 (组件已经渲染完毕  可以操作dom 获取ref) beforeUpdate // 更新前 updated   //更新完成 beforeDestroy  // 销毁前  (销毁前移除定时器，销毁dom的事件) destroyed  //销毁后 

发起请求方式：

fetch("https://www.520mg.com/mi/list.php?page=1") .then(res=>res.json()) //把获取的数据转换为json .then(res=>{   console.log(res); //请求成功后的回调函数 //this.joks = this.joks.concat(res.result) }) .catch(err=>{   console.log("请求失败后的回调函数") }) 

网络请求的排错：

ctrl+shift+i 打开调试面板
network 网络请求
刷新
查看
请求的数据是否正确：
Querying string parameters 请求的参数
响应的数据是否符合：
Status Code:200 OK 响应的状态码
preview /response 响应的内容
js获取的属性和结构是否和响应的内容的结构一致
常见的错误：
**浏览器同源策略限制：**当前地址与服务器请求的地址不同源
404错误 地址写错误
401 请求的权限不足
参数请求的错误
JS代码写错

组件间的数据传递：

父传子：
父通过属性方式传递<Step :num="3">
子通过props接收

props{num:{type:Number,default:1}} 

子传父：
子通过发送事件 this.$emit("numchange",this.count)
父通过监听事件 <Step @numchange ="$event">
$event 代表事件传递的参数
全局传递：
空vue事件↓

//bus.js import Vue from 'vue'; export default new Vue(); 

//Btn.vue import Bus from 'xxx/bus.js' Bus.$emit("colorChange",'red') 

//Color.vue import Bus from 'xxx/bus.js'; export default{ created(){    Bus.$on("colorChange",$event=>{ this.color = $event    }) } } 

Vue参数对象：

• el 指定vue的模板
• data 指定vue的初始数据
• methods 指定方法区域
• computed 从现有数据计算出新的数据
• watch 监听数据的变化
• filters 过滤管道(数据的格式显示)
• directives 自定义指令

js中的模块导入导出

导出命令

export {xxx,xxx,xxx} export default xxx; 

导入

import Any from "xxxx" import * as Obj from "xxxx" import {xxx,xxx,xx} from ".xxx" 

地址

可以省略 .js 后缀
如果是vue 可以省略 .vue 后缀
在vue项目中 @代表src目录
如果是相对路径 ./
如果没有相对路径，就从node_modules文件夹查找
文件默认index.js 是可以省略 只写文件夹
例:

 import  Base from './components/index.js' //简写后： import Base from './components' 

规则

export可以导出多次
export default 只能是一次
export 和 export default 可以共存
一个js文件可以导入js，也可以导出js

动态导入

import(xxx.js).then(res=>{console.log(res)}) 

webpack魔法注释 /*webpackChunkName: " jquery" */  打包后的名称 /*webpackPrefetch: true*/  文档空闲时提前加载 

vue路由

核心概念

<router-link/> //切换地址(浏览器的地址) <router-view/> //用来存放路由页面对应的组件 /src/router/index.js  //路由配置   连接router-view 组件页面 //用一个Category分类页举例 {    path:'/category', //分类页面    name:'Category', //路由名称    component:Category  //对应组件 }, //path 路由组件对应的地址 //component 地址对应的组件 //当浏览器地址栏的地址匹配到当前路由的path， //vue就会让component组件去填充替换router-view内容 

路由的传递

params 路由的传递

//配置: {path:/produce/id} 

//传递： <router-link to="/produce/abc"></router-link> 

//获取： $route.params.id 

query查询

//传递: <route-link to="/produce?type=类型&age=20"></route-link> 

//获取: {{$route.query.type}} {{$route.query.age}} 

• $route当前路由信息
• path fullpage 路由地址
• query 查询信息
• params 路由参数
• name 名称
• $router路由实例
• history.current ===$route

跳转方法：

• go 跳转
• back()后退
• foward() 前进
• push() 推入历史记录
• replace() 替换

子路由

配置:

 {      path:'/detail',      name:'Detail',      component:Detail,    children:[ {path:"arg",component:Arg}, {path:"com",component:Com} ] }, 

使用:

<h1>详情</h1> <router-link to="/detail/arg">参数</router-link> | <router-link to="/detail/com">评论</router-link> <router-view></router-view>