数据双向绑定:v-model=""
访问元素:app.$el,app为Vue实例,通过$el访问Vue绑定对象的html元素,同document.getElementByName、Id、TagName、ClassName所取得的对象一样
插值与表达式:{{ }}
过滤器:{{ data | filter }}
跳过数据绑定:v-pre
示例代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="name" placeholder="your Name"> <!-- v-model 数据绑定 --> <!-- placeholder 缺失占位符 --> <h1>Hello , {{ name }}</h1> <div> {{ num / 10 }} </div> <div> {{ isOk ? ‘Ok‘ : ‘!OK‘ }} </div> <div> {{ num | filterA(‘A‘) | filterB(‘B‘) }} </div> <div v-pre> {{ 此处不会被编译 }} </div> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> var app = new Vue({ el: "#app", data: { name: ‘‘, num: 100, isOk: false }, filters: { filterA: function (e1, e2) { return e1 + e2 // 第二个参数为filter传入的参数 // 此处将return 100A }, filterB: function (e1, e2) { return e1 + e2 } } }) console.log(app.$el.innerHTML) </script> </body> </html>
原文:https://www.cnblogs.com/MobiusMap/p/13574386.html