【前端开发】之 Vue 入门

最新推荐文章于 2024-06-12 08:41:10 发布
最新推荐文章于 2024-06-12 08:41:10 发布
阅读量162 收藏
点赞数
分类专栏： 前端开发 文章标签： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aiwangtingyun/article/details/107620786
版权

Vue 简介

1、Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方网站：https://cn.vuejs.org

2、初始Vue.js

Vue 的默认格式写法比较固定，大致为如下格式：

<!-- id标识vue作用的范围 -->
<div id="app">
    <!-- {{}} 插值表达式，绑定vue中的data数据 -->
    {{ message }}
</div>
<!-- 引入 vue.js 路径根据实际情况调整 -->
<script src="vue.min.js"></script>
<script>

    // 创建一个vue对象
    new Vue({
        el: '#app',	//绑定vue作用的范围
        data: {		//定义页面中显示的模型数据
            message: 'Hello Vue!'
        }
    })

</script>

以上就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

这里的核心思想就是没有繁琐的 DOM 操作，例如 JQuery 中，我们需要先找到 div 节点，获取到 DOM 对象，然后进行一系列的节点操作。

在 Vs Code 中创建代码片段：

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html

注意：制作代码片段的时候，字符串中如果包含文件中复制过来的“Tab”键的空格，要换成“空格键”的空格

{
	"vue htm": {
		"scope": "html",
		"prefix": "vuehtml",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"",
			"<head>",
			"    <meta charset=\"UTF-8\">",
			"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"    <title>Document</title>",
			"</head>",
			"",
			"<body>",
			"    <div id=\"app\">",
			"",
			"    </div>",
			"    <script src=\"vue.min.js\"></script>",
			"    <script>",
			"        new Vue({",
			"            el: '#app',",
			"            data: {",
			"                $1",
			"            }",
			"        })",
			"    </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "my vue template in html"
	}
}

二、基本语法

1、基本数据渲染和指令

data: {
    content: '我是标题',
    message: '页面加载于 ' + new Date().toLocaleString()
}

<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
     此时title中显示的是模型数据
-->
<h1 v-bind:title="message">
    {{content}}
</h1>

<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 :title="message">
    {{content}}
</h1>

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

2、双向数据绑定

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定

data: {
    searchMap:{
        keyWord: '百度'
    }
}

<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定  -->
<input type="text" v-model="searchMap.keyWord">

<p>您要查询的是：{{searchMap.keyWord}}</p>

3、事件

**需求：**点击查询按钮，按照输入框中输入的内容查找公司相关信息

在前面的例子基础上，data 节点中增加 result，增加 methods 节点并定义 search 方法

data: {
     searchMap:{
         keyWord: '百度'
     },
     // 查询结果
     result: {}
},
methods:{
    search(){
        // 修改查询结果
        this.result = {
            "title":"百度",
            "site":"http://www.baidu.com"
    	}
    }
}

html 中增加 button 和 p

使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

<!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
<button v-on:click="search()">查询</button>

<p>您要查询的是：{{searchMap.keyWord}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>

对于 v-on 绑定事件可以简写为：

<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>

4、修饰符

修饰符 (Modifiers) 是以半角句号**（.）**指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()，即阻止事件原本的默认行为：

data: {
    user: {}
}

<!-- 修饰符用于指出一个指令应该以特殊方式绑定。
     这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：
     即阻止表单提交的默认行为 -->
<form action="save" v-on:submit.prevent="onSubmit">
    <label for="username">
        <input type="text" id="username" v-model="user.username">
        <button type="submit">保存</button>
    </label>
</form>

methods: {
    onSubmit() {
        if (this.user.username) {
            console.log('提交表单 : ' + this.user.username)
        } else {
            alert('请输入用户名')
        }
    }
}

5、条件渲染

v-if：条件指令

data: {
    ok: false
}

注意：单个复选框绑定到布尔值

<input type="checkbox" v-model="ok">同意许可协议
<!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
<h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
<h1 v-else>no</h1>

v-show：条件指令

使用v-show完成和上面相同的功能

<!-- v:show 条件指令 初始渲染开销大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>
  • v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  • v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
  • 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
  • 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6、列表渲染

v-for：列表循环指令

简单的列表渲染

<!-- 1、简单的列表渲染 -->
<ul>
    <li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
    <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
    <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>

遍历数据列表

data: {
    userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
    ]
}

<!-- 2、遍历数据列表 -->
<table border="1">
    <!-- <tr v-for="item in userList"></tr> -->
    <tr v-for="(item, index) in userList">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
    </tr>
</table>

三、组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

在这里插入图片描述

1、局部组件

定义组件：

var app = new Vue({
    el: '#app',
    // 定义局部组件，这里可以定义多个局部组件
    components: {
        //组件的名字
        'Navbar': {
            //组件的内容
            template: '<ul><li>首页</li><li>学员管理</li></ul>'
        }
    }
})

使用组件：

<div id="app">
    <Navbar></Navbar>
</div>

2、全局组件

把组件单独写在一个 js 脚本文件中：components/Navbar.js

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

<div id="app">
    <Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<!-- 引入组件脚本 -->
<script src="components/Navbar.js"></script>
<script>
    var app = new Vue({
        el: '#app'
    })
</script>

四、实例生命周期

下面是 Vue 生命周期示例图：

在这里插入图片描述

下面以代码示例来讲解 Vue 的生命周期：

data: {
    message: '床前明月光'
},
methods: {
    show() {
        console.log('执行show方法')
    },
    update() {
        this.message = '玻璃好上霜'
    }
},

<button @click="update">update</button>
<h3 id="h3">{{ message }}</h3>

分析生命周期相关方法的执行时机

//===创建时的四个事件
beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行
    console.log(this.message) //undefined
    this.show() //TypeError: this.show is not a function
    // beforeCreate执行时，data 和 methods 中的 数据都还没有没初始化
},
created() { // 第二个被执行的钩子方法
    console.log(this.message) //床前明月光
    this.show() //执行show方法
    // created执行时，data 和 methods 都已经被初始化好了！
    // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount() { // 第三个被执行的钩子方法
    console.log(document.getElementById('h3').innerText) //{{ message }}
    // beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
},
mounted() { // 第四个被执行的钩子方法
    console.log(document.getElementById('h3').innerText) //床前明月光
    // 内存中的模板已经渲染到页面，用户已经可以看见内容
},


//===运行中的两个事件
beforeUpdate() { // 数据更新的前一刻
    console.log('界面显示的内容：' + document.getElementById('h3').innerText)
    console.log('data 中的 message 数据是：' + this.message)
    // beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染
},
updated() {
    console.log('界面显示的内容：' + document.getElementById('h3').innerText)
    console.log('data 中的 message 数据是：' + this.message)
    // updated执行时，内存中的数据已更新，并且页面已经被渲染
}

五、路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库。

1、引入 js

<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

2、编写 html

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/">首页</router-link>
        <router-link to="/student">会员管理</router-link>
        <router-link to="/teacher">讲师管理</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

3、编写 js

<script>
    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Welcome = { template: '<div>欢迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    const app = new Vue({
        el: '#app',
        router
    })

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

六、axios

axios 是独立于 vue 的一个项目，基于 promise 用于浏览器和 node.js 的 http 客户端

  • 在浏览器中可以帮助我们完成 ajax 请求的发送
  • 在 node.js 中可以向远程接口发送请求

1、获取数据

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>

注意：测试时需要开启后端服务器，并且后端开启跨域访问权限

var app = new Vue({
    el: '#app',
    data: {
        // 定义变量，值空数组
        memberList: []
    },
    created() {	// 页面渲染之前执行
        this.getList()
    },
    methods: {
        getList(id) {
            // 使用 axios 发送 ajax 请求
            // axios.提交方式("请求接口路径").then("箭头函数").catch("箭头函数")
            axios.get('http://localhost:8081/admin/ucenter/member')
            .then(response => {
                console.log(response)
                this.memberList = response.data.data.items
            })
            .catch(error => {
                console.log(error)
            })
        }
    }
})

控制台查看输出

2、显示数据

<div id="app">
    <table border="1">
        <tr>
            <td>id</td>
            <td>姓名</td>
        </tr>
        <tr v-for="item in memberList">
            <td>{{item.memberId}}</td>
            <td>{{item.nickname}}</td>
        </td>
    </tr>
</table>
</div>

七、element-ui：

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建

官网： http://element-cn.eleme.io/#/zh-CN

1、引入 css

<!-- import CSS -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

2、引入 js

<!-- import Vue before Element -->
<script src="vue.min.js"></script>
<!-- import JavaScript -->
<script src="element-ui/lib/index.js"></script>

3、编写 html

<div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
    </el-dialog>
</div>

关于.sync的扩展阅读

https://www.jianshu.com/p/d42c508ea9de

4、编写 js

<script>
    new Vue({
      el: '#app',
      data: function () {//定义Vue中data的另一种方式
        return { visible: false }
      }
    })
</script>
王廷云的博客
关注
专栏目录
前端网页技术之 Vue
cgblpx的博客
08-02 5万+
文章目录VueVue概念同类产品官网特点渐进式框架入门案例.html改造入门案例.htmlMVVM框架基础语法运算符 operator方法 methodsVue解析数据三种data值的写法高级用法：v-命令指令集双向绑定 v-model闪现 v-cloak判断 v-if循环 v-for事件 v-on绑定 v-bind小结Vue组件概述使用测试Vue路由概述使用步骤入门案例Vue的AjaxAjax概述Ajax原理axios测试常见错误Vue的生命周期lifecycle概述测试扩展：观察者设计模式HBuilde
写给前端初学者的Vue入门教程
doomliu的博客
05-13 2278
一、web应用开发 Vue是一款优秀的web应用开发框架，使用它可以让我们开发web应用时候更加高效。在学习Vue之前需要先了解一下web应用开发。 什么是web应用？当我们开发web应用时候，我们在写什么？ 从用户角度，web应用是一个可以提供用户交互并呈现信息的软件。 用户在使用一个web应用的时候，可以通过点击、输入、滑动、语音等等与应用进行交互，控制应用。应用通过界面、音频方式给用户呈现信息，比如电商类应用，用户可以通过搜索和选择查看需要的商品信息；视频类应用，用户可以通过搜索和
前端基础-VUE入门教程(一)
hjw15910531612的博客
07-21 3428
总结了Vue实例创建、模板语法、数据绑定、MVVM模型、数据代理等相关知识
Vue前端+快速入门【详解】
qq_1424674116的博客
03-04 3050
1.MVVM思想原始HTML+CSS+JavaScript开发存在的问题：操作麻烦，耦合性强为了实现html标签与数据的解耦，前端开发中提供了MVVM思想：即Model-View-ViewModel：Model: 数据模型，指要展示到页面上的数据。在web开发中通常从服务端获取到数据，再把这些数据展示出来View: 视图，用于展示数据的各种html标签ViewModel: 视图模型控制中心，负责把Model数据显示到View里，也负责从View里收集数据到Model里。Vue框架就承担了这个角色。
前端开发：Vue框架与前端部署
qq_50086023的博客
02-17 2519
前端开发：Vue框架与前端部署
【前端开发---Vue3】前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！
m0_67844671的博客
09-28 2万+
前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！内容包括Vue3项目的创建，Vue2与Vue3的区别，路由，组件，各种组件之间的传值等；
一文帮你搞定前端vue开发Pinia的入门
qq_74637823的博客
01-10 1444
vue中的pinia
Vue.js 快速入门实战
热门推荐
努力是为了站在万人之中，成为别人的光
06-12 2万+
通过这个简单的待办事项列表应用，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和列表渲染。Vue.js 的设计使得它非常易于上手，并且能够与其他库或已有项目无缝整合。希望这篇文章能帮助你快速入门 Vue.js，并为你的前端开发之旅打下坚实的基础。接下来，你可以继续学习 Vue 的其他特性，例如组件、路由和状态管理等，以便在更复杂的项目中更好地使用 Vue.js。祝你学习愉快！
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Web核心技术前端框架VUE入门
helpluozhao123的博客
01-21 2570
1，VUE 1.1 概述 Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。 我们之前也学习过后端的框架 Mybatis ，Mybatis 是用来简化 jdbc 代码编写的；而 VUE 是前端的框架，是用来简化 JavaScript 代码编写的。前一天我们做了一个综合性的案例，里面进行了大量的DOM操作，如下 学习了 VUE 后，这部分代码我们就不需要再写了。那么 VUE 是如何简化 DOM 书写呢？ ==基于MVVM(Model-View-ViewModel)思想，实现数据
Vue.js前端开发-快速入门与专业应用
03-07
Vue.js前端开发-快速入门与专业应用 Vue.js前端开发-快速入门与专业应用 Vue.js前端开发-快速入门与专业应用 Vue.js前端开发-快速入门与专业应用 Vue.js前端开发-快速入门与专业应用
前端开发-第一章Vue入门.pdf
07-10
开发Vue.js应用通常需要以下步骤： 1. 安装Node.js，因为Vue.js依赖npm（Node包管理器）进行包管理。 2. 使用Vue CLI（命令行工具）初始化项目，它提供了一套快速搭建应用的脚手架。 3. 配置Webpack（模块打包工具）...
Vue.js前端开发 PDF
05-30
Vue.js是目前非常流行的前端开发框架之一，被誉为前端三大框架之一，另外两个是React和Angular。Vue.js的设计理念是简洁、易用且高效，它旨在通过最小的学习曲线提供强大的功能，使得开发者能够快速构建交互式的用户...
FastReport 模版打印如何实现
09-20
FastReport 模版打印如何实现
使用运算放大器模拟反相放大器的闭环电压增益simulink.rar
最新发布
09-20
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
基于java的抗疫医疗用品销售平台设计与实现.docx
09-20
基于java的抗疫医疗用品销售平台设计与实现.docx
vue+SpringBoot749乡村日常政务管理系统的设计与实现java毕业设计源码含论文.rar
09-20
jdk版本:jdk1.8+ 前端：vue.js+ElementUI 开发工具：IDEA 或者eclipse都支持 编程语言: java 框架支持：springboot 数据库: mysql 版本不限 数据库工具：Navicat/SQLyog都可以 详细技术：java+springboot+vue+MYSQL+MAVEN 前端采用的Vue框架，后端采用java语言，sprinboot框架，mybatis操作数据源，使用软件：idea,eclipse、MySQL。完成了用户登录管理等模块的设计与实现。完成了系统数据库的设计，并基于MySQL数据库管理系统
java毕业设计源码ssm859基于SSM框架的线上DIY手工艺品综合平台+vue程序数据库含论文.rar
09-20
前端采用的Vue框架，后端采用java语言，ssm框架，mybatis操作数据源，使用软件：idea,eclipse、MySQL。完成了用户登录管理等模块的设计与实现。完成了系统数据库的设计，并基于MySQL数据库管理系统 本系统基于SSM(Spring+SpringMVC+MyBatis)框架,适用于毕业设计， 基于B/S模式, mysql数据库,感兴趣的朋友们可以下载研究一下。 jdk版本:jdk1.8+ 前端：vue.js+ElementUI 开发工具：IDEA 或者eclipse都支持 编程语言: java 框架支持：ssm 数据库: mysql 版本不限 数据库工具：Navicat/SQLyog都可以 详细技术：java+ssm+vue+MYSQL+MAVEN
java基于ssm+vue企业在线培训系统源码 带毕业论文
09-20
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；VUE技术 2、项目代码都经过严格调试，代码没有任何bug！下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
Vue.js前端开发实战：从入门到精通
"Vue.js 前端开发 快速入门与专业应用" Vue.js 是一款流行的前端JavaScript框架，由尤雨溪开发，用于构建用户界面。这本书《Vue.js 前端开发 快速入门与专业应用》由陈陆扬著，旨在帮助读者快速掌握Vue.js，并将其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值