Vue中那些自带属性

  1. 首先不能不说就是他的$emit方法,下面以子组件向父组件传值为例。。。
<!DOCTYPE html>
<html>
<head>
	<title>vueReivew05</title>
	<script src='vue2.js'></script>
	<script src='vue-router3.js'></script>
	<script type="text/javascript">
		window.onload=function(){
			//定义全局组件
			Vue.component('hello',{
				template:
			   `

hello

`
, data(){ return { msg:'hello' } }, methods:{ send(){ this.$emit('func',this.msg); } } }); var vm=new Vue({ data:{ }, methods:{ getMess(data){ console.log(data); } } }).$mount('div'); } </script> </head> <body> <div> <hello @func='getMess'></hello> </div> </body> </html>
  1. $refs属性,更方便我们取出Dom元素
<!DOCTYPE html>
<html>
<head>
	<title>vueReivew05</title>
	<script src='vue2.js'></script>
	<script src='vue-router3.js'></script>
	<script type="text/javascript">
		window.onload=function(){
			var vm=new Vue({
               data:{

               },
               methods:{
                   getMess(data){
                      console.log(data);
                   },
                   res(){
                   	console.log(this.$refs.myPar.innerHTML);
                   }

               }
			}).$mount('div');
		}
	</script>
</head>
<body>
<div>
	<p ref='myPar'>this is about home story!!!</p>
	<button @click='res'>res with ref</button>
</div>
</body>
</html>
  1. $route属性
<!DOCTYPE html>
<html>
<head>
	<title>vueRouter03</title>
	<script src='vue2.js'></script>
	<script src='vue-router3.js'></script>
	<script type="text/javascript">

		window.onload=function(){

          var login={
          	template:'#login',
          	methods:{
          		res(){
          			console.log(this.$route.params.id);
          			console.log(this.$route.query.name);
          			console.log(this.$route.query.age);
          		}
          	}
          }

           var router=new VueRouter({
           	    routes:[
                   {
                   	path:'/login/:id',
                   	component:login
                   }
           	    ]
           })

			var vm=new Vue({
				router:router		
			}).$mount('div');

  		}
	</script>
</head>
<body>

  <div>
  	<router-link to='/login/12?name="zhu"&age=15'>login</router-link>
  	<router-view></router-view>
  </div>

  <template id='login'>
  	<div>
  	<h1>login success</h1>
  	<button @click='res'>click me</button>
  	</div>
  </template>
</body>
</html>

你可能感兴趣的:(Vue,前端)