Vuejs template快速入门

老付     2018-01-10   2515   7min  
Vue

一直想写一个Vuejs的系列的博客,苦于一直没有时间,今天的这个博客也是思考了很久,打算随便写点东西,今天说说Vuejs的模版的使用。

Vue模版的使用方法

  1. 直接用Html

    
     <div id="container">
       <mytemp></mytemp>
     </div>
    	 
     <script src="vue.min.js"></script>
     <script>
     Vue.component('mytemp', {
       template: '  <h1>Hello I am Temple</h1>',
    	 
     })
     new Vue().$mount("#container");
    
     </script>
    
    
  2. 使用标签

    
         <div id="container">
           <mytemp></mytemp>
         </div>
         <script   id="temp1" type="x-template">
           <h1>Hello I am Temple</h1>
         </script>
         <script src="vue.min.js"></script>
         <script>
         Vue.component('mytemp', {
           template: '#temp1' 
         })
         new Vue().$mount("#container");
    
         </script>
    
    
    
  3. 使用template标签

    
     <div id="container">
       <mytemp></mytemp>
     </div>
     <template id="temp1">
       <h1>Hello I am Temple</h1>
     </template>
     <script src="vue.min.js"></script>
     <script>
     Vue.component('mytemp', {
       template: '#temp1'
     })
     new Vue().$mount("#container");
    
     </script>
    
    

局部模版

上面我们使用的全局模版,这个模版可以在所有的vue对象中使用,如果我们仅仅想让在当前的vue中生效,就要用局部的模版注册

	 <div id="container">
	  <mytemp></mytemp>
	</div>
	<template id="temp1">
	  <h1>Hello I am Temple</h1>
	</template>
	<script src="vue.min.js"></script>
	<script>
	new Vue({
	  components: {
	    'mytemp': {
	      template: '#temp1'
	    }
	  }
	}).$mount("#container");

	</script>

模版的传值


单项传递

对于我们的传值,我们可以看成父模版向子模版传值,其中vue是父对象,template是子对象,这里我们需要使用props属性,修改我们的额demo如下:

	<div id="container">
	  <mytemp v-bind:myname="name"></mytemp>
	</div>
	<template id="temp1">
	  <h1>Hello I am  Temple</h1>
	</template>
	<script src="vue.min.js"></script>
	<script>
	new Vue({
	  data: {
	    name: "Vue"
	  },
	  components: {
	    'mytemp': {
	      template: '#temp1',
	      props: ["myname"]
	    }
	  }
	}).$mount("#container");

	</script>

注意:props这里尽量使用小写字段,驼峰命名需要转化成-

双向传递

<div id="container">
  <mytemp v-bind:myname.sync="name"></mytemp>
  <h1></h1>
</div>
<template id="temp1">
  <input type="" name="" v-model="myname" /> 
</template>
<script src="vue.min.js"></script>
<script>
new Vue({
  data: {
    name: "Vue"
  },
  components: {
    'mytemp': {
      template: '#temp1',
      props: ["myname"]
    }
  }
}).$mount("#container");

</script>

参考资料:Vue.js——60分钟组件快速入门(上篇)

(本文完)

作者:付威

如果觉得对您有帮助,可以下方的订阅,或者选择右侧捐赠作者,如果有问题,请在捐赠后咨询,谢谢合作

如有任何知识产权、版权问题或理论错误,还请指正。

自由转载-非商用-非衍生-保持署名,请遵循:创意共享3.0许可证

交流请加群113249828: 点击加群   或发我邮件 laofu_online@163.com