Vue instruction learning and vue instruction

Vue instruction learning and vue instruction

# New Vue ({All vue data is stored in data # data: {vue object data # a: 1, object # B: [], #}# methods: {vue object method # dosomthing: function () # {# this. a ++ # console. log (this. a) #}##}# watch: {vue object listener # 'A': function (val, oldVal) {# console. log (val, oldVal) ##}###}) # Data Rendering v-text, v-html, {{}# <p >{{ a }}</p> a # <p v-text = "a"> </p> # <p v -html = "a"> </p> html stores the html structure # Here, a corresponds to a in the Vue data source # the control module hides v-if, v-show, # <p v-if = "isShow"> </p> # <p v-show = "isShow"> </p> # new Vue ({# data: {# isShow: true, #}#}) # difference if this dom element show is not rendered through the display of css: none hides the element # rendering loop list v-for # <ul> # <li v-for = "item in items" >#< p v-text = "item. label "> </p> # </li> # </ul> # data: {# items: [# {label: 'apple'}, # {label: 'banana '}, #] #}# event binding v-on # <button v-on: click = "doThis"> </button> # <button @ click = "doThis"> </button> # methods :{# doThis: function (something) {##}#}# property binding: v-bind # #< div: class = "{red: isRed} "> </div> # <div: class =" [classA, classB] "> </div> # <div: class =" [classA, {classB: isB, classC: isC] "> </div>