在django或flask带的jinja2模版中使用vue和el

2021-03-19  本文已影响0人  老周_o_o

1,head标签中加上:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.1/index.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css"  rel="stylesheet">

2,在需要用的地方加上id,使用[[]]包上变量,可同时使用jiaja2变量:

    <div id="app">
        <el-button @click="toggleSelection">[[name]]</el-button>
    </div>

3,js里面构造实例vm:

var vm = new Vue({
el: '#app',
  delimiters:['[[', ']]'],
  methods: {
      toggleSelection() {
          alert("hahaha")
      }
    },
    data: {
        name: '可爱的按钮'
    }
})

 // 在后面的逻辑中可更改data,如 vm.name = 999  

上一篇下一篇

猜你喜欢

热点阅读