``` import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store'
Vue.config.productionTip = false
new Vue({ el: '#app', template: <div> <div v-show='active'>{{text}}</div> <div v-if='active'>{{'Text:'+' '+ text}}</div> <div v-text='"v-text:"+" " + text'></div> <div v-text='"v-text Text:" + " " + text'></div> <div v-html='html'></div> <div v-pre>{{'v-pre示例' + picked}}</div> <div>{{'Picked：' + picked}}</div> <input type='text' v-model.number='text'> <ul> 数组： <li v-for='(item, index) in arr' :key='item'>{{item}}--{{index}}</li> </ul> <ul> 对象： <li v-for='(value, key, index) in obj' :key='key'>{{value}}--{{key}}--{{index}}</li> </ul> 控制显示: <input type='checkbox' v-model='active'> <div> 控制数组： <input type='checkbox' :value='1' v-model='arr'> <input type='checkbox' :value='2' v-model='arr'> <input type='checkbox' :value='3' v-model='arr'> </div> <div> 控制picked： <input type='radio' value='one' v-model='picked'> <input type='radio' value='two' v-model='picked'> <input type='radio' value='three' v-model='picked'> </div> </div> , data:{ text: 0, html: 'this is html', active: true, arr: [1,2,3], obj:{ a: '123', b: '456', c: '789' }, picked: '点击下面的“控制picked”' } })
// v-show: DOM节点是存在的，只是隐藏了而已, display: none。 // v-if v-else-if v-else: DOM节点是不存在的，每次都会动态的增删操作节点，动态的节点会触发整个页面的重绘以及重新排版，如果动态节点太多的话，算是比较耗时的一个操作，性能不好。 // v-text: 当不需要拼接内容的时候使用，如果需要拼接很多内容，推荐使用 {{}} 的方式。 // v-for: 一定需要记得绑定 key // v-once: 标记的节点初始化之后则不会在变化，无论怎么修改都不会在变化 // v-pre: 标记节点的里面的表达式都不会被解析，会被全部直接展示出来。 {{'v-pre示例' + picked}} // v-model.number 会将输入的内容转场 number // v-model.trim 会将输入的内容去掉首尾空格 // v-model.lazy 输入内容不会立即更新，只有等响应结束之后才会更新，也就是输入完成点击其他区域终止输入的时候更新。 ```
