注册组件以及向组件传递值,通过props['aaaa']，声明属性，引用组件通过.
<chat :aaaa = "cartlist"></chat>
new Vue({
el: '#app',
components: {
Chat
},
data() {
return {
cartList: []
}
},
}
})
var Chat = {
template: `<div>
购物车
<table border="1">
<tr>
<th>选中</th>
<th>数量</th>
<th>价格</th>
<th>名称</th>
</tr>
<tr v-for ="(item,index) in aaaa">
<td><input type="checkbox" v-model="item.select"> </td>
<td><span @click="reducecount(index)"> - </span>{{item.count}}<span @click="addcount(index)"> + </span></td>
<td>{{item.count * item.price}}</td>
<td>{{item.text}}</td>
</tr>
</table>
</div>`
, props: ['aaaa'],
methods: {
reducecount(val) {
if (this.cartList[val].count > 1) {
this.cartList[val].count--;
} else {
console.log(this.cartList[val].text)
if (window.confirm(`是否删除${this.cartList[val].text}?`)) {
this.cartList.splice(val, 1)
}
}
},
addcount(val) {
this.cartList[val].count++
},
}
}
过滤掉一些数据
chooseCount() {
return this.aaaa.filter(v => v.select).length
},
监听 computed
定义：
computed: {
numString() {
return Number(this.n1) + Number(this.n2) + Number(this.n3)
}
}
使用
template: '<div> 简单的计算：<input type="text" v-model="n1">+<input type="text" v-model="n2">+<input type="text" v-model="n3">={{numString}}' +
深度监听
watch:{
aaaa:{
handler(){
window.localStorage.setItem("chat",JSON.stringify(aaaa))
},
deep:true
}
},
页面存储数据
window.localStorage.setItem("chat",JSON.stringify(aaaa))
本地存储 json序列化和反序列化
window.localStorage.setItem("chat",JSON.stringify(this.a))
this.cartList = JSON.parse(window.localStorage.getItem("chat"))
- Vue-cli :脚手架
- Vue-router：路由
- Vuex：状态管理。
- http ：axios
项目的配置
image.png
启动项目cnpm run serve
阻止表单的提交
e.preventDefault()
重定向
router.js
{
path: '/',
name: 'Regist',
redirect: "/login",
},
async, await异步调用
async submitHandler(e){
e.preventDefault()
try{
const result = await this.$http.get("/api/login",{params:this.model}))
}catch (e) {
console.log(e)
}
Vuex
调用
this.$store.commit('setToken',result.data.token)
state: {
tokens:''
},
mutations: {//同步的方法
setToken(state,token){//setToken 方法名
state.tokens = token
}
},
actions: {
},
modules: {
},
getters:{
}
本地存储window.localStorage.setItem("token",result.data.token)
axios全局请求拦截
- 设置拦截器
import axios from 'axios'
import store from './store'
import router from './router'
//http 全局拦截
//token 放在header的请求头上 传给后台。
export default function setAction() {
//将token配置到header
axios.interceptors.request.use(
config =>{
if(store.state.tokens){
config.headers.token = store.state.tokens
}
return config
}
)
//每次的返回都会经过拦截器
axios.interceptors.response.use(
response =>{
if(response.status == 200){
const data = response.data
if(data.code == -1){
//登陆过期了，清空localstorege和store中的记录清除
store.commit('token','')
window.localStorage.removeItem('token')
//跳转到login
router.replace({path:'/login'})
}
return data
}
return response
}
)
}
在main.js中执行方法
import setaxios from './setaxios'
setaxios()```
##### 嵌套路由的跳转
* 首先定义接收跳转的父容器
<template>
<div>
<router-view/>
</div>
</template>
- 在父容器跳转路由中添加子路由
{
path: '/bomnav',
name: 'Bomnav',
component: () => import(/* webpackChunkName: "about" */ '../views/Bomnav.vue'),
children: [
{
path: 'index',
name: 'index',
component: () => import('../views/Index.vue')
}, {
path: 'classify',
name: 'Classsify',
component: () => import('../views/Classify.vue')
}, {
path: 'search',
name: 'Search',
component: () => import('../views/Search.vue')
}, {
path: 'car',
name: "Car",
component: () => import('../views/Car.vue')
}, {
path: 'mine',
name: 'Mine',
component: () => import('../views/Mine.vue')
}
]
}
- 设置通过路由进行跳转到指定页面
this.$router.push({path:'/bomnav/mine'})
给路由添加动画
https://www.cnblogs.com/szyblogs/p/7069577.html
子组件向父组件传递消息
子组件通过this.$emit('方法名')。父组件通过v-on:（方法名）接收
子组件：template:`<div>{{title}}<button @click = "$emit('remove')">remove</button></div>`,
父组件：v-on:remove = "list.splice(index,1)"
父组件向子组件传递消息
子组件创建prop属性，父元素传递值
子组件：props:['shuxing']
父组件：v-bind: shuxing = "item.title"
props可以传递类型
props:{title:String}
字符串数组形式列出的 prop
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
props 可以直接传递，也可以通过v-bind动态赋值。
自定义v-model
Vue.component('custom-input',{
props:['checked'],
model:{
prop:'checked',
event:'change'
},
template:
`<div>
<input type = "checkbox" v-bind:checked = "checked" v-on:change = "$emit('change',$event.target.checked)">
</div>`
})
<div id="app7">
<custom-input v-model="changeData"></custom-input>
<p>{{changeData}}</p>
</div>
复选框
<div id="app16">
<input type="checkbox" id ="check" v-model = "checkboxs" value="jack"/>
<label for = "jack">jack</label>
<input type="checkbox" id ="check1" v-model = "checkboxs" value="lily"/>
<label for = "lily">lily</label>
<input type="checkbox" id ="check2" v-model = "checkboxs" value="sam" />
<label for = "sam">sam</label>
<p>选中的复选框{{checkboxs}}</p>
</div>
new Vue({
el:"#app16",
data:{
checkboxs:[]
}
})
vue插槽
Vue.component("alert-box",{
template:`<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>`
})
new Vue({
el:'alert-box'
})
<alert-box>something bad</alert-box>
font-family
span{
font-family: PingFangSC-Medium; //mac电脑优先使用的字体。
}
光标变化cursor: pointer;
Vue.prototype是个Vue添加属性，而不是添加变量。
vue生命周期created中不能使用this,可以使用
`created(){
this.test()
// created:() =>{
// var that = this
// that.test()
// console.log("created"+that.foo)
},`
| 指令 | 解释 |
|---|---|
| v-once | 不改变界面 ，但是改变属性值 |
| v-html | 可以使用html |
| v-if | 条件控制 |
| v-bind :href = "url" | 缩写：href ="url" |
| v-on:click ="dosomething" | 缩写@click = "dosomething" |
| computed | 计算属性，会使用相应式依赖使用缓存 |
| method | 会使用相应式依赖使用缓存 |
| watch | 监听属性 |
父组件向子组件传递 通过‘props’，子组件向父组件发送指令‘$emit[‘’]’
Vue.component('custome_li',{
template:`<li>{{title}} <button @click = "$emit('remove')">remove</button></li>`,
props:['title']
})
new Vue({
el:'#textli',
data:{
newText:" ",
items:[{
id:1,
title:"11111"
},{
id:2,
title:"22222"
},{
id:3,
title:"33333"
}]
},
methods:{
addNewTod(){
}
}
})
<div id="textli">
<form v-on:submit="addNewTod">
<label> add new Text</label>
<input v-model="newText" />
<button>add</button>
</form>
<ul>
<li is = "custome_li" v-for="item,index in items":key = "item.id" @remove = "items.pop(index,1)" :title = "item.title"></li>
</ul>
</div>
Vue中style的写法
:style="{ fontSize: fontSize + 'em' }"
:title 表示是动态传递数据， title中静态数据，类似:is也是动态数据，is是传递的静态数据。
<div id = "example2">
<custom_title title="test2222">
</custom_title>
<custom_title :title = "test">
</custom_title>
</div>
Vue.component('custom_title',{
props:["title"],
template:`<div>{{title}}</div>`,
});
new Vue({
el:'#example2',
data:{
test:"test1111"
}
});
后备插槽：
Vue.component('custom-btn',{
template:`<button>
<slot>提交</slot>
</button>`
})
<div id="example10">
<custom-btn>
</custom-btn>
</div>
显示的内容是
<button>提交</button>。
如果
<div id="example10">
<custom-btn>
注册
</custom-btn>
</div>
显示的内容是
<button>提交</button>。
v-slot:可以被替换为‘#’
slot 插槽作用域 对比
2.6.0之前的： 写法是 <template slot-scope= "slotprop">
<div id="app9">
<base-layout-scope>
<template slot-scope= "slotprop">
<div>{{slotprop.msg }}</div>
</template>
</base-layout-scope>
</div>
Vue.component('base-layout-scope',{
template:`<div>
<slot :msg = "msg">{{person.teacher.name}}</slot>
</div>`,
data(){
return {
msg:'我是谁',
person:{
teacher:{
name:'韩梅梅',
age:20,
sex:'女'
}
}
}
}
})
2.6.0 之后的写法<base-layout-slot #item ="slotprop"或者<base-layout-slot v-slot:item ="slotprop"
<div id="app10">
<base-layout-slot #item ="slotprop"><div>{{
slotprop.person.teacher.name
}}</div></base-layout-slot>
</div>
Vue.component('base-layout-slot',{
template:`<div>
<slot :item = "person"> {{person.teacher.name}}</slot>
</div>`,
data(){
return {
msg:'我是谁',
person:{
teacher:{
name:'韩梅梅',
age:20,
sex:'女'
}
}
}
}
})
