Vue简单介绍以及常用方法总结

最新推荐文章于 2025-06-30 12:25:16 发布

超人他不会飞

最新推荐文章于 2025-06-30 12:25:16 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 框架

本文链接：https://blog.youkuaiyun.com/fe_super_7/article/details/73478206

vue 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了Vue.js框架的基本概念，包括其轻量级的设计理念、易于学习的特点及与React和Angular等框架的区别。同时，详细列举了Vue的常用指令，如v-bind、v-on等，并解释了过滤器、计算属性和watch的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、 Vue.js 是什么？

这里写图片描述

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
简单的 API 实现响应的数据绑定和组合的视图组件。

二、与其他框架对比

React 和 Vue

相似之处：

使用 Virtual DOM
1. 提供了响应式（Reactive）和组件化（Composable）的视图组件。
2. 将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。

Angular 和 Vue

vue 的一些语法和 Angular 的很相似（例如 v-if vs ng-if）。因为 Angular 是 Vue 早期开发的灵感来源。然而，Angular 中存在的许多问题，在 Vue 中已经得到解决。
Vue1.x版本可以认为就是简单的ng ，没有了controller的概念，直接通过el绑定视图模块
Vue2.x版本（当前版本）1、更好的性能；2、组件化

三、vue的常用指令


1、 v-xxx
2、属性绑定v-bind  缩写  ‘:’
<a v-bind:href="url"></a>   给标签绑定属性 :属性名 =" 属性值";
<!-- 缩写 -->
<a :href="url"></a>
3、事件绑定 v-on  缩写 ‘@’
<a v-on:click="doSomething"></a> 给标签绑定事件 @事件名 = " 方法名()";
<!-- 缩写 -->
<a @click="doSomething"></a>
4、v-mode => mvvm (model=> view  view=>model)  实现数据和视图的双向绑定
5、v-for   <li v-for="(ele,index) in listdata" key="index">
 for in 循环 
6、v-text ="val" 渲染数据 渲染的速度比{{val}} 这种方式要快，可以提高用户体验;
7、v-cloak 给标签加上  <p v-cloak>{{val}}</p> 
 配合样式  [v-cloak]{display:none}  也可以达到 v-text 的效果；初始加载页面时使之不显示；
8、v-html 安全数据绑定，可以解析html 标签
9、v-pre 不会解析数据（使用较少）
10、v-show 是否显示（配合样式 display:none）
11、v-if 判断是否生成标签 效果同v-show 相同 但实现原理不同，v-if 实现显示或隐藏的效果慢与v-show

四、过滤器

//全局定义
Vue.filter('reverseMsg',function(value){
    return value.split('').reverse().join('');
});

new Vue({
    el:"#box",
    data:{
        message:"msg"
    },
    filters:{
  //局部定义
        reverseMsg:function(value){
            return value.split('').reverse().join('')+"2";
        }
    }
})

计算属性

new Vue({
    el:"#box",
    data:{
        message:"msg"
    },
    computed: {
fullName: function () {
    return this.firstName + ' ' + this.lastName
}
}
})

watch( 一般执行异步操作或开销较大的操作)

new Vue({
    el:"#box",
    data:{
        message:"msg"
    },
    watch: {
firstName: function (val) {
  this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
  this.fullName = this.firstName + ' ' + val
}
       }
})

vue-resource（支持 jsonp)

// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);

Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback).catch(e=>console.log(e));

this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);