总结:v-bind,v-if,v-for,v-on,{{}},v-model
        ①v-bind绑定数据:标签属性v-bind:title='xxx',简写:title='xxx', 标签内容{{xxx}}
         <span :title='message'>{{message}}</span>
        ②v-on绑定事件:<span v-on:click='clickMe'>点我</span> 或简写 <span @click='clickMe'>点我</span>
        ③显示和隐藏:<span v-if='xxx'>显示和隐藏</span> ,注,xxx可以为表达式或者是Boolean后为true或false的其他值
          v-if='undefined == null',v-if='-1'都为true。 v-if='null',v-if='undefined',v-if='0'都为false
        ④v-if遍历:<span v-for='item in array'>{{item}}</span> 或 <span v-for='(item,index) in array'>{{index}}</span>
        ⑤v-model数据双向绑定:<input v-model='message'></input><p>{{message}}</p>
        ⑥创建vue实例语法
          引入vue库
         let app = new Vue({
            el: '#id',
            data: {
              message: '你还好吗?'
            },
            methods: {
              //this指app实例,可通过控制台app.message = '好久不见',  直接修改页面内容
              clickMe:function(e){
                this.message = this.message.split('').reverse().join('')
             }
           }
         })

https://www.cnblogs.com/chosen-chen/p/11245529.html

posted on 2020-01-07 18:01  啦啦啦12345  阅读(952)  评论(0编辑  收藏  举报