在非NodeJS项目里使用Vue

<!DOCTYPE html>
<html>
<head>
  <title>DEMO</title>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <my_template :datas="books"></my_template>
    <br>
    <my_template :datas="cars"></my_template>
  </div>

  <!-- 定义利用的模板 -->
  <script type="text/x-template" id="tpl">
    <ul>
      <li v-for="_data in datas"> - </li>
    </ul>
  </script>

  <script>
    // 在Vue中注册模板
    Vue.component('my_template', {
      props: ['datas'],
      template: '#tpl'
    });

    new Vue({
      el: '#app',
      data: {
        books: [{
          name: 'Tomcat',
          price: 20
        }, {
          name: 'Jetty',
          price: 22
        }, {
          name: 'Spring',
          price: 40
        }],
        cars: [{
          name: 'BMW',
          price: 1000000
        }, {
          name: 'AUDI',
          price: 2000000
        }]
      }
    })
  </script>
</body>
</html>

在非NodeJS项目里使用Vue

引入JS

用法

运行结果

参考

在非NodeJS项目里使用Vue

引入JS

用法

运行结果

参考

相关文章