VUE学习笔记 第一遍

语法模板

new vue({
el:"绑定的标签" //element
data:{
//定义变量的地方
myname:"aaaa", //状态
myage:100
},
methods:{
//定义方法的地方
functionname(){
this.myname="bbb" //this表示当前实例
}
},
computed：{
//计算属性
functionname（）{
}
}，
watch:{
//监听状态的改变


}
})

语法

指令v-show

<button v-show="isshow">ture,显示，false，隐藏</button>

v-if

<button v-if="isshow">ture,创建，false，删除</button>

v-bind： 动态绑定

<div v-bind:class = "isture?"yellow":"red"">
动态切换class
</div>

@click v-on

<--动态绑定事件-->
<button @click="functionname()"> </button>
<button v-on:click="functionname">点我</button>

v-for 遍历数组的指令

<li v-for="item in datalist">//也可以item of datalist
{{item}}
</li>

v-for扩展

<li v-for="(data,index) in list">
数组中data和index，值和序列
</li>
<li v-for="(data,key，index) in obj">
数组中data和key和index，键、值、序列
</li>

v-model 双向绑定

<input type="text" v-model="mytext"/>

v-html 解析html代码

<div v-html="myhtml"></div>

二、class&&style的对象写法

<div id="id" :class="classname">
class的对象写法
</div>

var vm = new Vue({
el:"#id",
data:{
classname:{
aa:ture, //ture添加class，false删除class
bb:ture,//加入事先为定义的其他class，需要使用Vue.set(vm.classname,"dd",ture)
cc:ture
},
classarr:["aa","bb"]//删除push("dd") 添加splice("dd")
}
})


<div :class="classarr">
class数组写法
</div>

<div :style="styleobj">
style对象写法
</div>
<div :style="stylearr">
style数组写法
</div>

var vm =new Vue({
el:"#id",
data:{
styleobj:{
backgroundColor:"red"
},
stylearr:[{
backgroundColor:"red"
}]

}
})

三、条件渲染 v-if v-else v-else-if

<li v-for="data in list">
<div>
{{ data.name }}
</div>
<div v-if="data.stat===0">
未发货
</div>
<div v-else-if="data.stat===1">
已发货
</div>
<div v-else="data.stat===2">
已完成
</div>
</li>
var vm =new Vue({
el: "#div",
data: {
list:[
{
name:'111',
price:000,
stat:0
},
{
name:'222',
price:000,
stat:0
}
]
}
})

包装环境 template

<template v-if="iscreat"><div>111</div><div>111</div><div>111</div></template>

四、事件处理器

<button @click="function">
自动传事件对象
</button>
<button @click="function($event,2)">
手动传事件对象并自定义参数
</button>
<button @click="num++">
直接写代码
</button>

new Vue({
el: "#box",
data: {
num:0
},
methods: {
function(evt){
this.num++;
}
}
})

阻止冒泡
原生js：

evt.stopPropagation();

vue:

<li @click.stop="function">
stop阻止冒泡
</li>

<div @click.self="function">
self只有当事件源是自己的时候才会触发
</div>

其他的修饰

.once 只触发一次
.capture 捕获阶段触发
.prevent 拦截默认行为
.passive 不拦截默认行为，一般移动端使用

按键修饰符

.enter 按下enter键才能执行

五、表单控件绑定

多选

<input type="checkbox" v-model="checkgroup" value="vue"/>vue
<input type="checkbox" v-model="checkgroup" value="react"/>react
<input type="checkbox" v-model="checkgroup" value="js"/>js
//只有一个绑定一个布尔值

new Vue({
el:"#box",
data:{
checkgroup:[] //双向的
}
})

单选

<input type="radio" v-model="checkgroup" value="vue"/>vue
<input type="radio" v-model="checkgroup" value="react"/>react
<input type="radio" v-model="checkgroup" value="js"/>js

表单修饰符

v-model.lazy //失去焦点
v-model.number //转换为number类型
v-model.trim //去首尾空格

异步响应axios

github引入axios

github访问axios项目，项目下有引入的链接，也可以通过链接下载到本地引入。

引入之后，在vue中直接调用

new Vue({
methods:{
get
function(){
axios.get("资源路径").then(res=>{
res.data;
//res是一个请求大对象，里面的data属性才是真实的数据
})
}
post
function(){
axios.post("路径",{
写对像属性
}).then(res=>{
console.log(res);
});
}
}
})

组件化

语法

Vue.component("组件名称",{
template:'
<div>
<button @click="handleback"></button>
组件的html代码
</div>
',//模板
methods:{
//组件的js逻辑
handleback(){
},
handlehome(){
}
}
})

全局组件自定义组件中data必须是一个函数,只能写行内样式，只能包含一个根节点，无法直接访问其他组件的状态和方法。

data(){
return{
name:"aaa"
}
}

局部组件

Vue.component("组件名称",{
template:'
<div>
<button @click="handleback"></button>
组件的html代码
<name></name>
</div>
',//模板
components:{
"name":{
template:'
局部组件
'
}
}
})

组件之间的通信

父传子

Vue.component("组件名称",{
template:'
<div>
<button @click="handleback"></button>
组件的html代码
</div>
',
props:["父传子在这里接收"],
props:{
对象写法
mytitle:String,
isshow:Boolean
},
props:{
mytitle:{
type:String,
default:true
}
}
})



//根组件
new Vue({
el:"#box",



})

子传父

<div id="box">
<child @aaa="handel"></child>//父在子绑定回调函数
</div>

Vue.component("child",{
data(){
money:10000
},
template:'
<div>
<button>
</button>
</div>
',
methods:{
give(){
this.$emit("aaa",this.money);//子触发方法，调用回调函数，值就会传给父组件定义的回调函数
}
}

})

new Vue({
el:"#box",
methods:{
handel(){
//父节点定义的函数，会传给一个字组件的值
}
}
})

refs

<div ref="mydiv">
</div>
通过ref可以获得dom节点以及组件，实现父组件操作子的属性
Vue({
methods:{
handel(){
this.$refs.mydiv;
}
}
})

中间人模式，兄弟组件通信

子传父，再父传子

bus通信总线

bus.$on bus.$emit
var bus = new Vue();//空的vue实例
Vue.component("child1",{
template:'
<div>
发布者
</div>
',
methods:{
handel(){
bus.$emit("aaa","data");
}
}
})
Vue.component("child2",{
template:'
<div>
订阅者
</div>
',
//dom创建完之后会自动触发mounted()方法
mounted(){
bus.$on("aaa",(data)=>{
console.log("aaa");
})
}
})

修改属性

属性是父传给子的，子修改属性，父会产生歧义，建议修改状态。
v-once在组件中的作用
v-once的模板不能修改，静态页面v-model

<div id="box">
            <zujian type="text" title="姓名" v-model="username" ></zujian><!-- v-model注册了一个input事件监听，触发之后函数会自动修改绑定的值 -->
            <button type="reset" @click="cle()">清空</button><button type="submit" @click="sub()">提交</button>
        </div>
        
        <script>
            
            Vue.component('zujian',{
                props:["type","title","value"],//v-model会自动给组件传value
                template: '<div><label>{{title}}</label><input :type="type" :value="value" @input="child"/></div>',
                methods:{
                    child(evt){
                        //组件修改了值，通过$emit方法通知父，父同步username的值
                        this.$emit("input",evt.target.value);
                    }
                }
            })
            
            var vm =new Vue({
                el:"#box",
                data:{
                    username:"default"
                },
                methods:{
                    sub(){
                        console.log(this.username);
                    },
                    cle(){
                        this.username="";
                    }
                }
            })
            
        
                
        </script>

动态组件

<keep-alive>
<component :is="动态绑定组件"></component>
</keep-alive>
 

slot(插槽)

<div>
<aaa>
<div slot="a">
通过name属性可以将dom插入组件不同位置
</div>
<div slot="b">
通过name属性可以将dom插入组件不同位置
</div>
</aaa>
<---->旧版插槽</---->
</div>


Vue.component("aaa",{
template:'
<div>
<slot name="b"></slot>
child
<slot name="a"></slot>
</div>
',


})

<div>
<aaa>
<template v-slot:a>
<div>
通过name属性可以将dom插入组件不同位置
</div>
</template>
<template v-slot:b>//v-slot:   =====   #
<div>
通过name属性可以将dom插入组件不同位置
</div>
</template>
</aaa>
<---->新版插槽</---->
</div>


Vue.component("aaa",{
template:'
<div>
<slot name="b"></slot>
child
<slot name="a"></slot>
</div>
',

transition 单个元素过渡

.aaa-enter-active{
样式
}
.aaa-leave-active{
样式
}

//创建和消失的时候会自动找.aaa-enter-active和.aaa-leave-active
<transition name="aaa" appear>//appear初始动画效果
<div v-show = "ishow">
111111111
</div>
</transition>

多个元素过渡加key值transition-group
必须加key值，v-for必须加key值 ：key=“value”

<transition-group name="name" tag="ul"></transition-group>//默认实例化为span，也可以使用tag属性定制

可复用过渡将标签写入组件中即可

生命周期

beforeCreate()//创建前

created() //创建完成

beforeMount() // 挂载前

mounted() //挂载后

beforeUpdate() //更新前
updated() //更新后

swiper

new Swiper(".class",{
loop:true,//重复
direction:"vertical"//垂直轮播
})

动态swiper

swiper初始化要放在updated中

swiper组件

<aaa :key="length">
<div>
内容
</div>
</aaa>

Vue.component("aaa",{
template:'<div>
<slot></slot>//使用插槽
</div>',
mounted:{
new Swiper("",{

})
}

})

自定义指令

<div v-aaa="'red'">
</div>

语法定义
Vue.directive("指令名(aaa)",{
//指令的生命周期 1
inserted(el,binding){
绑定指令的标签插入父节点就会执行
el.style.background=binding.value
},
//更新时
update(){
el.style.background=binding.value
}
//第一次绑定
bind(){

}
//解绑
unbind(){

}
//更新完成之后
componentUptated(){

}
})

nextTick

this.$nextTick(){

}

过滤器

Vue.filter("name",function(参数){

})

vue—路由

路由懒加载

{
path: '/center',
component: ()=>import('../views/center.vue')
},

路由拦截器

router.beforeEach((to, from, next) => {
// ...
if(判断){

}else{
next() //放行
}
})

反向代理

vue.config.js 中的 devServer.proxy 选项来配置。
module.exports = {
devServer: {
proxy: {
'/api': { //以什么开头的路径来反向代理
target: '<url>',//目标域名
ws: true,//是否更改域名
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}

Router实战

import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入组件
import Film from '../views/Film.vue'
import center from '../views/center.vue'
import user from '../views/user.vue'
import naver from '../views/film/naver.vue'
import detail from '../views/detail.vue'
// 注册模块
Vue.use(VueRouter)

const routes = [
  {
    path: '/film',
    component: Film,
	children:[
		{
			path:'naver',
			component:naver
		},
		{
			path: "",
			redirect: '/film/naver'
		}
	]
  },
  {
    path: '/center',
    component: center
  },
  {
    path: '/user',
    component: user,
  },
  // 重定向
  {
    path: '*',
    redirect: '/film'
  },
  {
	  path: '/detail/:id',//动态路由跳转
	  component:detail,
	  // name:'myrouter' //名字跳转
  },
/*  {
  	  path: '/detail',//query路由跳转方式
  	  component:detail,
  } */
]

const router = new VueRouter({
	mode:'history',//hash带#
	routes
})

export default router

Store

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

export default new Vuex.Store({
//公共资源定义
  state: {
		filmList:[]
  },
	//同步请求
  mutations: {
	  setlist(state,data){
			state.filmList=data  
	  }
  },
	//异步请求
  actions: {
	  getlist(store){
		  console.log("发送ajax")
		  axios('http://localhost:8081/base/salestoday').then(res =>{
		  	console.log("数据",res)
			store.commit('setlist',res.data)
		  }) 
	  }
  },
  modules: {
  }
})