template.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <meta charset="utf-8">
  2. <div id="usa" v-partial="global"></div>
  3. <div id="japan">{{> local}}</div>
  4. <div id="repeat">{{> repeat}}</div>
  5. <script type="text/v-template" id="test">
  6. <p>{{hi}}!</p>
  7. </script>
  8. <script type="text/v-template" id="repeat-template">
  9. <p v-repeat="items">{{title}}</p>
  10. </script>
  11. <script src="../../../dist/vue.js"></script>
  12. <script>
  13. // Vue.config({debug:true})
  14. // direct usage
  15. var china = new Vue({
  16. id: 'china',
  17. template: '#test'
  18. })
  19. document.body.appendChild(china.$el)
  20. // setting value after compile also works,
  21. // as long as it has appeared in the template
  22. china.hi = '你好'
  23. // extended usage
  24. var Hawaii = Vue.extend({
  25. id: 'hawaii',
  26. template: '#test'
  27. })
  28. var hawaii = new Hawaii()
  29. document.body.appendChild(hawaii.$el)
  30. hawaii.hi = 'Aloha'
  31. // global partial
  32. Vue.partial('global', document.querySelector('#test').innerHTML)
  33. var usa = new Vue({
  34. el: '#usa'
  35. })
  36. usa.hi = 'Hi dude'
  37. // direct partial
  38. var japan = new Vue({
  39. el: '#japan',
  40. partials: {
  41. local: '#test'
  42. }
  43. })
  44. japan.hi = 'こんにちは'
  45. var repeat = new Vue({
  46. el: '#repeat',
  47. partials: {
  48. repeat: '#repeat-template'
  49. },
  50. data: {
  51. items: [{ title: 'Repeat' }]
  52. }
  53. })
  54. </script>