草庐IT

vue2,vue指令和选项

沐沐 2023-03-28 原文

vue特点

    • mvvm框架
    • 响应式(声明式)
    • 组件化(支持自定义组件)
    • 丰富的指令(Dom功能的抽象)
    • 基于选项(template，data，computed，watch，methods)
    • vue文档集中ue
    • Vue生态丰富且简单
    • 渐进式()

Veu和Dom开发思想

    • Dom开发思想：当我们需要在交互事件中改变视图时，使用DOM选择器选中目标节点、再使用DOM方法直接改变视图。
    • Vue开发思想：当我们需要在交互事件中改变视图时，先在data选项中声明一个合适的变量，再在交互事件中改变这个声明式变量即可，视图自动更新，这是一种间接的操作。

常用的Vue指令有哪些

文本类指令：

    • {{}}文本插值：用于绑定节点的文本。{{}}这种绑定值的方式会出现一闪而过的效果，使用v-cloak来解决。
    • v-text：用于绑定节点的文本，大多数的时候，可以和{{}}替换。
    • v-once：用于指定节点的动态内容只绑定一次，当前节点中所对应的变量发生变化时视图不更新。一般情况下，v-once只能和{{}}一起用。
    • v-once和v-cloak：都是不需要接受表达式来做为‘值’。
    • v-html：用于动态绑定的html节点，相当于DOM中的innerHTML,这个指令默认已经做了“防xss攻击”的处理。

动态属性指令：

v-bind：用于动态绑定节点的属性（比如：title ，value，style等）

事件绑定指令：

v-on：用于给视图节点绑定各种js事件（比如：click，keyup等）

v-on简写@　　

基本语法: <div @事件名.事件修饰符='事件处理'></div> 

 v-on事件修饰符：.stop阻止事件冒泡，.prevent阻止默认事件，.enter绑定键盘Enter键盘。

表单绑定指令：

v-model：用于表单取值(表单双向绑定)　　比如：input，select

基本语法：<input style="text" v-model.表单修饰符='变量'> 

v-model修饰符：.trim自动去除首尾空格　　.number隐式类型转换　　.lazy用于性能，当表单失去焦点时再进行双向绑定。

列表渲染：

v-for：用于渲染列表，对象，Number变量等。

渲染列表语法： <div v-for='(item,index) in array'></div> 

渲染对象语法： <div v-for='(value,key,index) in obj'></div> 

渲染Number变量语法： <div v-for='(num, index) in 5'></div> 

条件渲染：

v-show：用于显示或隐藏视图节点，使用display:block / display:none 来实现的。

v-if，v-else-if，v-else：用于显示或隐藏视图节点，真正的移除或插入视图节点。

v-show和v-if的区别

v-if是节点的插入或移除，比较耗费性能；v-show只是通过样式来实现显示与隐藏，性能消耗低。

注意：不建议v-if和v-for一起使用；如果一定要一起使用，在vue2中v-for优先级更好。

其它指令

v-pre：用于调试，可以阻止vue编译器对指令的编译

v-slot：插槽

自定义指令

在vue开发中，除了可以使用这些内置指令外，我们还可以使用Vue.directive() 或directives选项来自定义指令。

声明式变量的特点

当声明式变量时，它所对应的视图节点自动更新。

 vue选项





        const app = new Vue({


            el:'#app',


            data:{




            },


            methods:{









            },


            computed:{









            },


        })









 




    

  • 

      

    •  el：把vue组件（响应式系统）挂载到真实DOM
      • 

    • data：专门用于定义声明式变量的
      • 

    • methods：是专门用于定义函数方法的地方
      • 

    • computed（计算属性）：
      • 

    • watch：侦听器(监听器)
      • 

    

    • 



computed




语法：在computed选项中，定义计算属性方法，在方法体使用声明式变量进行若干计算。


使用：在视图模板中把计算属性直接当作变量直接使用，在vue逻辑代码使用this访问计算属性，默认只有get功能。


计算属性可以绑定在v-model上。


 






computed作用:


    

    1. 

    1. 

      当指令的表达式比较复杂时，我们建议使用计算属性来优化，提升视图模板中代码的可阅读性、可维护性。
      

      2. 

    2. 

      用于缓存一个复杂的运算，避免组件更新时产生没有必要的性能损耗。计算属性本质上是一个函数，Vue会分析函数体中使用到了哪些声明式变量，有且仅有这些声明式变量发生变化时，计算属性才会重新执行。
      

      3. 

    2. 



在Vue中，计算属性能计算哪些性质的变量


data，vuex数据，$route，计算一切__ob__的数据。


如何让计算属性同时支持get/set功能


计算属性默认是一个函数，表示get功能。为了支持set，要把计算属性写对象结构 {get, set}






const app = new Vue({
   el:'#app',
   computed:{
        he：{
            get(){

　　　　　　　},
            set(){

　　　　　　　},
        },
    },      
})




watch


作用：用于监听一个变量的变化，然后去做另一件事儿。


特点：当侦听器监听引用数据类型时，默认只能监听引用数据类型的第一层。


监听深度越深，Vue在背后要做的事儿越多，这是一种性能损耗，所以一般不要对一个引用类型的变量进行深度监听。




如何监听引用数据类型的每一层（深度监听）


 




const app = new Vue({    
　　 el:'#app',
    watch：{
        info：{
           deep：true,
　　　　　　　handler(newInfo,oldInfo){
　　　　　　　　const.log(this.info)
　　　　　　}
        },
　　　　//推荐写法
　　　　　'info.child.age' (newAge, oldAge) {




          　　console.log('---age变了', newAge, oldAge)


        　　},




    },
})




在Vue中，侦听器能够监听哪些性质的变量变化




能够监听data、计算属性、vuex数据、$route等，凡是那些带有__ob__变量都能被监听到




 
            

            
vuevue2stylespanmargin-leftVue
        

        

            
有关vue2,vue指令和选项的更多相关文章

            
    
                
  1. ruby - 默认情况下使选项为 false - 2
    				这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb
  2. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2
    				我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co
  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
  4. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2
    				我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？															最佳答案														总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试
  5. ruby - 选项卡的 Rubocop - 2
    				我们想使用Rubocop来验证我们的ruby​​在语法上是否正确并遵循基本代码指南。除此之外我们有这个规则:我们使用制表符缩进以允许任何人决定他们希望如何呈现它们(将它们显示为2或4个空格)问题是rubocop似乎设计为完全拒绝缩进标签。我们怎样才能超越所有这些规则成为太空合规者？编辑:我正在考虑覆盖这个模块https://github.com/bbatsov/rubocop/blob/master/lib/rubocop/source_parser.rb将我文件中的所有制表符替换为2个空格，以创建gem的幻觉...															最佳答案														添加
  6. ruby - Ruby 中的选项菜单 - 2
    				我正在尝试在Ruby中创建一个菜单，以便根据用户输入的内容，取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene
  7. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2
    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
  8. ruby-on-rails - 用一系列时间增量填充选择，加上其他选项 - 2
    				使用RubyonRails，我使用给定的增量(例如每30分钟)用时间填充“选择”。目前我正在YAML文件中写出所有的可能性，但我觉得有一种更巧妙的方法。我想我想提供一个开始时间、一个结束时间、一个增量，并且目前只提供一个名为“关闭”的选项(想想“business_hours”)。所以，我的选择可能会显示:'Closed'5:00am5:30am6:00am...[allthewayto]...11:30pm谁能想出更好的方法，或者只是将它们全部“拼写”出来的最佳方法？															最佳答案														此答案基于@emh的答案。defcreate_hour
  9. ruby - 如何获取适用于 ruby​​ 1.9.1 的 to_yaml 方法的格式化选项？ - 2
    				根据YAML文档，可以传递hashofoptions到.to_yaml方法。目前，当我按照文档中的建议传递选项时，它不起作用，哈希被忽略。irb(main):001:0>require'yaml'=>trueirb(main):002:0>user={"1"=>{"name"=>"john","age"=>44}}user.to_yaml=>"---\n\"1\":\nname:john\nage:44\n"现在，传递一些选项:irb(main):014:0>user.to_yaml(:Indent=>4,:UseHeader=>true,:UseVersion=>true)=>"--
  10. ruby - 如何在 Ruby 中设置 SSLContext 选项 - 2
    				我需要在Ruby1.8+中创建一个SSLSocket来与加密服务对话。我想在SSLContext对象上设置SSL选项(它最终调用底层OpenSSL库中的SSL_CTX_set_options)。我没有看到任何明显的方法来做到这一点。这是使用OpenSSL::SSL::SSLContext接口(interface)。作为引用点，这类似于调用set_options()在Python的pyOpenSSL库中。															最佳答案														例子:ctx=OpenSSL::SSL::SSLContext.newctx.set_params(:options=>
    11.             

        

        

            
随机推荐