Vue的学习与简单使用

最新推荐文章于 2024-07-02 00:50:11 发布
最新推荐文章于 2024-07-02 00:50:11 发布
阅读量756 收藏 1
点赞数
分类专栏： 前端技术学习 文章标签： vue java js web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45506970/article/details/105982986
版权

一、介绍

1、Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

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

2、初始Vue.js

创建 demo.html

<!-- id标识vue作用的范围 -->
<div id="app">
    <!-- {{}} 插值表达式，绑定vue中的data数据 -->
    {{ message }}
</div>
<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.code-snippets

  • 注意：制作代码片段的时候，字符串中如果包含文件中复制过来的“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、基本数据渲染和指令

创建 01-基本数据渲染和指令.html
你看到的 v-bind 特性被称为指令。指令带有前缀 v-
除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

data: {
    content: '我是标题',
    message: '页面加载于 ' + new Date().toLocaleString()
}
<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
     此时title中显示的是模型数据
-->
<h1 v-bind:title="message">
    {{content}}
</h1>
​
<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 :title="message">
    {{content}}
</h1>

2、双向数据绑定

创建 02-双向数据绑定.html
双向数据绑定和单向数据绑定：使用 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、事件

创建 03-事件.html
需求：点击查询按钮，按照输入框中输入的内容查找公司相关信息
在前面的例子基础上，data节点中增加 result，增加 methods节点 并定义 search方法

data: {
     searchMap:{
         keyWord: '尚硅谷'
     },
     //查询结果
     result: {}
},
methods:{
    search(){
        console.log('search')
        //TODO
    }
}
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>
完善search方法
search(){
    console.log('search');
    this.result = {
        "title":"尚硅谷",
        "site":"http://www.atguigu.com"
    }
}
简写
<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>

4、修饰符

创建 04-修饰符.html
修饰符 (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('提交表单')
        } else {
            alert('请输入用户名')
        }
    }
}

5、条件渲染
创建 05-条件渲染.html
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、列表渲染

创建 06-列表渲染.html
v-for：列表循环指令
例1：简单的列表渲染

<!-- 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>
例2：遍历数据列表
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、局部组件

创建 01-1-局部组件.html
定义组件

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

使用组件

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

2、全局组件

创建 01-2-全局组件.html
定义全局组件：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>

四、实例生命周期

创建 03-vue实例的生命周期.html

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 库

创建 04-路由.html
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) {
            //vm = this
            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

  • 创建 06-element-ui.html

  • 将element-ui引入到项目

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>

测试

其他ui组件我们在项目中学习

八、获取源码请关注

在这里插入图片描述

学习Java的唐唐
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个简单的vue框架，供学习使用
07-12
一个简单的vue框架，供学习使用
FEProjectDemos:Vue学习中使用的demo
05-19
Vue学习系列（7/7） Vue源码学习系列（8/15） ElementUI源码学习系列（4/8） mint ui源码学习系列 Vuex 源码学习系列 vue-router 源码学习系列 weex 源码探究 Vue 相关技术栈用法和源码学习系列 …… Plan 今年目标...
vue基础——java程序员版(vue入门)
陨石的博客
03-19 1500
​ 这是一个java程序员的vue学习记录。
VSCode搭建Vue项目
wolf艺术人生
10-21 345
1、安装哈vscode和nodejs 2、全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目 npm install -g vue-cli 3、安装webpack，它是打包js的工具 npm install -g webpack 4、安装完成之后就可以开始创建vue项目，首先创建一个文件夹用来存放你的项目，用vscode打开对应的文件夹，并在终端cd到对应的文件夹。比如我的文件夹就是myvue vue init webpack myvue 这里可能会遇到问题。会报con
使用VSCode配置简单的vue项目
baiyongliang
08-21 1034
由于最近要使用的项目框架为前后端分离的，采用的是vue.js+webAPI的形式进行开发的。因为之前我没有接触过vue.js，也只是通过视频文档做了一些简单的练习。今天技术主管说让大家熟悉下VSCode开发vue，所以自己摸索了好久，才算是把简单的项目配置成功了。后续还得自己多了解这方面的知识。想着怕时间长了自己会忘记，所以写下来也供有需要的人一起学习。 一.配置环境 1.1下载VSCode,官网直接下载就行。https://code.visualstudio.com/Download 1.2汉化..
1. Windows 10 - Node与Vue - 安装 Vue 2.x 及 3.x 框架 - 项目创建要点
Muxiu
05-13 6364
目录一、vue 简介：二、设置node的全局和缓存路径手动创建node.js的全局和缓存路径目录Windows命令行配置node.js的全局和缓存路径三、安装 Vue 框架提升安装 Vue 框架速度的方法1、设置淘宝镜像手动配置系统环境变量正式安装 Vue 框架1、安装Vue-cli脚手架2、创建 Vue 项目3、访问已测试是否创建运行成功Vue 框架脚手架版本的替换方法1、3.0以下切换至3.0以上2、 3.0以上切换回3.0以下 一、vue 简介： vue的运行是要依赖于node的npm的管理工具来实现
搭建vscode+vue环境
热门推荐
mao834099514的博客
01-23 16万+
一、安装vue.js1.简介Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现
vue+Nodejs+Koa搭建前后端系统（六）-- 用户登录
小阳的博客
06-19 1075
如果有vue-router，就略过这一小节。 vue-router完整教程：点这里>>第一步：npm安装 第二步：新建路由文件 router/index.ts 用来配置路由，新建pages目录用于存放页面文件第三步：在pages目录中添加登录页（login）和首页（index），以备路由使用 两个页面的内容先简单写成显示“index”和"login"，以index页为例： 第四步：编写路由配置文件在 router/idnex.ts 文件中编写如下代码 （若要使用alias别名，请参阅《VUE+ts项目配置–
详解vue中使用protobuf踩坑记
10-17
Vue.js 是一款流行的前端框架，用于构建用户界面。在 Vue 中使用 Protocol Buffers（简称protobuf）可以帮助我们更...通过不断实践和学习，你可以熟练掌握在 Vue 中使用 protobuf 的技巧，从而提高项目的效率和性能。
谷歌vue调试插件，学习vue使用
12-04
Vue.js DevTools 只能与未压缩的vue.js文件配合使用，因为压缩过的vue.min.js文件包含了优化代码，无法直接进行源码级别的调试。 安装Vue.js DevTools的步骤如下： 1. 打开谷歌Chrome浏览器，进入设置页面（chrome...
搭建vscode+vue环境的详细教程
11-19
一、安装vue.js
Vue学习20210314.pdf
08-27
Vue.js 是一款流行的前端JavaScript框架，用于构建...总的来说，这篇Vue学习总结涵盖了从环境配置到基础语法和指令的讲解，是初学者入门Vue的良好资源。理解并掌握这些知识，将有助于开发者构建高效、动态的前端应用。
Vue Markdonwn学习笔记
11-17
Vue Markdown学习笔记主要涵盖了使用Vue.js框架与Markdown语法结合，以构建高效、可维护的文档和界面的知识。Vue.js是一个轻量级的前端JavaScript框架，它以组件化开发为核心，而Markdown则是一种简洁的标记语言，常...
Vue2学习（一）：Node.js安装以及配置
阿标的博客
02-05 1386
Node.js安装以及配置
前端开发node.js、vue安装环境【安装node版本管理工具-nvm，耗时一天时间踩坑总结】
在写作的路上持续输出。
09-23 2688
前端node版本管理工具nvm安装与使用【 避坑指南】耗时一天踩坑总结
Vue入门（Vscode）
qq_34253002的博客
11-10 1167
Vue是一套构建用户界面的渐进式框架。只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件【解决前端开发痛点“复杂的dom操作”】
Vue 组件基础
JmuziA的博客
12-17 323
VUE 一. 开发工具 VUE开发环境个人推荐使用VS code, 然后安装特定的插件即可开发，可用插件如下： Vetur —— 语法高亮、智能感知、Emmet等 EsLint—— 语法纠错 Auto Close Tag —— 自动闭合HTML/XML标签 Auto Rename Tag —— 自动完成另一侧标签的同步修改 Path Intellisense —— 自动路劲补全 HTML CS...
vsCode搭建vue环境,（亲身经历，真实可靠）
qq_65255086的博客
02-02 582
6.我建议切换到D盘，尽量不要装在C盘，因为vue的文件比较大，如果要改盘的话，直接输入D：回车就可以直接改盘。然后我们开始创建新的项目输入命令：vue init webpack my-vue 回车，my-vue是我自己的文件夹的名字，（建议项目名称不要大写不然会报错，听别人说的我没试过哈），输入之后就一直回车，直到出现‘’是否要安装vue-router‘’，这个我们在项目要用到，所以就输入y 回车就好。5.输入Vue - V,显示版本号表示安装成功。4.安装完后输入Vue，显示信息即可。
10.javaSE基础_JDBC编译程序(Driver+Statement+Connection+mysql数据库连接)
最新发布
m0_61086522的博客
07-02 1213
JDBC是的缩写。它是Sun的Javasoft公司制定的Java数据库连接技术，是一套标准接口java.sql包中提供了JDBC API,通过它连接到各种数据库系统，编写访问数据库的程序。JDBC API不能直接访问数据库，它依赖于数据库厂商提供的JDBC Driver（JDBC驱动程序）
vue文档(重点学习).docx
02-15
vue文档(重点学习).docx

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值