Vue基础语法

指令

1.1 数据绑定指令

v-text 填充纯文本（相比插值表达式更简洁）v-html 填充HTML片段 存在安全隐患本网站内部数据可以使用，第三方数据不可用。 v-pre 填充原始信息 1. 显示原始信息跳过编译过程v-once 只编译一次 应用场景：显示的信息后续不需要修改。

1.2 双向数据绑定

v-model指令用法 <input type='text' v-model='username'/>

1.3 事件绑定

v-on 指令用法 <input type='button' v-on:click='num++'/> <input type='button' v-on:click='demo'/> 默认会传递事件对象作为函数第一个对象 <input type='button' v-on:click='demo(参数1，参数2，$event)'/> 最后一个参数为事件对象（固定名字为$event） v-on 简写 <input type='button' @click='num++'/>

1.4 事件修饰符

.stop 阻止冒泡 <a v-on:click.stop='demo'>跳转</a> .prevent 阻止默认行为 <a v-on:click.prevent='demo'>跳转</a>

1.5 按键修饰符

.enter回车键 <input type='button' v-on:keyup.enter='submit'/> .delete删除键 <input type='button' v-on:keyup.delete='demo'/>

1.6 属性绑定

v-bind使用 <a v-bind:href='url'></a> <a :href='url'></a>

1.7 样式绑定

1.7.1 class样式处理

对象语法 <div v-bind:class='{active: isactive}'></div> 数组语法 <div v-bind:class='[active,demo]'></div>

1.7.2 style 样式处理

对象语法 <div v-bind:style='{font-size: fontstyles}'></div> 数组语法 <div v-bind:style='[fontstyles,widthstyles]'></div>

1.8 分支循环结构

1.8.1 分支结构

v-ifv-elsev-else-ifv-show

1.8.2 v-if和 v-show区别

v-if控制是否渲染到页面；v-show控制已经渲染到页面上的元素是否显示

1.8.3 循环结构

v-for便利数组 <li v-for='item in list'>{{ item }}</li> <li v-for='(item,index) in list'>{{ item }}+"-----"+{{ index }}</li> key的作用：帮助Vue区分不同的元素，从而提高性能。 <li :key='item.index' v-for='(item,index) in list'>{{ item }}+"-----"+{{ index }}</li>

MVVM设计思想

① M （model） ② V （view） ③ VM （View-Model）