vue 笔记

v-cloak

<style>
[v-cloak]{
	display:none;
}
</style>
//解决 闪烁问题
<p v-cloak> {{mas}}</p>

v-text

<p v-text="mas"></p>
// 默认  v-text 是没有闪烁问题
// 覆盖元素 里面的所有内容

v-html

//内容当做html

v-bind

 v-bind:属性 = "dataVar"
 :属性 ="dataVar" 
 //v-bind 可以写表达式

v-on

关键词  v-on:eventName = "methodsName"  
快捷键 @:eventName = "methodsName"

事件修饰符

.stop
.prevent
.capture
.self
.once

 阻止单击事件冒泡
<a v-on:click.stop="doThis"></a>
 提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
 修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
 只有修饰符
<form v-on:submit.prevent></form>
 添加事件侦听器时使用事件捕获模式
<div v-on:click.capture="doThis">...</div>
只当事件在该元素本身（而不是子元素）触发时触发回调
<div v-on:click.self="doThat">...</div>

click 事件只能点击一次
<a v-on:click.once="doThis"></a>

v-model

<input type="text" v-model="mag">
// 实现数据的双向绑定
//只能用于表单元素

使用内联样式

v-for

迭代数组
    <P v-for="(item,i) in one">{{item.id}} ---{{i}}</P>

迭代对象
<p v-for="(val,key,i)">{{val}}值---{{key}}值所对应的名字---{{i}}索引 </p>

迭代数字
<p v-for="sun in 10">{{sun	}}</p>

key  //保证数字唯一性
//key 属性只能使用 number获取string
//key 在使用的时候，必须使用v-bind

<p v-for="user in users" :key="user.id">
            <input type="checkbox">
            {{user.id}}---{{user.name}}
</p>

v-if v-show

<input type="button" value="toggle" @click="flag=flag">
<h3 v-if="flag">这是if</h3>
<h3 v-show="flag">这是show</h3>

// v-if 特点 ：每次重新删除或创建元素
// v-if 有较高的切换性能消耗  频繁切换不用v-if

// v-show 特点：每次不会重none新进行Dom的删除和创建，只切换元素的disdisplay：none
// v-show 有较高的初始消耗 永远不会显示推荐使用v-if

过滤器

vue.filter('过滤器名称'，function(data,two){})  //全局  第一个参数规定死的，传过来的参数  后面可以传值
filters:{
		过滤器名称:function(data){}	
}		//局部

<!-- 过滤器调用格式  {{name | 过滤器名称(two)}}-->
<!-- 过滤器调用采用就近原则-->

自定义指令

钩子函数

<p v-color="'red'">一二三四</p>


Vue.directive("指令名称   color",{
	bind:function(el，binding){       //bind当指令绑定到元素上时，会立即执行这个bind 只执行一次
		 //第一个参数，永远是el， 表示绑定了指令的那个元素
         //bind 还没有插入到DOM中去
         //样式相关 一般放bind
         console.log(el.parentNode)  //null
         el.style.color=binding.value
	},
	inserted:function(el,binding){		 /inserted 表示元素 插入到DOM中的时候 会触发一次
		 //行为相关 放在inserted
		  console.log(binding.value)
	},
	
	updated:function(el,binding){	//updated 当VNode更新的时候，会执行 updated 可能会执行多次
	}
})

生命周期

<h1 id="app">{{mga}}<h1>
var vw = new Vue({
	el:"#app",
	data:{
		mga:"sssss"
	},
	beforeCreate:{},		//表示实例完全被创建出来之前，会执行它  data，methods中的 数据还没有初始化
	created:{},		//  data，methods都已经被初始化好
	beforeMount:{
		console.log(document.getElementById('h3').innerText)
	},		// 表示已经在内存编译完成 但没有渲染到页面中   显示出来的只是之前模板中的字符串
	mounted:{},		//   内存中的模板已经渲染到页面中  显示渲染内容
		
	beforeUpdate:{},		//数据发现改变 显示以前的内容
	updated:{},		//数据发现改变 显示现在的内容
	beforeDestroy:{},		//没销毁
	destroyed:{}			//销毁后
})

vue 发起 get post jsonp请求 //axios

//1.1基本使用
axios({
	url:'地址',
	method:'get',  //method 指定get 或者 post请求
	params:{ //专门针对get请求的参数拼接
		type:'pop',
		page:1
	}
}).then(res => {
	console.log(res)
)}

//1.2 axios 发送并发请求
axios.all([
	axios({
		url:"地址1"，
	})，
	axios({
		url:"地址2",
		params:{
			type:"pop",
			page:1
		}
	})
]).then(res=>{
	console.log(res[0])
	console.log(res[1])
})

//创建对应的axios的实例
 const instance1 = axios.create({
   baseURL: 'http://106.54.54.237:8000/api/hy',
   timeout: 5000
 })

 instance1({
   url:'/home/multidata'
 }).then( ress=>{  
   console.log(ress)
 })

---

import axios from 'axios'

export function request(config){
    //1.创建axios的实例
    const instance = axios.create({
        baseURL: 'http://106.54.54.237:8000/api/hy',
        timeout: 5000
    })

    //2.axios的拦截器 
    //2.1请求拦截的作用
    instance.interceptors.request.use(config => {
     //   console.log(config);
        // 1.config 信息不符合要求

        // 2.每次发送网络请求时，都希望在界面中显示一个请求图标

        // 3.某些网络请求(比如登录(token)),必须携带一些特殊的信息

        return config
    },err=>{
        console.log(err)
    })

    //2.2响应拦截
    instance.interceptors.response.use(res=>{
     //   console.log(res);
        return res.data
    },err=>{
        console.log(err)
    })

    //3.发送真正的网络请求 
    return instance(config)

}

import {request} from './netwirk/request';

request({
  url:'/home/multidata'
}).then(res => {
  console.log(res)
}).catch(err =>{
  console.log(err)
})

动画

css 过度

<transition>
	<p v-if="show">hello</p>
</transition>
.v-enter,			//如果标签有name 那么把 v 改为 name
.v-leave-to{
}
v-enter-active,
v-leave-active{
}

@

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

<transition-group appear>  //appear 页面入场效果
	<p v-for="item in mag" :key="item.id">{{item.id}}</p>  
	如果是一组标签就在tansition后面加group
	动画效果必加key
</transition-group>

组件

创建全局组件

<!-- 通过 mode 属性，设置组建切换时的 模式-->
<transition mode="out-in">
	<component :is="组件名称"></component>
</transition>


<组件名称></组件名称>  
Vue.component("组件名称"，{
	template:"<h1>AAA</h1>"
})		//组件只能有唯一一个根元素

私有组件

<div id="app">
       <asd @ffunc="bigShow" :props1="mag"></asd>
</div>   //组件绑定方法
-------
 var vm = new Vue({
            el:"#app",
            data:{
                mag:"获取data里面的数据:propsname=\'dataname\'"   //可读可写
            },
            methods:{
                bigShow(data){
                    console.log("我觉得会失败"+data)
                }
            },
            components:{
                asd:{
                    template:"<h1 @click='afunc'>这是一练习+++{{props1}}</h1>",
                    props:['props1'],			//只读
                    methods:{
                        afunc(){
                            this.$emit('ffunc',"，但是成功了")
                        }
                    }
                }
            }    
        })

ref获取DOM元素

<h1 ref="myH1">ref获取DOM元素</h1>

methods:{
	ref(){
		this.$refs.myH1.innerText   //获取文本
	}
}

路由

<router-link to='/right?id=7' tag=''>right</router-link>   //tag=''可以更换标签 span，a.....       ?id=xx 传递参数
<router-link to='/left' >left</router-link>
<router-view></router-view>      //占位符

var right =  { 
				template:'<h1>Right..............{{$route.query.id}}.....</h1>'，// $route.query.XX获取参数。输出7
				created(){
                	console.log(this.$route)
            	}
            };
var left = { template:'<h1>left...................</h1>'};

var rAbc = new VueRououter({
	routes:[
				{path:'/',redirect:'/right'},  //默认跳转
                {path:'/right',component:right},
                {path:'/left',component:left,
				 children:[ {path:'不要斜线地址名',component:right},] 
				}
            ]，
    linkActiveClass:"classNmae"   //更改选中的t-l 类名
}) 
var vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:rAbc
        })

routes:[
                {path:'/right',components:{			//嵌套多个组件
	                name1:right，
	                name2:left
				}
     	 } ]，
    linkActiveClass:"classNmae"   //更改选中的t-l 类名
}) 

<router-view name="name1"></router-view>
<router-view name="name2"></router-view>

watch computed methods

watch

watch:{
	"$route.path":function(newVal,oldVal){          //获取新数据 和 old数据
		 if(newVal==="/left"){
			console.log("你点开的是left")
		}else if(newVal==="/right"){
			console.log("你点开的是right")
			}
		}
    }

computed

 computed: {
    // 计算属性的 getter  
    reversedMessage: function () {		//单独定义变量。只要里面的任何数据发送变化都会启动这个函数
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')  //必须要return
    }
  }