vue.js 学习总结

月薪五毛程序员

已于 2023-12-26 21:01:57 修改

阅读量51

点赞数

文章标签： vue.js 学习前端

于 2023-12-26 20:58:43 首次发布

本文链接：https://blog.csdn.net/weixin_74442190/article/details/135228708

版权

介绍：

在学习vue.js前我首先需要了解他的编写者，Vue.js的作者是尤雨溪（Evan You），毕业于科尔盖特大学，是一位前端框架Vue.js的作者、HTML5版Clear的打造人、独立开源开发者。他曾就职于Google Creative Labs和Meteor Development Group。作为由中国人编写的前端框架我认为里面的语言结构更加适合中国人的编写习惯，对具有html和css基础的更加易于上手

调试插件推荐：

当你的项目能运行在浏览器打开后插件图标就会亮，或者点击f12健打开

在vscode我推荐的插件就是这个，使用方法如下：

以上就是我推荐的插件希望能帮到大家编写代码！！！

Vue.js的基本概念

Vue.js的核心概念包括组件、指令、过滤器、计算属性等。组件是Vue.js中最基本的单位，可以将页面拆分成多个小组件，使代码更加清晰和易于维护。指令可以用于操作DOM元素，例如v-if、v-for等。过滤器可以用来处理数据，例如将日期格式化为特定的字符串。计算属性可以根据其他属性的变化自动更新，避免了不必要的重复渲染

Vue.js 语法

Vue.js 使用 JavaScript 对象表示数据。Vue.js 实例的 data 属性包含数据对象，而 methods 和 computed 属性包含方法。

const app = new Vue({
 el: '#app',
 data: {
   message: 'Hello Vue!'
 },
 methods: {
   reverseMessage: function () {
     this.message = this.message.split('').reverse().join('');
   }
 }
});

Vue.js使用模板语法来描述视图的结构。模板语法非常简洁易懂，可以使用插值表达式、指令、事件绑定等方式来动态生成HTML代码。例如：

<div id="app">
  {{ message }}
</div>

Vue.js 组件

Vue.js 组件是可复用的视图，可以包含模板、数据、逻辑和方法。组件通过 is 属性进行定义

Vue.component('hello-world', {
 template: '<div>{{ message }}</div>'
});

Vue.js的生命周期

Vue.js 实例的生命周期包括创建、挂载、更新和销毁等阶段。

创建：实例被创建时，Vue.js 会进行数据绑定、事件配置、计算属性等初始化操作。
挂载：Vue.js 将实例的模板编译为 DOM，并将其插入到页面中。
更新：当数据发生变化时，Vue.js 会自动更新视图。

销毁：当组件被销毁时，Vue.js 会清理占用的资源。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created: function () {
    console.log('Component created')
  },
  destroyed: function () {
    console.log('Component destroyed')
  }
})

Vue.js的双向数据绑定

Vue.js的双向数据绑定是其最强大的特性之一。通过使用v-model指令，可以实现表单输入和应用状态之间的自动同步。例如：

<input v-model="message" />

此方法可用插件查看效果（效果如下）

以下是我上面图片中测试的双向绑定的代码：

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
      <div id="app">
          账号：  <input type="username" v-model="username" ><br>
          密码:  <input type="password" v-model="password"><br>
          <button @click="longin">登录</button>
          <button @click="re">重置</button>
      </div>     
      <script>
        var app=new Vue({
            el:"#app",
            data:{
                username:"",
                password:""
            },
            methods:{
                longin(){
                    console.log(this.username,this.password);
                },
                re(){
                    this.username="";
                    this.password="";
                }
            }
        })
      </script> 
</body>
</html>

计算属性

Vue.js 支持计算属性，如根据其他属性计算值。

Vue.component('counter', {
 data: function () {
   return {
     count: 0
   };
 },
 computed: {
   reversedCount: function () {
     return this.count.toString().split('').reverse().join('');
   }
 }
});

vue.js列表渲染

Vue.js 支持列表渲染，如 v-for。

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

vue.js路由列表

Vue.js提供了vue-router插件来实现路由管理。通过配置路由映射表，可以将不同的URL映射到对应的组件上，实现单页应用的页面切换效果。例如：

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

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

通过以上介绍，我们可以看到 Vue.js 是一款功能强大的框架，可以轻松构建用户界面。在实际开发中，我们可以根据需求灵活使用 Vue.js 的各种特性，提高开发效率。