vue基础指令

vue核心概念

  • 1.vue的本质声明式/响应式(寻常的指令)组件化。(定制)
  • 2.vue简介:MVVM框架(不完全是,react完全是),渐近式(可大可小,既可以做简单的html页面,又可以做大型的管理系统)
  • 3.vue开发思想:当我们想要改变视图界面时,我们只需要改变视图界面对应的声明式变量即可(间接)
  • 4.jquery开发思想:当我们想要改变视图界面时,我们要使用$选择器获取DOM元素对象,再使用DOM API操作DOM(直接)

指令

  • 1.指令是vue中的特色(在react中是没有的),Angular,微信小程序也有指令。
  • 2.指令的本质,就是DOM封装。指令就是一组相似的DOM操作
  • 3.降低我们直接操作DOM的频率。(尽可能减少DOM操作(滥杀无辜,只想改变一个列表某一行时,把全部列表重新渲染),不推荐用户直接操作DOM)
  • 4.指令如果有值,这个值是变量(变量必须在组件中可以通过this访问),也可以是表达式(有变量参与的运算)

一、文本指令

  • 1.{{}}文本插值。缺点有“一闪而过”的效果(不够美观)。可以使用v-text替代,或者用v-clock替代,但是要设置css样式[display:none]但是某些情况下只能用{{}},存在即合理。
  • 2.v-text专门用于渲染文本,如字符串,数字等,但是null,undefined不会渲染,直接显示为空
    • 注意,渲染Boolean值时,vue会自动的隐式转化为字符串
      进一步理解:v-text就相当于是innerText
  • 3.v-html 专门渲染HTML字符串。
    • v-html的值是HTML字符串,这些字符串会被Vue引擎解析渲染成真实的DOM结构
    • v-html默认具有“防注入攻击XSS”的功能,可以放心使用v-html
  • 4.v-once
    • 在语法上:v-once和v-cloak一样,没有值,不能这么使用:v-once=‘msg’
    • 它有一个非常重要的特点,它所作用的DOM节点上的声明式变量只会渲染一次。换句话说,当它对应的声明式变量发生改变时,视图不会发生改变。
    • 说明:工作中几乎不会用到

动态属性

  • v-bind给标签动态添加属性,凡是可以使用的属性都可以变成动态的
    • 简写: v-bind:style 简写成:style=‘’
    • 进阶:使用v-bind实现动态class,动态style,是非常重要的,在“组件化”时用的非常多

事件绑定

  • v-on 给标签绑定事件(事件是网页交互的基础)
    +.可以绑定哪些事件?什么事件都可以绑定,如:鼠标事件,键盘事件,滚动事件等…
    +.简写:v-on:事件名=‘事件处理器’ 简写为 @事件名 = ‘事件处理器’
    +.事件修饰符(可以链式调用):.enter/.stop阻止冒泡/.prevent阻止默认行为/…
    +. 事件对象
    +.(1)当没有事件传参时,事件处理器默认的第一个参数就是事件对象。(如果没有参数时,定义不要加())当事件传参时,需要手动传入$event事件对象。
    在什么场景下会使用事件传参?通常为了复用“事件处理器”,减少methods封装
    语法1:没有事件传参<tag @click=’handle’>
    语法2:有事件传参时<tag @click=’handle(变量1,$event)’>

四、表单绑定

+. v-model用于表单双向绑定,即方便我们取表单值。(这不是响应式的原理)
+. 约定:一般我们谈论的“双向绑定”指的是表单的v-model,谈论“响应式/声明式”指的是vue响应式的原理。
+. 怎么理解双向绑定?从表单的角度,当表单视图发生改变时,对应的生名式变量自动更新。当v-model对应的声明式变量发生变化时。表单视图自动更新
+.好处:有了v-model,我们取表单的值非常的简单
三个修饰符:
+.trim去掉文本类表单值首位的字符串/空格
+.number用于把由数字组成的字符串,转化成Number类型.

    原文作者:离空半夏
    原文地址: https://www.cnblogs.com/xsc1234/p/15422668.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞