当前位置： 首页 > Web前端 > vue.js

Vue.js基础内容

时间：2023-04-01 11:00:01 vue.js

Vue.js基础内容，建议查看官方文档！传统web开发请求数据->生成结构->监听元素变化->发送请求->更新结构缺点DOM操作频繁，代码复杂DOM操作和逻辑代码混合，数据或结构修改，可维护性差用不同的方式编写功能区共同维护性低，模块间依赖关系复杂。流行的前端框架Vue.js库是一个在代码中起到辅助作用的工具。框架是一个JS框架，是一种按照规则开发到对应元素的方式，不需要手动去操作DOM。这种行为称为单向数据绑定。对于输入框等输入元素，可以设置双向数据绑定。双向数据绑定是在数据绑定的基础上，可以自动绑定元素，将输入的内容更新为数据，实现数据和元素内容的双向绑定。代码中只进行了数据的展示和修改，没有使用DOM功能。这是数据驱动的单项数据绑定（data->view）双向数据绑定适用于特殊元素（可输入元素）如：input,checkbox,textarea输入后自动更新为绑定数据，变化绑定数据的也会自动更新到元素（双向）Vue数据驱动视图Vue.js数据驱动视图基于MVM模型。MVVM（Model-View-ViewModel）是一种软件开发思想。Model层代表数据View层，代表视图模板ViewModel层，代表业务逻辑处理代码。优点基于MVVM模型的数据驱动视图解放了DOM操作View和Model处理分离，降低代码耦合缺点，但双向绑定时bug调试难度增加大型项目View和Model过多，维护成本高Component-baseddevelopmentComponent-baseddevelopment，功能组件开发的一种方式允许我们将网页功能封装到自定义的HTML标签中，复用时写上自定义的标签名。组件不仅可以封装结构，还可以封装样式和逻辑代码。给组件起个名字，这个名字可以作为HTML标签名。.组件大大提高了开发效率和可维护性。安装并引入本地开发版：https://cn.vuejs.org/js/vue.js生产版：https://cn.vuejs.org/js/vue.m。..cdn导入比服务器本地导入更快。最新稳定版通过脚本src属性：https://cdn.jsdelivr.net/npm/vue指定版本：https://cdn.jsdelivr.net/npm/...npminstallnpminstallvuenpminstallvue@2.6.12基本语法Vue实例、基本选项、说明、其他选项（过滤器、计算属性、监听器）四部分Vue实例是Vue函数创建的对象，使用Vue函数的基础知识varvm=newVue({//optionsobject})el选项用于选择一个DOM元素作为Vue实例的挂载目标。只有被挂载的元素内部会被Vue处理，外部是普通的HTML元素，不能使用Vue函数。代表MVVM中的View层（view）。通过el挂载。挂载后，可以通过vm.$el访问和操作el。您访问的是一个HTMLElement字符串HTMLElement实例，采用css选择器格式，具有两种安装方法varapp=document.querySelector('#app');varvm=newVue({el:"#app"//格式为ofcssselector:app//HTMLElement实例，注意这里没有引号，不能是html或body})不带el的Vue实例也可以通过vm.$mount()挂载。参数形式与el规则相同。varvm=newVue({});vm.$mount('#app');挂载，创建后挂载一个，$mount()传入参数和el一样的插值表达式。挂载元素可以使用Vue.js的模板语法。在模板中，可以通过插值表达式来设置元素的动态内容设置。写法如下{{}}，基本运算、三元运算、数值等可以用括号括起来注意：插值表达式只能写在标签内容区，可以和其他内容混合使用

  • {{1+2+3}}
  • //ok
  • //错误里面只能写JavaScript表达式，不能写语句
  • {{varnum=100}}
  • //errordata选项用于存放Vue实例需要使用的数据，值为对象类型。newVue({el:"#app",data:{title:"content"}})获取数据的方法，vm.$data.data或者vm.data，比如vm.titledata数据特性，data中的数据可以直接在视图中通过插值表达式访问数据中的数据就是响应式数据，当发生变化时视图会自动更新。数据注意：当数据中有数组时，索引操作和长度操作不能自动更新视图。这时候可以使用Vue.set()方法来代替操作。varvm=newVue({el:"#app",data:{contentArr:["1","2",3]}})Vue.set(vm.contentArr,0,"新内容生效")//数组索引新值
    • {{contentArr[0]}}
    • {{contentArr[1]}}
    • {{contentArr[2]}}
    此时显示正常，通过控制台修改vm.contentArr[0]="howareyou",lihasnotupdatevm.contentArr.length=0lihasnotupdatethemethods选项用于存储Vue实例中需要使用的函数newVue({el:"#app",data:{contentArr:["1","2",3]},methods:{foo(){console.log(this)returnthis.contentArr}}})访问数据的方法中的方法可以通过vm.method名称访问。访问方法中的this是一个vm实例，可以方便的访问vm数据和其他功能方法。this.foo()也可以通过this相互结合。{returnthis.foo1()}Vue.js指令的本质是HTML自定义属性（html有固定属性和自定义属性），指令是一种识别框架的标记方式。Vue.js指令以v-开头的指令学习入口修饰符modifier开头的自定义属性是以点号开头的指令后缀，用于为当前指令设置特殊操作事件修饰符keymodifiersystemmodifiermousemodifierv-modelmodifier修饰符学习入口自定义指令指令用于简化DOM操作，相当于对基本DOM操作的一种封装。当我们想使用一些内置指令没有的DOM功能时，我们可以设置自定义指令。自定义全局指令自定义局部指令自定义全局指令是可以被任何Vue实例或组件使用的指令。定义一个focus指令，执行配置对象内容参数1：指令名参数2：配置对象（内部可以加钩子函数）inserted钩子在元素插入DOM后执行Vue.directive('focus',{inserted(el){//el表示设置此命令的element元素，本文参考以下输入元素el.focus()//执行元素操作}})应用上面的命令
    • global表示当你创建多??个vue实例对象时，可以使用focus命令newVue({el:"#app"})newVue({el:"#app2"})
    //可以被使用钩子函数参数Vue.directive('focus',{inserted(el,binding){//binding指相关信息集console.log(binding)}})//可以判断a或b修饰符的作用
    自定义本地指令是指可以在当前Vue实例或组件中使用的指令。对象键：属性名称。对象值，配置对象newVue({...directives:{focus:{inserted(el){el.focus()}}}})使用
    更多自定义说明内容参考官网filterfilter用于文本内容格式化。过滤器可用于插值表达式和v绑定。全局过滤器本地过滤器全局过滤器：可以在任何Vue实例中使用参数1：过滤器名称参数2：过滤器函数Vue.filter('filtername',function(value){//value用于过滤期间传入的数据filter//逻辑代码返回'处理结果'})filter可用于插值表达式和v-bind，通过管道符|连接数据//id处理，使用
    {{content|filterContent}}
    //内容处理，在插值表达式中使用
    /div>Example

    //“abc”

    {{val2|filterVal}}

    //"xyz"
    Vue.filter('filterVal',function(value){console.log(value)//"a-b-c"returnvalue.split("-").join("")//this当标题为"abc"})newVue({...data:{val:"a-b-c",val2:"x-y-z"}})注意可以将一个数据传递给多个过滤器进行处理。过滤器的组合操作类似于流水线。content参数首先由filterA进行处理，然后将filterA的返回值传递给filterB进行处理，然后返回

    {{content|过滤器A|filterB}}

    一个filter可以传入多个参数参数1：content，参数2：par1，参数3：par2

    {{content|filterContent(par1,par2)}}

    部分过滤器部分过滤器只能在当前Vue实例中使用。newVue({...filters:{filtername:function(value){//逻辑代码返回'处理结果'}}})其他功能参考全局filter，一致。注意事项如果全局过滤器和局部过滤器均存在且同名，则只有局部过滤器生效。因此，我们可以在Vue中全局定义一些基本的过滤规则，在实例中实现与全局同名的局部过滤器。重写，定义部分过滤函数，计算Vue.js的属性视图，不建议写复杂的逻辑，不利于维护。取数组中的最大值

    {{Math.max.apply(null,arr)}}

    {{Math.max.apply(null,arr)}}

    {{Math.max.apply(null,arr)}}

    解决方法封装函数是处理封装函数的好方法，但有时重复计算会消耗不必要的表现。newVue({...data:{arr:[1,2,3,4,5]},methods:{result(){varsum=0vararr=this.arrfor(varitemofarr){sum+=item}返回总和}}})

    {{result()}}

    {{result()}}

    {{result()}}

    如何提高计算执行效率？ComputedpropertiesComputedproperties在使用时以属性的形式出现，访问时会自动执行相应的函数。执行一次后，执行的方法将被缓存在计算属性中。计算属性减少了函数的执行次数。可以通过instance.xxnewVue({...data:{arr:[1,2,3,4,5]},computed:{result(){console.log("Ionly执行一次")varsum=0vararr=this.arrfor(varitemofarr){sum+=item}returnsum}}})

    {{result}}

    {{result}}

    {{result}}

    Methods和Computed的区别在于computed有cacheability，methods没有。Computed是通过属性名访问的，需要调用方法。computed仅适用于计算操作。计算属性的setter默认只有getter，Vue.js也允许为计算属性设置setter，将计算属性变成对象（以前是方法）vm.getResult="xxx"会执行设置方法varvm=newVue({...computed:{getResult:{//getterget:function(){//逻辑代码},//setterset:function(newVal){//逻辑代码}}}})listener监听器用于监听数据变化并执行指定的操作。newVue({...data:{value:""},watch:{value(newVal,oldVal){//发现值数据改变时会执行//逻辑代码}}})ExamplenewVue({...data:{inputVal:""},//只要inputVal的值变化，watchwatch会被触发：{inputVal(newVal,oldVal){//逻辑代码console.log("监听器已经执行")}inputVal:{//写2handler(newVal,oldVal){console.log("监听器已执行")}}}})复杂类型监听器设置为了监听对象内部值的变化，需要将watch写成一个对象，并设置选项deep:true，并且处理功能通过处理程序设置。newVue({...data:{obj:{contxt1:"content1",contxt2:"content2"},arr:[1,2,3,4,5]},watch:{obj:{深:true,handler(val,oldVal){console.log(val,oldVal)console.log(val===oldVal)//true}},arr(val,oldVal){//数组不需要设深console.log(val,oldVal)console.log(val===oldVal)//true}}})注意事项当改变（而不是替换）数组或对象时，回调函数中的新值与旧值相同值，因为它们的引用都指向同一个数组，对象。因此，对于复杂类型，无法比较val和oldVal。VueDevTools是Vue.js官方提供的调试Vue应用的工具。注意网页必须应用Vue.js功能才能看到VueDevTools网页必须使用Vue.js并不是说??Vue.min.js网页需要在http协议下打开而不是使用文件协议才能在本地打开。

    Vue.js基础内容相关文章
    最新推荐
    猜你喜欢

    Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

    重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。