v-bind
【单向数据绑定】
【格式：v-bind:属性名=“data中定义的属性”】
【简写：:属性名=“data中定义的属性”】

跳转百度 // 普通字符串赋值跳转到百度页面1 // 标准写法跳转到百度页面2  // 简写
	

new Vue({el: '#root',data: function () {return {url: 'http://www.baidu.com'}}
});

v-model
【双向数据绑定，一般用于表单元素上】
【格式：v-model:value=“data中定义的属性”】
【简写：v-model=“data中定义的属性”】

  普通字符串赋值（文本框中的默认值） // 标准写法 // 简写
	

new Vue({el: '#root',data: function () {return {username: 'wuwu'}}
});

v-on
【绑定事件处理函数】
【格式：v-on:事件类型=“事件处理函数”】
【简写：@事件类型=“事件处理函数”】

点击   // 原生js绑定事件方式点击 // 标准写法，无参数可以不写()点击 // 简写

new Vue({el: '#root',data: function () {return {count: 1}},methods: {show() {console.log(this.count);}}
});

v-if、v-else-if、v-else
【创建和删除一个元素】
【与js中的if、else if、else逻辑相同，三者搭配使用时，需要紧挨在一起，中间不能被其他元素分割】
【格式：v-if=“属性或表达式”、v-else-if=“属性或表达式”、v-else】

这是一段文字1
  // 不成立
这是一段文字2
 // 成立
上方都不成立时，显示此节点
 // 上方代码成立，此行不会被执行

v-show
【显示和隐藏一个元素】
【底层是通过display属性实现的，节点存在于页面中，只是被隐藏了】
【格式：v-show=“属性或表达式”】

这是一段文字
 // 显示
这是一段文字
 // 隐藏
这是一段文字
 // 显示

new Vue({el: '#root',data: function () {return {isShow: true}}
});

v-for
【遍历数组、对象、字符串（比较少用）、次数（比较少用）】
【格式：v-for="(item, index) in arr; :key=“唯一值”】

{{item.id}}---{{item.name}}---{{item.age}}
{{key}}---{{value}}
{{index}}---{{item}}
{{index}}---{{item}}

new Vue({el: "#root",data: function () {return {arrList: [{id: 1,name: 'wuwu',age: 18}, {id: 2,name: 'tt',age: 19}],objs: {name: 'wuwu',age: 18,study: 'vue'},str: 'hello World'}}
});