vue.js学习总结

最新推荐文章于 2024-07-23 21:45:00 发布

2301_77534494

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量925

点赞数 18

文章标签： vue.js

本文链接：https://blog.csdn.net/2301_77534494/article/details/135214275

版权

本文介绍了Vue.js的基本概念、核心特性，包括MVVM架构、响应式数据绑定、组件、指令如v-bind、v-if、v-for和v-on，以及组件化开发和路由管理。通过实例展示了如何在Vue.js中实现双向数据绑定和组件化应用，并介绍了如何使用vue-router进行单页应用的路由设置。

摘要由CSDN通过智能技术生成

一.vue.js的介绍

1.什么是vue.js

Vue.js是一个流行的JavaScript框架，用于构建用户界面和单页应用程序。Vue.js采用了MVVM（Model-View-ViewModel）架构模式，使开发者可以轻松地在前端构建可复用组件和交互式用户界面。

Vue.js的核心是一个响应式的数据绑定系统，它可以自动将数据和DOM进行绑定，当数据变化时，相应的DOM也会自动更新。Vue.js还提供了一些常用的指令、组件和插件，如v-if、v-for、v-on、v-model等，使得开发者可以更方便地实现各种功能。

Vue.js还提供了一些高级的特性，如计算属性、监听器、混入等，让开发者可以更好地管理和维护代码。同时，Vue.js也非常易于学习和使用，因此成为了众多前端开发者的首选框架之一。

2.vue.js的特点

简单易用：Vue.js的API简单易懂，容易上手，同时也提供了丰富的文档和示例，方便开发者快速上手。

响应式数据绑定：Vue.js采用了响应式的数据绑定机制，数据变化时会自动更新视图，大大提高了开发效率。

组件化开发：Vue.js将应用程序拆分成一个个小组件，可以复用、组合和嵌套，有效提高了代码的可维护性和重用性。

轻量级：Vue.js的体积非常小，只有20KB左右，因此加载速度快，页面响应迅速。

生态丰富：Vue.js拥有一个庞大的生态系统，有众多插件和组件库，可以快速构建各种类型的应用程序。

渐进式框架：Vue.js是一款渐进式框架，可以根据项目需求灵活选择使用其核心功能或扩展功能，同时也提供了大量的工具和插件，方便集成第三方库和框架。

二.基础语法介绍

1.v-bind

v-bind是Vue.js中的一个指令，用于动态地将数据绑定到HTML元素的属性上。

通过v-bind指令，我们可以将Vue实例中的数据绑定到HTML元素的属性上，使其与数据保持同步更新。这样，在数据发生变化时，对应的HTML属性也会自动更新。

使用v-bind指令的语法为：v-bind:属性名="数据"，或者简写为:属性名="数据"。

例如，我们可以将Vue实例中的一个数据绑定到<img>标签的src属性上：

<img v-bind:src="imageUrl">

imageUrl是Vue实例中定义的一个数据，通过v-bind指令将其绑定到<img>标签的src属性上。当imageUrl发生变化时，<img>的src属性也会相应更新。

除了绑定属性的值，v-bind还可以绑定其他动态的表达式，如class、style等。

<div v-bind:class="{ 'active': isActive }"></div>
<div v-bind:style="{ color: textColor, fontSize: fontSize }"></div>

2.v-if，v-else

v-if指令： v-if指令用于根据表达式的真假值来有条件地渲染一块内容。如果表达式为真，则渲染该内容；如果为假，则不进行渲染。

<p v-if="isTrue">条件为真时显示的内容</p>

v-else指令： v-else指令必须紧跟在v-if指令之后使用，用于在v-if条件不满足时渲染另一块内容。

<p v-if="isTrue">条件为真时显示的内容</p>
<p v-else>条件为假时显示的内容</p>

3.v-else-if

v-else-if指令用于在v-if条件不满足时检查另一个条件，并在其满足时渲染一块内容。这使得我们能够按照多个条件顺序进行判断和渲染。

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>

4.v-for

v-for指令用于循环渲染一组数据，生成重复的HTML元素或组件。

<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    </li>
 
</div>

5.v-on

v-on指令用于监听DOM事件，并在事件触发时执行相应的方法。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<div id="app">
    <button v-on:click="sayHi">点我</button>
</div>
 
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:'Hello World'
        },
        methods:{
            sayHi:function(event){
                //'this'在方法里面指向当前Vue实例
                alert(this.message);
            }
        }
    });
</script>
</body>
</html>

v-on可以写成@。

三.双向绑定和组件

1.什么是双向绑定

在Vue.js中，双向数据绑定是指视图层的变化会同步更新到数据模型，同时数据模型的变化也会立刻反映到视图层。这种机制使得开发者无需手动操作DOM，而是通过操作数据模型就能够自动更新视图，从而简化了开发流程。

（1）.单行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    输入的文本：<input type="text" v-model="message" value="hello">{{message}}
</div>
 
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        }
    });
</script>
</body>
</html>

（2）.多行文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   多行文本：<textarea v-model="pan"></textarea>&nbsp;&nbsp;多行文本是：{{pan}}
</div>
 
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"Hello hello!"
        }
    });
</script>
</body>
</html>

（3）.单复选框

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<div id="app">
    单复选框：
    <input type="checkbox" id="checkbox" v-model="checked">
    &nbsp;&nbsp;
    <label for="checkbox">{{checked}}</label>
</div>
 
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            checked:false
        }
    });
</script>
</body>
</html>

（4）.多复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<div id="app">
    多复选框：
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="jack">Jack</label>
    <input type="checkbox" id="join" value="Join" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="join">Jack</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="mike">Mike</label>
    <span>选中的值：{{checkedNames}}</span>
</div>
 
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            checkedNames:[]
        }
    });
</script>
</body>
</html>

（5）.单复选框单选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<div id="app">
    单选框按钮
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <span>选中的值：{{picked}}</span>
</div>
 
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            picked:'Two'
        }
    });
</script>
</body>
</html>

2.什么是组件

在Vue.js中，组件是可复用的Vue实例，拥有自己的视图模板和逻辑代码，可以封装复杂的交互行为和UI元素，并以树形结构嵌套形式组成Vue应用程序。

组件的使用可以大幅度提高代码的复用性和可维护性，使得应用程序更加模块化、清晰和易于扩展。

Vue组件的基本语法如下：

Vue.component('my-component', {
  // 组件的选项
})

'my-component'表示组件的名称，后面的对象则包含了组件的各种选项，比如数据、计算属性、方法、生命周期钩子等等。

组件可以在其他Vue实例中进行注册并使用，例如：

<my-component></my-component>

四.路由

1.什么是路由

Vue的路由是指Vue.js框架中用于管理页面导航和视图切换的机制。它允许开发者根据URL的不同，动态地加载不同的组件，并将其呈现在应用程序的视图中。

Vue的路由通常是通过vue-router库来实现的。vue-router是Vue.js官方提供的扩展库，用于在单页应用程序（Single Page Application，SPA）中实现路由功能。

使用vue-router可以定义不同的路由规则，每个路由规则都对应一个URL路径和需要加载的组件。当用户访问对应的URL时，vue-router会根据路由规则动态地加载相应的组件，并将其渲染到应用程序的视图中。

2.路由的应用

在Vue.js中，路由（Router）用于管理应用程序的导航和视图切换。Vue.js提供了官方的vue-router库，用于实现单页面应用程序（SPA）中的路由功能。

1.安装路由

要使用vue-router，首先需要安装vue-router库：

npm install vue-router

然后，在Vue应用程序中，可以通过以下方式来配置和使用路由：

2.创建路由实例：

在创建Vue应用程序之前，需要创建一个路由实例，并定义路由规则。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

3.将路由实例挂载到Vue应用程序中：

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

4.在Vue组件中使用路由：

通过<router-link>组件可以在应用中实现导航链接，而<router-view>组件则用于显示当前路由匹配到的组件。

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>

2301_77534494

关注

18
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
vue.js学习总结

Vue.js是一个流行的JavaScript框架，用于构建用户界面和单页应用程序。Vue.js采用了MVVM（Model-View-ViewModel）架构模式，使开发者可以轻松地在前端构建可复用组件和交互式用户界面。Vue.js的核心是一个响应式的数据绑定系统，它可以自动将数据和DOM进行绑定，当数据变化时，相应的DOM也会自动更新。Vue.js还提供了一些常用的指令、组件和插件，如v-if、v-for、v-on、v-model等，使得开发者可以更方便地实现各种功能。
复制链接

扫一扫