Vue第一天指令、修饰符、事件

1、vue的概念和特点：

vue是一套用于构建用户界面的渐进式JavaScript框架

易用：在有HTML，CSS，JavaScript的基础上，快速上手。

灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

性能：20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化

2、vue的基本使用：

提供填充数据的标签

引入vue.js文件

使用vue.js语法做功能

vue提供的数据填充到标签

实例参数分析：

el:元素的挂载位置(值可以是css选择器或者DOM元素)

data:模型数据

{{}}差值表达式：将数据填充到html；做一些简单的计算操作

vue代码运行的原理：编译过程的概念(vue语法>原生语法)

3、vue基础指令：

指令的本质就是自定义属性

v-cloak：防止页面加载时出现闪烁问题

[v-cloak] {
 display: none;
}


 {{ message }}

原理：先通过css将其隐藏，然后在通过内存中进行值替换，替换好之后显示效果

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

如果数据中有HTML标签会将html标签一并输出

此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

{{msg}}

v-html:用法和v-text 相似 但是他可以将HTML片段填充到标签中

可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

v-pre:显示原始信息跳过编译过程

跳过这个元素和它的子元素的编译过程。

一些静态的内容不需要编译加这个指令可以加快渲染

{{ this will not be compiled }}

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

v-module:本质

绑定数据value 触发输入事件input

 
{{msg}}
 
 
 
 
 
 
 
 

v-on

• 用来绑定事件的

• 形式如：v-on:click 缩写为 @click;

点击1
//带参数
点击2

v-bind

• v-bind 指令被用来响应地更新 HTML 属性

• v-bind:href 可以缩写为 :href;

绑定对象操作css:

通过true来控制类名
data: {
 IsShow:true,
 Iserror:true
 }

绑定数组操作css:

 
学习Vue
 
学习Node
 
学习React

data:{
 别名：'css属性'
 classA:‘textColor‘,
 classB:‘textSize‘
 }

混合使用操作css:

12314
data: {
 a:'active',
 b:'error',
 Istest:true
 }

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

• 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据

• 绑定数组的时候数组里面存的是data 中的数据

绑定数组操作style:

124
66
88
data: {
 h:'150px',
 w:'190px',
 b:'1px solid blue',
 objstyle:{
 height:'150px',width:'190px',border:'1px solid blue'
 },
 overrideStyles: {
 border: '5px solid orange',
 backgroundColor: 'blue'
 }
 }

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 + '---' + k + '---' + i}}


 

 {{ item.message }}
 
 

key 的作用

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

4、双向数据绑定:当数据发生变化的时候，视图也就发生变化;当视图发生变化的时候，数据也会跟着同步变化

5、MVVM设计思想

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

m model

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

v view 视图

• Vue 中 view 即 我们的HTML页面

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

• m 即 Vue 的实例 就是 vm

6、事件修饰符

 







...
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击。

7、按键修饰符

监听键盘事件

常用的按键修饰符
.enter =>    enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) =>  删除键
.esc => 取消键
.space =>  空格键
.up =>  上
.down =>  下
.left =>  左
.right =>  右

自定义按键修饰符别名
在Vue中可以通过config.keyCodes自定义按键修饰符别名

Vue.config.keyCodes.f5 = 116;
预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法