vue知识点总结

1、Vue和其他两大框架的区别
Angular 学习成本太高
React 代码可读性差
Vue 学习成本较低 很容易上手
传送门 https://cn.vuejs.org/v2/guide/comparison.html
️2、Vue是什么
Vue是一套用于构建用户界面的渐进式框架 “前端框架”
让程序员脱离自己操作DOM 专注于写逻辑和操作数据
Vue的核心库只关注视图层 易上手 便于与第三方库或既有的项目整合
当与现代化的工具链以及各种支持的库结合使用时 Vue也完全能够为复杂的单页应用提供驱动
️3、MVVM
M
model 数据
V
view 页面
VM
viewModel Vue实例
DOM监听(DOM Listeners)
数据绑定(Date Bindings)
️4、Vue指令
️4.1v-text
说明: 文本数据渲染
用法: v-text = “Vue实例中的数据” => 简写 { {Vue实例中的数据}}

相当于JavaScript中的innerText

️4.1.2v-text指令 和 { { }}插值表达式 的区别
v-text 会直接替换元素中的所有内容
{ { }} 只会替换插值表达式中的占位符
️4.2v-html
说明: HTML渲染数据
用法:v-html = “Vue实例中的数据”
会解析html结构 渲染至页面

相当于JavaScript中的innerHTML

️4.2.1v-html指令 和 v-text指令的区别
v-html 会将数据解析成html 渲染至页面
v-text 只会输出成文本(字符串形式)
注意: 在网站上动态渲染任意的 HTML 是非常危险的!!! 因为容易导致 XSS 攻击 只在可信内容上使用 v-html 绝对不要用在用户通过(提交)的内容上使用

️4.3v-on
说明: 事件绑定(绑定事件监听器)
用法: v-on:事件名 = “事件处理函数” => 简写 @事件名 = “事件处理函数”

️4.3.1 详细用法
@事件名.修饰符 = “事件处理函数”
逻辑比较少的可以直接写在行内
逻辑较多的写到 methods 中 注意: 操作Vue实例上的数据要跟上 this
可以通过实参传递($event) 获取事件参数e
$event.target 获取当前事件触发的DOM元素
e v e n t . p a t h [ 0 ] ( e l . p a t h [ 0 ] ) 也 可 以 获 取 当 前 事 件 触 发 的 D O M 元 素 p a t h 数 组 中 有 从 触 发 事 件 源 的 元 素 的 所 有 上 一 级 元 素 直 到 w i n d o w 实 参 不 传 递 ( 没 有 任 何 参 数 ) 默 认 在 形 参 中 第 一 个 就 是 事 件 参 数 实 参 传 递 就 必 须 传 递 event.path[0](el.path[0]) 也可以获取当前事件触发的DOM元素 path数组中有从触发事件源的元素的所有上一级元素 直到window 实参不传递(没有任何参数) 默认在形参中第一个就是事件参数 实参传递 就必须传递 event.path[0](el.path[0])也可以获取当前事件触发的DOM元素path数组中有从触发事件源的元素的所有上一级元素直到window实参不传递(没有任<