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;


//带参数

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-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

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

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

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

v-show 和 v-if的区别

v-for

你可能感兴趣的:(Vue第一天指令、修饰符、事件)

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

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

v-show 和 v-if的区别

v-for

你可能感兴趣的:(Vue第一天指令、修饰符、事件)

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