vue源码实现：参数如何传递，绑定，保存到缓存，双向绑定，标签行为，指令，过滤器，匿名函数，监听，路由配置，组件通信，http请求,插值

1、v-bind的几种写法。

<div v-bind:class="class1"></div>
<div :class="class1"></div>


<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      //divClass样式名称
      class1: "divClass"
    };
  }
};
</script>

2、click，默认参数和额外参数的传递。
传入指定的参数

 <button @click="test('aa')">测试方法传值</button>
 methods:{
    test(value){
      alert(value)
    }
  }

函数默认的参数

   <button @click="test">测试方法传值</button>
	 methods:{
	 //现在这个函数的默认参数就是事件对象
	    test(obj){
	      alert(obj)
	    }
	  }

指定传入参数并且保留函数的默认参数

   <button @click="test($even,'aa')">测试方法传值</button>
	 methods:{
	    test(obj,value){
	      alert(obj);
	      alert(value);
	    }
	  }

3、消除事件冒泡和标签默认行为以及按键绑定。

 //去除事件冒泡
    <div @click="test('a')" class="out">
      <div @click.stop="test('b')" class="inner"></div>
    </div>

//去除html标签的默认行为
<a href="http://www.baidu.com" @click.prevent="test('a')">跳转到百度</a>


//绑定指定的按键事件，当按enter键才会触发test函数
<input @keydown.enter="test('a')"/>

4、自定义指令。
自定义指令

<script>
	import Vue from 'vue'
	//自定义指令，最终使用就是v-test，el表示的就是使用的html标签，obj就是标签中传递过来的值
	Vue.directive("test",function(el,obj){
	  alert(el);
	  alert(obj.expression);
	  console.log(obj);
	})

5、自定义过滤器实现格式化属性值。

<input v-model="formatText"/>
//这个defFilter就是自定义的过滤器
    <div>{{formatText|defFilter}}</div>


<script>
import Vue from 'vue'

自定义过滤器格式化数据，defFilter自定义filter的名称

Vue.filter("defFilter",function(value){
  return value+"格式化之后的";
})
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      //divClass样式名称
      class1: "divClass"，
      formatText:""
    };
  }
};
</script>

6、表单属性双向绑定，注意多选框和下拉框的属性值绑定 。

<tr v-for="(item ,index) in list" :key="index">
    <td>
      <input type="checkbox" :value="index" />{{item.name}}
    </td>
</tr>

<script>
	export default{
		data(){
			return{
				list:[
			        {
			          name:"张三",
			          age:25
			        },
			        {
			          name:"李四",
			          age:23
			        }
			      ]
			}
		}
	}
</script>

7、vue操作css3的动画属性。
8、vue通过ref操作dom元素。

<button @click="getObj">通过ref获取元素</button>
<span ref="aa">aaa</span>


 getObj(){
	  alert(this.$refs.aa);
 }  	

this.$refs表示页面上的所有标签。

9、匿名函数转箭头函数。

//匿名函数
function(){
	alert("aa");
}

//将上方的匿名函数转成箭头函数的形式

()=>{
	alert(“aa”)；
}

10、vue的生命周期函数(勾子函数)。
beforeCreate：组件实例刚被创建，组件的属性计算之前执行。
created：组件实例创建完成，属性已经被绑定，dom未生成，$el属性还不存在。
mounted：页面的dom元素已经生成之后，页面还没有展示出来之前执行。
beforeDestroy：vue的组件元素销毁之前执行。
computed：当属性变化时调用，计算属性。

11、vue的常用一些指令例如：v-if,v-else，v-show、v-for。

v-if一般和v-else搭配使用。

v-for一般用于遍历集合。

v-show使用：
<div v-show="flag">显示</div>
 <div v-show="flag2">隐藏</div>
 <script>
		data() {
		    return {
		      flag:true,
		      flag2:false
		    }
	    }
</script>

v-show：使用的是display做的显示隐藏。
v-if和v-else：直接把不显示的标签给去掉了，并不是使用display做的。

12、更新数组内部的值，不触发数组值监听绑定，导致页面的值显示不正确。
假设数组中有一些自定义的元素，如果修改的是数组的中的元素中的属性的值的话，默认vue监听不到数据的变化，也就不会触发数据的渲染。页面也就不能实现刷新的效果。

method:{
	change(){
		//修改这个元素的值页面的数据无变化
		this.aas[3]=234;
		
		//解决方式1
		//局部更新元素
		//其实就是重新调用aas数组的set方法在赋值一遍，让他触发数据修改的监听
		Vue.set(this.aas,3,this.aas[3])
		
		
		//解决方式2
		//vue重写了这些方法，当调用这些方法时会触发vue的监听
		 // push(),pop(),shift(),unshift(),splice(),sort(),reverse()
		 this.aas.splice(aas,1,234)
	}
	
}

13、测试属性的get，set方法。
14、测试属性监听，$watch属性方法，computed计算属性，Watch监听。
15、路由：路由组件、非路由组件。

1、路由组件：路由组件一般被放在views文件夹下，在router中注册过的。
2、非路由组件：非路由组件一般放在component文件夹下，没有在router中注册。

16、组件通信的几种使用。
方式1
1、Pub-Sub.js插件

方式2
2、通过标签的name传递数据，然后接收的地方法使用prop去接受。
例如：

router中注册
   export default new Router({
   	  routes: [
   	     {
   	      path: '/text',
   	      name: 'text',
   	      component: text
   	    }, 
   	    {
   	      path: '/text/:id',
   	      component: param
   	    }
   	  ]
   	})

页面中传递数据：
访问路由的时候这样访问：
/text/12

子页面接收数据：

this.$route.params.id接收到的数据就是12了。

方式3
3、通过拼接路由去传递数据。

方式4
子组件、父组件发送消息

4、$emit发布，$on订阅有点类似于Pub-Sub.js的使用。

组件：

<button  @Click="sendMessage"></button>

<script>
	method:{
		sendMessage(){
			//获取子组件自定义事件传递的数据，test
			this.$emit("test","传递的数据")
		}
	}
</script>

子组件：

<button  @test="testMethod"></button>
<script>
	method:{
		testMethod(data){
			//这里得到的值就是：传递的数据
			alert(data);
		}
	}
</script>

父组件向子组件传递数据：

//父组件,自定义属性传递数据库，title就是自定义的属性

//子组件

<child  props=“父组件中的自定义的属性名”></child>

17、solt的使用。
1、子组件使用solt插槽定义占位符。
例如：

	<solt   name="test">

2、父组件填充内容。

这样就会把这个div填充到solt插槽中了。

18、vue的一些内置属性：

el，$ el，$ ref，$el可以操作dom元素

19、编程式路由
//编程式路由常用的几个方法：

push：添加一个路由到栈顶。
replace：替换栈顶的路由。
back：回退路由。

例如：

this.$router.push("/page2");

20、路由缓存
使用keep-alive标签包裹router-view。
最常见的一个功能就是，做选项卡切换的时候，页面的值还保留之前的值。
例如：

<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

21、路由嵌套
路由嵌套实际上就是在在一个路由内部在注册一个路由。
例如：

export default new Router({
  routes: [
    {
      path: '/first',
      name: 'HelloWorld',
      component: HelloWorld,
      children:[
        {
          path:'/child',
          name:"test",
          component:heightClass
        }
      ]
    }
  ]
})

这时候访问child路由组件就需要这样子访问了：
/first/chid

22、router-link和router-view标签

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
    <!-- router-link 定义点击后导航到哪个路径下 -->
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <!-- 对应的组件内容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>

23、插值

{{num}}

————————————————

版权声明：本文为CSDN博主「tofacebook.com」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：http://www.tofacebook.com/post/16379