[英]how to import template in vueJs
hy all I have using vue.js & laravel 4 我所有使用vue.js和laravel 4的hy
my quetion is how I can Import template in vue.js and I have try like this but doesnt work 我的问题是如何在vue.js中导入模板,但我已经尝试过了,但是没有用
// define some components //var Foo = Vue.extend({ // template: '<p>This is foo!</p>' //}) //I have change like this var Foo = Vue.extend({ template: require('url/mylayout.html'); })
thanks 谢谢
Anyone coming through this post : I recently had something similar but with Laravel 5.1. 通过这篇文章的任何人:我最近有类似的东西,但使用Laravel 5.1。
1) define a component (eg. Grid.vue may be resource/assets/js/components/Grid.vue ) 1) 定义一个组件(例如Grid.vue可以是resource / assets / js / components / Grid.vue)
<template id="grid">
<table class="table">
<thead>
<tr>
<th v-for="key in columns"
@click="sortBy(key)"
:class="{active: sortKey == key}">
{{key | capitalize}}
<span class="arrow"
:class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="
entry in data
| filterBy filterKey
| orderBy rank sortOrders[rank]">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
</tbody>
</table>
<script>
// register the grid component
export default {
template: '#grid',
props: {
data: Array,
columns: Array,
filterKey: String
},
data: function () {
var sortOrders = {};
this.columns.forEach(function (key) {
sortOrders[key] = 1
});
return {
sortKey: '',
sortOrders: sortOrders
}
},
methods: {
sortBy: function (key) {
this.sortKey = key;
this.sortOrders[key] = this.sortOrders[key] * -1
}
}
};
</script>
2) In resource/assets/js/yourcustomvue.js 2) 在resource / assets / js / yourcustomvue.js中
import Grid from './components/Grid.vue';
new Vue({
el: '#results',
components: {Grid},
data: {}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.