vue知识点

vue核心

vue简介

vue概念

动态构建用户界面的渐进式 JavaScript 框架

vue特点

1. 采用组件化模式，提高代码复用率、且让代码更好维护
2. 声明式编码，让编码人员无需直接操作DOM，提高开发效率
3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

创建vue

 

MVVM模型

 简介

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，实现了数据双向绑定。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷

 在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理

Vue.js中mvvm的体现

Vue.js的实现方式，对数据（Model）进行劫持，当数据变动时，数据会出发劫持时绑定的方法，对视图进行更新

• Observer相当于Model层观察vue实例中的data数据，当数据发生变化时，通知Watcher订阅者（通过Object.defineProperty将data中的属性添加到vue实例身上，为每个添加到vue实例身上的属性都配置getter和setter，在内部它们让Vue追踪依赖。在属性被访问和修改时通知变化
• Compile指令解析器位于View层，初始化View的视图，将数据变化与更新函数绑定，传给Watcher订阅者。
• Watcher是整个模型的核心，对应ViewModel层，连接Observer和Compile。Watcher将Observer监听到的数据变化对应相应的回调函数，处理数据，反馈给View层更新界面视图

指令语法

功能

解析标签属性、解析标签体内容、绑定事件

说明

Vue 中有有很多的指令，且形式都是v-？？？

指令分类

• 内置指令

一.插值语法指令  

• v-text

1. 作用：更新该整个DOM元素的 textContent（不会解析标签）
2. 写法：
3. 注意：{{xxx}} ，xxxx 是js表达式，且可以直接读取到data中所有属性

• v-html

1. 作用:更新整个DOM元素的 innerHTML（会解析标签）
2. 写法:
3. 注意: v-html有安全性问题！在网站上动态渲染任意HTML是非常危险的，容易受到XSS攻击，一定要在可信的内容上使用v-html，不要用在用户提交的内容上

二.数据绑定指令

• v-bind：

1.作用：数据只能从data流向页面

 2.应用

• 用于动态渲染页面中的内容，只渲染，无需收集页面的数据，一般用于不需要用户操作或者输入的页面内容上
• 绑定样式

         1.绑定class样式

                ：class="xxx" xxx可以是字符串、对象、数组

         2.绑定style样式

                ：style="xxx" xxx可以是对象、数组

                                ：style="{fontSize：xxx}" 其中xxx是动态值

                        ：style="[a，b]" 其中a、b是样式对象

3.写法:

• v-model：

1.作用：数据不仅能从data流向页面，还可以从页面流向data

2.应用：双向绑定一般都应用于表单元素上（如：input、select等），一般使用于收集表单元素上

3.写法：

 4.v-model的三个修饰符：
    v-model.lazy：失去焦点再收集数据
    v-model.number：输入字符串转为有效的数字
    v-model.trim：输入首尾空格过滤

三.事件处理指令

四.条件渲染指令

五.列表渲染指令

六.防止闪现指令

七.静态内容指令

八.跳过编译指令

• 自定义指令