Vue 2 入门学习笔记15.内联模板
- 本系列文章为
laracasts.com的系列视频教程——Learn Vue 2: Step By Step 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频，支持正版。- 视频源码地址：github.com/laracasts/Vue-Forms
- 项目初始版本为
Vue 2.1.3，教程还在更新中。
本节说明
- 对应第 15 小节：Inline Templates
本节内容
如果你使用 Laravel 进行开发，你可能会希望将blade模板与Vue组件一起配合使用，inline-template属性可以帮助我们做到这点：当inline-template这个特殊的属性出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。例如：
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
</head>
<body>
<div id="root" class="container">
<process-view inline-template>
<div>
<h1>Your Process is {{ processRate }}%</h1>
<p><button @click="processRate += 10">Update Process</button></p>
</div>
</process-view>
</div>
<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>编写组件：
main.js
Vue.component('process-view',{
data(){
return { processRate:50 }
}
});
new Vue({
el:'#root'
});最终效果会是这样：
关于 LearnKu
粤公网安备 44030502004330号