专栏首页老付的网络博客Vuejs template快速入门

Vuejs template快速入门

一直想写一个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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 推荐一个jekyll博客模板

    本人用的模板是基于Codeboy的博客模板改造模板,(由于本人可能会有很多样式修改,所以不再将修改pullrequst到原项目,在此对codeboy模板表示感谢...

    付威
  • Java多线程通信lock和wait

    在Java多线程中有一对配合使用过的两个方法,来实现线程间通信的功能–lock和wait, 由于这个需要获得锁,所以必须结合synchronized一起使用。首...

    付威
  • Tomcat不安全字符的处理

    做项目的时候碰到一个问题,就是Tomcat在处理含有|,{,}的字符的Url时候,发现请求没有到达指定的Controller上面,而在Access_log中写入...

    付威
  • 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,...

    张果
  • 界面无小事(四):来写个滚动选择器吧!

    SeanDepp
  • 大数据分析技术在新型智慧能源建设中的应用

    智慧一概念已经提出很多年,这是一种全新的能源形式,包括符合生态文明和可持续发展要求的相关能源技术和能源制度体能源这系。智慧能源是以互联网技术为基础,以电力系统为...

    IT小白龙
  • 大数据分析在新型智慧能源建设中的应用

    智慧一概念已经提出很多年,这是一种全新的能源形式,包括符合生态文明和可持续发展要求的相关能源技术和能源制度体能源这系。智慧能源是以互联网技术为基础,以电力系统为...

    IT小白龙
  • Spring技术知识点总结之二——SpringMVC DispatcherServlet

    剑影啸清寒
  • CTF实战30 CTF题目练习和讲解五(讲解部分)

    该培训中提及的技术只适用于合法CTF比赛和有合法授权的渗透测试,请勿用于其他非法用途,如用作其他非法用途与本文作者无关

    用户1631416
  • 开发 | 用 4 天时间,他撸了一个「星巴克」同款小程序

    当我们还在家中吹着空调,敲着代码,吃着西瓜的时候,可能你的她还在炎炎夏日下大汗淋漓……

    知晓君

扫码关注云+社区

领取腾讯云代金券