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-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方法

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