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
},
]
},
跳转:
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事件↓
import Vue from 'vue';
export default new Vue();
import Bus from 'xxx/bus.js'
Bus.$emit("colorChange",'red')
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>
//获取：
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>