说明 ：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性 。
我们先自定义一个 VUE 对象
const vm = new Vue({ el: '#app', data: { list: ['你好', 'how are you', 'how old are you', '<a href="/">请访问百度</a>'], message: 'hello' }, methods: { inputHandler() { console.log('in', this.message) // 向数组中添加一项 this.list.push(this.message) // 清空输入框内容 this.message = '' } } })我们后面的操作还是在 id 为 app 的 div 里进行：
<div id="app"> ... </div>①、v-for ：
<ul> <!-- <li v-for="item in list" v-html="item"></li> --> <li v-for="item in list">{{item}}</li> </ul>遍历渲染，语法 v-for=“item in arrayOrObject” 或 v-for=“item of arrayOrObject”
注意，对数组的更新检测：
仅当直接调用 splice、push、pop、unshift、shift、sort、reverse 这些方法（变异方法：会导致原数组本身受到影响）对数组进行操作时，在视图中才会响应式渲染列表内容。
key 属性：使得 Vue 能够识别唯一元素，在元素复用时可以正确找到待复用的元素。如果不使用 key，在 Vue 中有一个就地复用策略（主要是为了提升渲染效率），但这一点很多时候不符合实际需求，所以通常在使用 v-for 实现列表渲染时，需要为每一项都添加唯一的 key 属性绑定，注意，在为列表项绑定 key 值的时候，不能使用数组下标索引去绑定。
<li is="router-link" tag="li" v-for="category in categories" :key="category.id" :to="'/category/subcategory/' + category.id" > {{category.name}} </li>②、v-pre
<div v-pre>{{ abcdefg }}</div> // ==> {{ abcdefg }}将 vue 中内容原样显示 ③、v-once
<div v-once>{{ message }}</div> // ==> hello仅渲染一次，不再做响应式渲染 ④、v-cloak
解决页面闪烁问题：从未编译显示原始布局的状态到编译后渲染成实际视图状态的过程中可能出现页面闪烁情况。 一般将 v-cloak 配合 css 样式一起使用，在 css 样式中将有使用 v-cloak 属性的元素先隐藏，当编译结束后，会自动将元素中的 v-cloak 删除（这时 css 样式不再起作用）
<style> [v-cloak] { display: none; } </style> <div id="app" v-cloak> ... </div>⑤、v-model
v-model 是语法糖，用于表单元素中，实现表单元素的数据双向绑定，下面两个 input 相同
<div id="app"> <input type="text" placeholder="请输入" v-model="inputValue" /> <input type="text" placeholder="请输入" :value="inputValue" @input="inputHandler" /> <div>{{ inputValue }}</div> </div> <script src="./vue.js"></script> <script> // 创建 Vue 实例，ViewModel const vm = new Vue({ el: '#app', // View data: { inputValue: 'qwe' }, methods: { inputHandler(e) { this.inputValue = e.target.value } } }) </script>