Vue如何使用与vue常见问题

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("http://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>