标签：Vue 插值 bind 绑定 视图 笔记 整理 修饰符
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，准确来说不是一个框架，它聚焦在V（view）视图层。
关于mvvm
- MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
- m 指 model
- 数据层 Vue 中 数据层 都放在 data 里面
- v 指view 视图
- Vue 中view即我们的HTML页面
- vm（view-model） 控制器：将数据和视图层建立联系
- vm 即 Vue 的实例，就是 vm
创始人尤雨溪，是一个优秀的国产框架
它有以下的特性：
1.轻量级的框架
2.双向数据绑定（一定要加冒号啊，多次忘记）
3.指令
4.插件化
优点是 异步批处理方式更新 DOM；
组合：用解耦的、可复用的组件组合你的应用程序；
紧凑~18kb min+gzip，且无依赖
可通过npm或可视化面板进行开发，使用场景灵活
指令
- 本质就是自定义属性
- Vue中指定都是以 v- 开头
双向数据绑定（使用场景最最最多）
- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
v-model
- v-model是一个指令，限制在
<input>、<select>、<textarea>、components中使用
v-text
- v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
- 如果数据中有HTML标签会将html标签一并输出
- 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
在指令中不要写插值语法 直接写对应的变量名称
在 v-text 中赋值的时候不要写插值语法
一般属性中不加 {{}} 直接写对应的数据名
v-html
-
用法和v-text 相似 但是他可以将HTML片段填充到标签中
-
可能有安全问题, 一般只在可信任内容上使用
v-html，永远不会用在用户提交的内容上 -
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
v-cloak
- 防止页面加载时出现闪烁问题
`
v-pre
- 显示原始信息跳过编译过程
- 跳过这个元素和它的子元素的编译过程。
- **一些静态的内容不需要编译加这个指令可以加快渲染
v-once
- 执行一次性的插值（当数据改变时，插值处的内容不会继续更新）
事件修饰符
- 在事件处理程序中调用
event.preventDefault()或event.stopPropagation()是非常常见的需求。 - Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为
v-on提供了事件修饰符 - 修饰符是由点开头的指令后缀来表示的
按键修饰符
- 用来绑定事件的
- 形式如：v-on:click 缩写为 @click;
v-on事件函数中传入参数()
`
- 在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为
v-on在监听键盘事件时添加按键修饰符
常用的按键修饰符
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右
`
v-bind
- v-bind 指令被用来响应地更新 HTML 属性
- v-bind:href 可以缩写为 :href;
- 我们可以给v-bind:class 一个对象，以动态地切换class。
- 注意：v-bind:class指令可以与普通的class特性共存
1、 v-bind 中支持绑定一个对象
如果绑定的是一个对象则键为对应的类名，值为对应data中的数据
2、 v-bind 中支持绑定一个数组
绑定对象和绑定数组 的区别
- 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
- 绑定数组的时候数组里面存的是data 中的数据
分支结构
v-if 使用场景
- 1- 多个元素通过条件判断展示或者隐藏某个元素或者多个元素
- 2- 进行两个视图之间的切换
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来给每个节点做一个唯一标识
-
**key的作用主要是为了高效的更新虚拟DOM
标签：Vue,插值,bind,绑定,视图,笔记,整理,修饰符 来源： https://www.cnblogs.com/wxxcarol/p/14128244.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。