Vue基础教学

最新推荐文章于 2024-02-27 20:14:13 发布
最新推荐文章于 2024-02-27 20:14:13 发布
阅读量139 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77306686/article/details/131796139
版权

Vue.js 是一款轻量级、渐进式的 JavaScript 框架，用于构建用户界面。它将视图层和数据层分离，通过双向数据绑定实现了响应式的数据渲染和交互。

以下是 Vue.js 的基础知识：

实例

1. Vue 实例：Vue.js 应用程序的起点是一个 Vue 实例，它是 Vue 应用程序中的根实例，用于管理应用程序的状态和行为。可以使用 new Vue() 语法来创建一个 Vue 实例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 创建vue的方法 -->
    <div id="app">
        <!-- 插值语法 -->
        <h1>
            {{msg}}
        </h1>
    </div>
    <h1 class="app">
        {{msg}}
    </h1>
    <!-- 引入vue.js文件 -->
    <script src="../vue.js"></script>
    <script>
        /* 实例化 vue */
        const vm=new Vue({
            /* 挂载dom */
            /* el 是elment的缩写 */
            /*  el: '选择器名称' */
            el:'.app',
            /* 初始化页面数据 */
            /* 原生js通过 dom控制页面的改变 */
            /* vue通过data里面的数据 改变页面 */
            data:{
                /* 和对象的写法一模一样 定义数据 */
                msg:'hello Vue'
            }
        })
    </script>
</body>
</html>

模板

2. 模板：Vue 使用模板语法来描述 DOM 结构和数据绑定。模板是一个 HTML 片段，可以包含 Vue 的特殊标记，如指令、表达式和事件。

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '这是一个标题',
      list: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' },
      ],
    };
  },
};
</script>

<style>
h1 {
  color: red;
}
</style>

数据绑定

3. 数据绑定：Vue 使用双向数据绑定来实现视图和模型之间的数据同步。当数据发生变化时，视图会自动更新，反之亦然。

双向绑定：

<template>
  <div>
    <input v-model="message" type="text">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

计算属性

4. 计算属性：计算属性是基于其他属性计算而来的属性，它们可以缓存计算结果，以提高应用程序的性能。

<template>
  <div>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} - ￥{{ item.price }}
      </li>
    </ul>
    <p>Total: ￥{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        { id: 1, name: "商品1", price: 10 },
        { id: 2, name: "商品2", price: 20 },
        { id: 3, name: "商品3", price: 30 }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((total, item) => total + item.price, 0);
    }
  }
};
</script>

内置指令

5. 指令：Vue 的指令是一种特殊的 HTML 属性，它们可以用于操作 DOM 元素、绑定事件、条件渲染和列表渲染等。常用指令包括 v-bind、v-if、v-for、v-on 等。

 1. 插值语法

            {{ 数据名 }}

            插值语法里面可以使用 非赋值运算符，以及一些非赋值的方法

        2. v-html  

            作用： 可以把数据里面的标签渲染到页面上,

            相当于原生js的innerHTML

        3. v-text

            作用:

                可以把数据的内容渲染出来，不会渲染HTML标签

                相当于原生的 innerText

        4. v-bind:

            数据绑定

            用法：

                v-bind:属性名="数据"

                简写:

                :属性名="数据"

        5. v-on:

            事件绑定

                所有的事件要写在methods里面

            绑定用法:

                v-on:事件名="函数名()"

                简写:

                @事件名="函数名"

            事件修饰符:

                @keydown.enter = "函数名()"

                只有在按下enter键的时候才会触发函数

        6. v-model:

            作用：

                用在表单元素(input,textarea,select):

                v-model会自动寻找需要绑定的属性，

                实现数据，页面的双向绑定，

                数据变，页面变；页面变，数据变

        7. v-if, v-else-if,v-else

  1.             用法:

                v-if="条件判断"

            条件满足，显示该标签，不满足条件的标签不会显示在dom树中，也不会显示到页面上

        8. v-show

            用法:

                v-show="条件判断"

            条件满足，显示该标签，不满子的条件标签不会显示到页面上，但是会在dom中，通过display:none不让它显示在

            页面上

     

生命周期

6. 生命周期：Vue 实例有一系列的生命周期钩子函数，用于在组件的不同阶段执行某些操作。常用的生命周期钩子函数包括 created、mounted、updated 和 destroyed。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
            生命(生 -> 死):
                创建，销毁结束;
            周期:
            组件也有自己的生命周期:
                创建过程;
                    创建前(beforeCreate)
                        vue实例还没有被创建，data里面的数据不可被调用;
                        也就是this.数据名 无效,页面仍然处于最原始的状态
                    创建后(created)
                        vue实例已经被创建，这个钩子函数是第一个能够访问到
                        data数据的钩子函数;页面仍然是最原始的状态，
                        虚拟dom还没有开始生成;
                挂载过程;
                    挂载前(beforeMount)
                        虚拟dom已经生成，但是还没有渲染到页面上，
                        但是这个钩子函数，做任何的dom操作，都不奏效;
                        因为，在这个钩子函数里面删除的所有的dom，
                        都已经被虚拟dom拷贝了一份，
                    挂载后(mounted)
                        所有的dom都已经渲染到了页面上，dom是最新的;
                        页面也是最新的; 组件的初始化已经完成了
                更新过程;
                    更新前(beforeUpdate)
                        页面更新前，数据是最新的，但是页面还是旧数据;
                    更新后(updated)
                        页面的是最新的，数据也是最新的;
                销毁过程;
                    销毁前(beforeDestroy)
                        实例销毁前都会触发的事件;
                    销毁后(destroyed)
                        这个生命周期是最后一次，能够调用事件以及data里面数据的钩子函数
                        销毁后，页面的所有操作，都不在生效;
                        页面还在;
                        一般在这个生命周期，做一些，停止计时器，清空内存等操作;
                称为 组件的四大生命周期;

                八小份生命周期 都有自己的钩子(vue对象里面的函数)函数;
         -->
         <button @click="number = 456">
            按钮
         </button>
        {{ number }}

        <button @click="kill()">
            销毁vue实例
        </button>
    </div>
    <script src="./vue.js"></script>
    <script>

        // 实例化
        const vm = new Vue({
            // 挂载dom
            el: '#app',
            methods: {
                kill(){
                    // 销毁生命周期
                    vm.$destroy()
                }
            },
            data() {
                return {
                    number: 123
                }
            },
            // 创建前的生命周期
            beforeCreate() {
                console.log(this.number);
                // 前端代码断点调试
                debugger
            },
            // 创建后的生命周期
            created() {
                // 一般做些数据的请求操作，页面刚开始加载的时候
                // 需要的数据
                console.log(this.number);
                debugger
            },
            // 挂载前的生命周期
            beforeMount() {
                document.querySelector('button').remove();
                debugger
            },
            // 挂载后的生命周期
            mounted() {
                // 一般做一些，页面加载后需要进行的dom操作;
                // vue一般不提倡直接控制dom
                debugger
            },
            // 更新前
            beforeUpdate() {
                console.log(this.number);
                debugger
            },
            // 更新后
            updated() {
                debugger
            },
            // 销毁前
            beforeDestroy() {
                debugger
            },
            // 销毁后
            destroyed() {
                debugger
            },
        })
    </script>
</body>
</html>

组件

7. 组件：组件是 Vue 中的重要概念，它允许开发人员将页面分解为具有相同功能的小组件。组件可以嵌套和复用，使应用程序更易于维护和开发。

// 定义一个组件
Vue.component('my-component', {
  data: function() {
    return {
      message: 'Hello, Vue!'
    }
  },
  template: '<div>{{ message }}</div>'
})

// 在Vue应用程序中使用组件
new Vue({
  el: '#app',
  template: '<my-component></my-component>'
})

路由

8. 路由：Vue 提供了 vue-router 插件，用于管理应用程序的路由。路由可以帮助开发人员在不同的 URL 和组件之间进行导航和交互。

<!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>
<body>
  <script src="vue.js路径"></script>
  <script src="vue-router.js路径"></script>

  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
  
  <script>
    // 1. 定义 (路由) 组件。
    // 可以从其他文件 import 进来
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')

    // 现在，应用已经启动了！
  </script>
</body>
</html>

来点小菜
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue.js基础教学视频源码 5天内容
09-21
这个"vue.js基础教学视频源码 5天内容"提供了一套完整的 Vue 学习路径，适合初学者快速上手。通过这五天的学习，你可以从零开始掌握Vue的基础概念和核心特性。 第一天：Vue 概览与安装 在第一天的学习中，你将了解...
Vue入门视频教学
04-16
Vue入门视频教学
Vue入门教程
Zz1366的博客
05-08 6190
Vue快速入门
vue 最详细教学篇（一）
m0_50080847的博客
02-06 956
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。官网地址在这里>>MarkdownText-to-HTMLAuthorsJohnLuke。
vue.js入门教学
2301_78534023的博客
01-04 2240
web开发简史：在1995年前互联网早期阶段，开发复杂、功能简单、无前后端这一说法；1995~2005年服务器模板时代，以ASP、JSP、PHP为代表，所有业务逻辑都写到页面中，当时的页面简单，基本逻辑实现都由服务端执行；2006~2015年服务器MVC时代，以java SSH、ASP.NET MAC等为代表、此时产生前后端的概念，但是前后端不分离，特点是：业务逻辑分层；2012后前后端分离时代，JavaScript进入飞速发展阶段，2014年vue.js应运而生，前后端开发模式逐渐成为主流。
VUE教程
最新发布
风情
02-27 846
vh”是css中的一个相对长度单位，是相对于视窗的高度，“100vh”就是指元素的高度等于当前浏览器的视窗高度，即浏览器内部的可视区域的高度大小。要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params。当执行vue --version时，如果安装了@vue/cli 那么得到的是@vue/cli的版本，而不是vue的。官方文档地址：https://vuejs-templates.github.io/webpack/
vue.js基础01--基础用法及内部指令
muzidigbig的博客
07-25 4252
一、vue的概述及vue的入门小实例 vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作D... v-if和v-for为什么不建议同时使用
vue教学代码.zip
12-03
3. **资料（含课件）**：这部分很可能是Vue.js的学习资料，包括教程、PPT、PDF文档等，可能涵盖了Vue的基础概念、路由、状态管理Vuex、Vue CLI的使用，甚至可能包含一些实战项目案例。 4. **daima**：这个目录可能...
VUE.JS视频教学-入门到精通-全套
07-04
vue.js视频教程从入门到精通，全套视频，好东西就要分享，祝愿所有的开发小伙伴能学到东西。
Hh-VUE:使用vue编写的教学管理系统
03-21
在"HH-VUE"教学管理系统中，Vue.js不仅提供了构建界面的基础，还通过Vue Router和Vuex等工具解决了路由和状态管理问题。结合现代前端最佳实践，Vue使得这个系统的开发变得高效且易于维护。学习和掌握Vue.js，对于...
Vue入门详细讲解
分享技术热点，看天下大事
07-21 106
路由管理：Vue 提供了 Vue Router 插件，用于实现页面路由功能，能够在不同的页面之间进行切换。数据绑定：Vue 使用数据驱动的思维方式，可以将数据和 DOM 元素进行绑定。生命周期钩子：Vue 提供了一些生命周期钩子函数，用于在组件的不同阶段执行相应的操作。状态管理：Vue 可以与 Vuex 搭配使用，实现全局状态管理，方便应对复杂的应用程序状态。安装 Vue：可以通过 CDN 引入 Vue，也可以使用 npm 或 yarn 安装。指令：Vue 提供了各种指令，用于操作 DOM 元素。
【前端开发---Vue3】前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！
m0_67844671的博客
09-28 1万+
前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！内容包括Vue3项目的创建，Vue2与Vue3的区别，路由，组件，各种组件之间的传值等；
vue教程
sslcsq的博客
03-29 3663
vue教程
Vue的详细教程--入门
m0_74315688的博客
09-16 2168
什么是vue？它有什么优势？怎么使用vue？vue的基本语法如何掌握？ 如果你也有疑问的话，不妨点进来看看呢！！
【前端开发---Vue2】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
热门推荐
m0_67844671的博客
09-27 2万+
【超详细Vue2教程】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
从零开始搭建一个vue项目（保姆级教程）
weixin_50989469的博客
07-23 4278
我这边在本地起了一个后台服务（建议后台服务做好跨域配置），模拟接口访问调用，一共测试了三种方式：①get无参请求 ②get有参请求 ③post请求json传参。新建api文件夹，放在api文件夹下，需要引入http文件，js文件地址：src/api/pageB.js。项目建好之后，就可以配置ui组件了，可以选择npm去装，也可以选择yarn安装，我把两个命令都列出来了。第二步，选择【Vue.js】，输入自己项目的名称，点击【Create】生成项目。在main.js中import之后，ui组件才正式生效。
Vue基础操作（新手看这章就对了）
zky__sch的博客
08-02 245
Vue 里面data属性之所以不能写成对象的格式，是因为对象是对地址的引用，而不是独立存在的。如果一个.vue 文件有多个子组件共同接收一个变量的话，改变其中一个子组件内此变量的值，会影响其他组件的这个变量的值。如果写成函数的话，那么他们有一个作用域的概念在里面，相互隔阂，不受影响。在vue中v-xxx就是vue的指令，指令就是以数据去驱动DOM行为的,简化DOM操作。冒泡发生的情景：子元素和父元素绑定了相同的事件，然后点击了子元素，父元素也触发了该事件。用于储存数据，数据供el指定的容器使用。
springboot+vue线上教学平台源码
06-07
SpringBoot和Vue结合的线上教学平台源码是一种开源的教育解决方案，它使用SpringBoot作为后端框架，以及Vue.js作为前端框架。该教学平台提供了用户管理、课程管理、在线测试、资料下载、讨论板块等多项教学功能，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值