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>(本文完)
作者:老付 如果觉得对您有帮助,可以下方的订阅,或者选择右侧捐赠作者，如果有问题，请在捐赠后咨询，谢谢合作 如有任何知识产权、版权问题或理论错误，还请指正。 自由转载-非商用-非衍生-保持署名,请遵循：创意共享3.0许可证 交流请加群113249828：点击加群 或发我邮件 laofu_online@163.com
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-01-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录