vue的基础语法

mvvm

• MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel

• m model 数据

  • 数据层 Vue 中 数据层 都放在 data 里面

• v view 视图

  • Vue 中 view 即 我们的HTML页面

• vm （view-model） 控制器 将数据和视图层建立联系

  • vm 即 Vue 的实例 就是 vm

 

指令（本质就是自定义属性 v-开头）

v-cloak　　防止页面加载时的闪烁问题，结合css使用

[v-cloak]{
　　display: none;
}

v-text　　将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题

v-html　　用法和v-text 相似 但是他可以将HTML片段填充到标签中，有安全问题，不在用户提交上使用

v-pre　　显示原始信息跳过编译过程，一些静态的内容不需要编译加这个指令可以加快渲染

v-once　　执行一次性的插值（当数据改变时，插值处的内容不会继续更新）

v-model　　双向数据绑定（限制在 <input>、<select>、<textarea>、components中使用）

• 当数据发生变化的时候，视图也就发生变化

• 当视图发生变化的时候，数据也会跟着同步变化

v-on　　用于绑定事件，v-on:click可以缩写为@click

事件修饰符：

 

按键修饰符：

 

 自定义按键修饰符别名：

 

 v-bind：响应地更新 HTML 属性，v-bind：class可以简写为：class

 

 绑定对象和绑定数组的区别：

 

 分支结构

v-if　　多个元素 通过条件判断展示或者隐藏某个元素。进行两个视图之间的切换。

v-show 和 v-if的区别

• v-show本质就是标签display设置为none，控制隐藏

  • v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

• v-if是动态的向DOM树内添加或者删除DOM元素

• v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

循环结构

v-for　　用于循环的数组里面的值可以是对象，也可以是普通元素

• 不推荐同时使用 v-if 和 v-for

• 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

 

key 的作用   :key="item.id"

• key来给每个节点做一个唯一标识
• key的作用主要是为了高效的更新虚拟DOM