vue日常总结

最新推荐文章于 2024-05-29 12:00:00 发布
置顶 最新推荐文章于 2024-05-29 12:00:00 发布
阅读量303 收藏 1
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/never_bug/article/details/89286875
版权

一.vue是什么
vue简单小巧(压缩后大小仅有17kb),渐进式(可以一步一步,有阶段的使用,不必一开始就使用所有东西)的前端框架
提供了开发中常用功能,如:1.解耦视图与数据2.组件复用3.前端路由4.状态管理5.虚拟Dom
开发模式(m v vm):mvvm由mvc繁衍而来,当v(视图)层变化时,会自动更新到vm(视图模型),然后m(模型)层发生变化,反之亦然,v和vm之间通过双向绑定建立联系
二.使用安装vue

   1.通过<script>标签直接引入:<script src="https://unpkg.com/vue/dist/vue.js"></script>
   2.通过脚手架vue-cli(项目中):
        1安装vue
        npm install vue
        2全局安装vue-cli
        vue install --global vue-cli
        3创建基于webpack模板的新项目
        vue init webpack my-project          //my-project :项目名称
        4进入项目
        cd my-project
        5下载依赖包
        npm install
        6运行项目
        npm run dev
        或
        npm start
        7项目打包
        npm run build

三.计算属性
computed
当模板中的表达式或者逻辑过长时,项目就会难以维护,比如

<div>
	{{text.split(','}.reverse().join(,)}}			//split()截取	reverse()取反	join()将数组转换成字符串
<div>

计算属性:

<div id="app">
	{{reversetext}}
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            text:'cheng,cong,ming'
        },
        computed:{
            reversetext(){
                return this.text.split(',').reverse().join(',')
            }
        }
    })
</script>

用法:计算属性可以完成各种复杂的逻辑,包括运算,函数调用,只要最终返回一个结果

每个计算属性中都包含一个getter和一个setter函数,getter用来读取,setter用来修改,绝大多数只用默认的getter很少用setter

计算属性小技巧:1计算属性可以依赖其他计算属性2计算属性不仅可以依赖当前的Vue实例的数据,还可以依赖其他实例的数据
计算属性缓存(与methods区别):你可能发现,调用methods里的方法也可以实现计算属性的逻辑,甚至methods还可以传值,使用起来更灵活,为什么还要使用计算属性呢,原因就是计算属性是基于他的依赖缓存的,一个计算属性所依赖的数据发生变化时,他才会重新获取值,而methods只要重新渲染,他就会被调用,因此函数也会被执行
四.vue内置指令
(1).v-bind(简写也可以叫语法糖为 : ):主要用于动态更新html元素上的属性
v-bind:class(绑定class,动态切换class)

对象语法:

<body>
<div id="app">
    <div v-bind:class="{'cheng':congming}"></div>	
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            congming:true
        }
    })

</script>
</body>

给div绑定一个class,名为cheng,这个名为cheng的class依赖于data中数据congming,当congming为ture时,添加上class,渲染结果为:

<div class="cheng"></div>

当congming为false时,class名不显示,渲染结果为:

<div class=""></div>

当然,动态添加class可以存在多个,如

<div :class="{'cheng'':congming,'congming':cheng}">

注:写法与一个class名相同,true显示,false不显示
当:class的表达式过长或者逻辑复杂时,还可以绑定一个计算属性,或者data,methods

<body>
<div id="app">
    <div v-bind:class="cheng"></div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cong:true,
            ming:null
        },
        computed:{
            cheng(){
                return{
                    acative:this.cong && !this.ming,
                    'text-fail':this.ming && this.ming.type==='fail'
                }
            }
        }
    })

</script>
</body>

渲染结果:

<div class="acative"></div>

数组语法

当需要应用多个class是,可以用数组语法

<body>
<div id="app">
    <div v-bind:class="[cheng,cong]"></div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:'ming',
            cong:'ming'
        }
    })
</script>
</body>

渲染结果:

<div class="ming ming"></div>

还可以用三元表达式来根据条件切换

<body>
<div id="app">
    <div v-bind:class="[cheng?cong:'']"></div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:true,
            cong:'ming'
        }
    })
</script>
</body>

当cheng为true时,渲染结果为:

  <div class="ming"></div>

当cheng为false时,渲染结果为:

<div class=""></div>

也可以在数组中使用对象

<div v-bind:class="[{'cheng':cong},ming]"></div>

注:当然,与对象语法一样,数组语法也可以使用data,computed和methods三种方法
v-bind:style(给元素绑定内联样式,与绑定class类似)

<body>
<div id="app">
    <div v-bind:style="{'color':cheng,'font-size':cong + 'px'}">程聪明</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:'red',
            cong:12
        }
    })

</script>
</body>

渲染结果:

<div style="color: red; font-size: 12px;">程聪明</div>

大多数情况下,直接写一串样式不便于维护,可以写在data或者computed里,

<body>
<div id="app">
    <div v-bind:style='cheng'>程聪明</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:{
                color:'red',
                fontSize:12 + 'px'
            }
        }
    })
</script>
</body>

渲染结果

<div style="color: red; font-size: 12px;">程聪明</div>

应用多个样式对象时,可以使用数组语法

<div :style="[cheng,cong,ming]">程聪明</div>

在实际业务中:style的数组语法不常用,因为往往可以写在一个对象里,较为常用的是计算属性
(2)v-cloak:不需要表达式,会在Vue实例结束编译时从绑定的HTML元素上移除,经常和css中的display:none;配合使用:

<body>
<div id="app" v-cloak>
    {{cheng}}
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:'程聪明'
        }
    })
</script>
<style>
    [v-cloak]{
        display: none;
    }
</style>
</body>

当网速较慢,vue文件还没加载完成时,页面会显示{{cheng}}的字样,直到页面加载完成,所以这个过程屏幕是会闪动的,而v-cloak就是解决页面闪动问题的,但是一般在大型的项目中,html结构只有一个空的div元素,剩余的内容都是由路由挂载不同组件完成,所以不再需要
(3).v-once:不需要表达式的指令,作用是定义它的元素或组件值渲染一次,包括元素或组件的所有子节点.首次渲染后,不在随数据的变化重新渲染,将被视为静态内容:

<body>
<div id="app" v-cloak>
    <div v-once>{{cheng}}</div>
    <div v-once>
        <span>{{cheng}}</span>
    </div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:'程聪明'
        }
    })
</script>
</body>

(4)v-if.v-else-if.v-else:条件渲染指令 ,与if.else.else if类似,根据表达式的值渲染Dom

 <body>
<div id="app">
    <div v-if="cheng === 'cheng'">程</div>
    <div v-else-if="cheng === 'cong'">聪</div>
    <div v-else="cheng === 'ming'">明</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:'cheng',	//可以更改此处的值页面会随之变化
        }
    })
</script>
</body>

v-else-if需要紧跟v-if,v-else需要紧跟v-else-if,如果一次判断的是多个元素,可以在元素上使用条件指令,最终渲染的结果不会包含该元素,

<body>
<div id="app">
  <template v-if="cheng===cheng">
      <p>程</p>
      <p>聪</p>
      <p>明</p>
  </template>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:'cheng',
        }
    })
</script>
</body>

(5)v-show:ye v-if用法基本一致,只不过v-show改变元素的css属性display.当表达式值为false时,元素隐藏,为true时元素显示

<body>
<div id="app">
  <div v-show="cheng==='congming'">程聪明</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:'congming',
        }
    })
</script>
</body>
注:v-show不能写在template上

v-show和v-if区别:v-if时真正的条件渲染,创建dom和删除dom,而v-show只是在元素上添加了css属性;v-if更适合于条件不常改变的场景,v-show适合频繁操作的场景
(6)v-for:遍历数组或者对象循环显示,表达式需要用in或者if结合使用
遍历数组:

<body>
<div id="app">
    <ul>
        <li v-for="item in cheng">{{item.name}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:[
                {name:'程'},
                {name:'聪'},
                {name:'明'}
            ],
        }
    })
</script>
</body>

渲染结果:

<div id="app">
    <ul>
	    <li>程</li>
	    <li>聪</li>
	    <li>明</li>
    </ul>
</div>

v-for可以选参数作为当前的索引:

<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in cheng">{{index}}-{{item.name}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:[
                {name:'程'},
                {name:'聪'},
                {name:'明'}
            ],
        }
    })
</script>
</body>

渲染结果:

<div id="app">
    <ul>
	    <li>0-程</li>
	    <li>1-聪</li>
	    <li>2-明</li>
    </ul>
</div>

跟v-if一样,v-for也可以写在template标签上,进行多个元素渲染,也可以进行对象渲染:

<body>
<div id="app">
    <ul>
        <li v-for="item in cheng">{{item}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:{
                name:'程',
                gender:'男',
                age:100
            }
        }
    })
</script>
</body>

渲染结果:

   <div id="app">
       <ul>
	       <li>程</li>
	       <li>男</li>
	       <li>100</li>
       </ul>
   </div>

遍历对象时可以有两个参数

<body>
<div id="app">
    <ul>
        <li v-for="(item,key,index) in cheng">{{index}}-{{key}}-{{item}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:{
                name:'程',
                gender:'男',
                age:100
            }
        }
    })
</script>
</body>

渲染结果:

   <div id="app">
      <ul>
	       <li>0-name-程</li>
	       <li>1-gender-男</li>
	       <li>2-age-100</li>
       </ul>
    </div>

v-for还可以循环整数:

<li v-for="item in 10">{{item}}</li>

渲染结果

1 2 3 4 5 6 7 8 9 10

vue中一些数据变化,v-for也会立即更新.vue中数组变异的方法:

push()  	//向数组的末尾添加一个或多个元素，并返回新的长度
pop()	//删除并返回数组的最后一个元素
shift()	//把数组的第一个元素从其中删除，并返回第一个元素的值
unshift()	//向数组的开头添加一个或更多元素，并返回新的长度
splice()	//向/从数组中添加/删除项目，然后返回被删除的项目
sort()	//对数组的元素进行排序
reverse()	//颠倒数组中元素的顺序
filter()	//创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素(不会改变原数组)
concat()	//连接两个或多个数组(不会改变原数组)
slice()	//从已有的数组中返回选定的元素(不改变原数组)

(7).v-on(简写也可以叫语法糖为 @ ):绑定事件监听器,如v-on:click

<body>
<div id="app">
    <button @click="cheng++">+1</button>
    <div>{{cheng}}</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:1
        }

    })
</script>
</body>

监听事件可以写在methods中

<body>
<div id="app">
    <button @click="congming">+1</button>
    <div>{{cheng}}</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            cheng:1
        },
        methods:{
            congming(){
                return this.cheng++
            }
        }

    })
</script>
</body>

(8)v-model:表单数据双向绑定

<body>
<div id="app">
    <input type="text" v-model="cheng">
    <div>{{cheng}}</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
             cheng:''
        }
    })
</script>
</body>

使用v-model后,表单显示的值只能依赖所绑定的数据,不在关心初始化时的value属性
五.组件
全局注册组件
component

 Vue.component('cheng',{
        //选项
    })

实例:

<body>
<div id="app">
    <cheng></cheng>
</div>
<script>
    Vue.component('cheng',{
        template:'<div>程聪明</div>'
    })
    new Vue({
        el:'#app'
    })
</script>
</body>

渲染结果:

<div id="app"><div>程聪明</div></div>

template的Dom元素必须被一个元素包含
局部注册组件
componets

<body>
<div id="app">
    <cheng></cheng>
</div>
<script>
    var cheng = {
        template:'<div>程聪明</div>'
    }
    new Vue({
        el:'#app',
        components:{
            'cheng':cheng
        }
    })
</script>
</body>

vue模板在某种情况下会受html的限制,比如table中值允许写tr.td.th等表格元素,所以在表格中直接使用组件是无效的,在这种情况下,可以用is属性来挂载

<body>
<div id="app">
    <table>
        <tr>
            <td is="cheng"></td>
        </tr>
    </table>
</div>
<script>
    var cheng = {
        template:'<div>程聪明</div>'
    }
    new Vue({
        el:'#app',
        components:{
            'cheng':cheng
        }
    })
</script>
</body>

注:在组件中使用data时,data必须写成函数形式,然后将数据return出去
持续更新…(本资源参考 <<Vue.js实战>>,如有侵权,请联系删除)

发财发财发财!!!
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue知识点汇总【持更】
qq_45605043的博客
09-14 5766
一个前端小白的自学之路，完结之日即成为大白之日。
vue知识总结
Xiaocong__的博客
02-07 1517
为何组件的data必须是一个函数 一、实例和组件定义data的区别 vue实例中的data属性既可以是一个对象，也可以是一个函数 const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } } 组件中定义data属性，只能是一个函数
vue的基本使用
最新发布
m0_73381672的博客
05-29 903
npm是JS的一个包管理程序，相当于后端的maven，Node Package Manager。
Vue（知识点总结）
前端往前冲
10-25 1294
一些Vue知识点~ 希望帮到大家~ 作者会不定期更新内容的~ 希望大家都能不止于前端，共同建设更美好的IT业！
Vue知识点总结
xfhgxhhhg的博客
08-02 6786
vue的知识框架。
【学习】 VUE学习总结
小唐的博客
03-29 1777
注册组件的基本步骤调用Vue.extend()方法 - 创建组件构造器调用Vue.component()方法 - 注册组件在Vue实例的作用范围内 - 使用组件名字: BannerPlugin (webpack自带)// 按照下面方法修改webpack.config.js文件...plugins: [new webpack.BannerPlugin('最终版权归coder所有')// 重新打包程序, 查看bundle.js文件的头部, 看到如下信息/*!最终版权归coder所有 */
vue知识点概括总结题库.zip
07-07
这个“Vue知识点概括总结题库.zip”文件包含了对Vue.js核心概念和关键功能的详细梳理，适合正在学习或准备面试的开发者参考。 题库文档“题库.doc”可能涵盖了以下几个Vue.js的重要知识点： 1. **基础概念**：Vue...
详解Vue后台管理系统开发日常总结(组件PageHeader)
10-16
主要介绍了详解Vue后台管理系统开发日常总结(组件PageHeader)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
document:日常总结
05-25
总的来说，“document:日常总结”可能包含了作者在学习前端开发，特别是JavaScript和Vue.js过程中的心得体会，通过对条件渲染和列表渲染的理解，结合JavaScript基础知识，逐步提升开发技能。这是一条不断探索和成长...
vue.js 课件 ppt
11-03
最后，第12章“Vue工程项目实战”则是对整个学习过程的总结，通过一个实际项目带领大家体验Vue开发的全过程，从项目初始化、功能实现到部署上线。 通过这些课件，学习者可以从零基础逐步掌握Vue.js，并能够运用到...
日常技术总结知识点整理
01-19
在日常学习和工作中，不断对这些知识点进行总结和梳理，有助于提升个人技术水平，更好地适应快速发展的IT行业需求。 总结来说，这些压缩包提供了一个逐步深入学习IT技术的路径，从基础到进阶再到专业，涵盖了广泛且...
前端-Vue
weixin_45156610的博客
07-13 442
学习目标 会创建Vue实例，知道Vue的常见属性 会使用Vue的生命周期的钩子函数 会使用vue常见指令 会使用vue计算属性和watch监控 会编写Vue组件 0.MVVM模式 MVVM模式 M：即Model，模型，包括数据模型和业务模型 V：即View，视图，页面渲染结果 VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉） 在MVVM之前，开发人员从后端获取需...
第一章：Vue核心
wcy_0522的博客
08-19 1295
第一章：Vue核心
vue总结
lh134241的博客
05-25 369
vue的使用 computed属性用来计算复杂的逻辑运算，通常用来对data的数据进行操作。 methods属性用来自定义一些方法，通常在created里面执行方法。 watch属性用来监听数据,当数据发生变化时watch里面的函数就会执行。如果需要监听多个属性则需要深度监听,将deep的指设置为true。也可以监听路由的变化 watch: { $route(to,from){ console.log(to.path) } } vue指令
详解——Vue小总结
TianXuab的博客
07-20 491
总结：Vue.js是一种现代的、流行的JavaScript前端框架，它的主要特点包括响应式数据绑定、组件化开发、虚拟DOM等。通过指令和过滤器，Vue.js使得数据绑定和显示处理更加便捷。路由和状态管理帮助构建复杂的前端应用程序。Vue.js的易学易用性，简洁的API设计和丰富的文档与社区支持使其成为广受欢迎的前端框架之一。期待：随着前端技术的不断发展，我们期待Vue.js继续保持活跃的社区和创新的发展。预计Vue.js将继续推出更多有用的功能和改进，进一步提高前端开发效率和用户体验。
Vue学习总结(更新中)
是日前端
05-19 3286
一、Vue的基本使用及模板语法 1、Vue简介     1.1 Vue是一套用于构建用户界面的渐进式框架： 声明式渲染—>组件系统—>客户端路由—>集中式状态管理—>项目构建     1.2 优点： 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue 灵活：在一个库和一套完整框架之间自如伸缩 高效：20kB运行大小，超快虚拟DOM 2、Vue的基本使用  &
vue常用知识点总结
weixin_49175902的博客
10-21 5064
最近入职新的公司，整体来说还是不错的。前一阵子看了很多关于vue的知识点，自己理解着整理一下，再加深一下印象。也希望可以帮助到有需要的同学。理解错误的地方，欢迎指正。 1、对于Vue是一套渐进式框架的理解 答：Vue是渐进的，没有强主张，是个轻量视图。它只做了自己应该做的事，没有做多余的事。 2、vue.js的两个核心是什么？ 答：数据驱动和组件化。 3、vue中的模板编译原理 答：模板指的就是template。如果我们传了一个template，我们会把template转换成一个render函数，然后通过r
vue 基础知识总结
qq_40046544的博客
09-14 3246
官方给出的概念：Vue (读音/vjuː/，类似于 view) 是一套用户构建用户界面的前端框架在创建 vue 实例期间，可以在 filters 节点中定义过滤器}}});ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向的一个空对象动态组件指的是动态切换组件的显示与隐藏。
Vue基础原理
hhcya的博客
03-01 4700
一，MVC与MVVM的差别在哪里 MVC缺点：1，前后端没法独立开发，必须等接口做好了，我才能往下走。 2，前端不够独立，前端没有自己的数据中心，太过依赖于后台。 MVVM：拥有一个data 称之为vm，连接了视图，相当于前端拥有了一个自己的控制器，所以才能做到前后端分离 ...
2021 Vue面试精华：基础与双向绑定详解
总结，掌握Vue的底层机制，特别是数据绑定和生命周期管理，对于理解其工作原理至关重要。这份面试题文档提供了实用的知识点，能够帮助考生准备面试，同时也适合开发者日常学习和回顾。对于想要提升Vue技能或应对面试...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值