Day42——Vue学习笔记

最新推荐文章于 2020-11-25 05:02:54 发布
最新推荐文章于 2020-11-25 05:02:54 发布
阅读量196 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013583756/article/details/104640119
版权

Vue入门

文章目录

它为前端框架

前端化工程

开发工具：VScode（推荐）

前端环境：NodeJS

下载地址：

https://code.visualstudio.com/docs/?dv=win

https://nodejs.org/en/

如何验证安装好：

VScode可以正常打开

NodeJS 已配置环境变量

在cmd中输入node -v ，npm -v 来验证安装

NodeJS学习

NodeJS为一个在服务器端能够运行JavaScript的环境

前端版的Maven（核心为pom.xml）

NodeJs的核心package.json

打开VScode后，

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vg5G8b5N-1583237425403)(VUE.assets/1583236786842.png)]

建立新文件夹后，在终端中打开，使用下面命令进行配置

npm init -y 初始化一个基本的配置文件

# 安装环境 npm install 包名 -g(全局)
npm install express -g
# npm 默认仓库在国外，设置镜像到淘宝
npm config set regisry http://registry.npm.taobao.org
npm config list

# npm install 依赖
npm install jquery
npm install jquery@3.4.1

# --save-dev 或 -D 代表这个只在开发环境中有效，不会打包出去
npm install --save-dev eslint
npm install -D eslint

# 自动下载项目中的依赖package.json
npm install

# 自动更新包名
npm update 包名
# 卸载某个包
npm uninstall

# 后面开发基于ES6，但浏览器支持的是es5规范，所以需要webpack打包，自动将es6转为es5（用cmd以管理员身份运行）
npm install -g webpack webpack-cli
webpack -v

# 安装babel-cli（以管理员身份运行）
npm install -g babel-cli
babel --version

使用VScode进行学习

在目录下新建一文件夹存放所写代码

一、首先建立01-demo.js文件，先从控制台程序学习

console.log("hello,Node")

在终端打开后输入

PS D:\environment\41.20-3-2\Vue\nodejs\node-start> node .\01-控制台程序.js

就会打印出hello,Node

二、认识第二个程序，从建立服务器响应数据至前端页面

const http = require('http')
http.createServer(function (request, response) {
  // 设置响应头文件
  response.writeHead(200, { 'Content-Type': 'text/plain' })
  // 发送数据
  response.end("hello,server")
}).listen(8080)
//在8080端口号监听
console.log("server is running... port:8080")

像第一个程序一样在终端打开，输入

node .\02-server-app.js

会打印server is running… port:8080，在浏览器中输入localhost:8080访问，页面打印hello,server

Vue

核心：只关注视图层

核心思想：MVVM

MVVM 源自于经典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下：

  • 该层向上与视图层进行双向数据绑定
  • 向下与 Model 层通过接口请求进行数据交互

MVVM 已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的 MVVM 框架有 Vue.js，AngularJS 等

测试代码前准备：

在vscode商店中安装live Server，方便后面进行测试

建立新的文件夹，将文件夹右键在终端打开，输入

npm install vue

导入Vue依赖，并在此文件夹下建立lib目录，在导入的依赖中找到vue.js文件，将其复制于lib下，方便代码依赖的使用；

建立一个hellovue.html文件，开始第一个测试代码：

栗子1：

<!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>
    <div id="app">
        {{msg}}
    </div>

    <script src="./lib/vue.js"> </script>
    <script>
        //代码，创建vue对象，绑定视图层
        var vue = new Vue({
            el:'#app',//绑定视图
            data:{
                msg:'hello,vue'
            }
        })
    </script>
</body>
</html>
</html>

在代码空白中，鼠标右键选择Open with live Server，在浏览器中可以看到hello,vue

打开控制台

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d1mSeneQ-1583237425405)(VUE.assets/1583151222282.png)]

将把msg更改后，会立即在页面刷新，这样称为声明式渲染，所有东西都是响应式的

V-bind

栗子2：

认识基本数据渲染指令

新建一个html文件

<!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>
    <div id="app">
        <h1 v-bind:title="msg">我是标题</h1>

    </div>
    <script src="./lib/vue.js"></script>
    <script>   
        var vue = new Vue({
            el:'#app',
            data:{
                msg:'time:' + new Date().toLocaleTimeString()
            }
        })
    </script>
</body>
</html>

v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 msg 属性保持一致”。

当鼠标放上标题时，显示效果如

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uQq12Zpw-1583237425406)(VUE.assets/1583151683767.png)]

同样， 打开浏览器的控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

条件与循环

V-if

控制切换一个元素是否显示

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

用浏览器打开后，会显示：现在你看到我了

使用控制台输入app3.seen=false，就会将刚显示的语句变消失。

这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构。

V-for

这个指令可以绑定数组的数据来渲染一个项目列表

<!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>
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>

    </div>


    <script src="./lib/vue.js"></script>
    <script>
        var app4 = new Vue({
            el:'#app-4',
            data:{
                todos:[
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个SSM' }
                ]
            }
        })
    </script>

</body>
</body>
</html>

用浏览器打开后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dOIKsPXI-1583237425406)(VUE.assets/1583153042662.png)]

也可在控制台输入：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wqEoxZdo-1583237425407)(VUE.assets/1583153166185.png)]

发现列表最后添加了一个新项目。

双向绑定

单向绑定：v-bind

双向绑定：v-model

栗子3：

<div id="app">
    <input type="text" v-bind:value="serachMap.keyword">

    <input type="text" v-model="serachMap.keyword">
</div>
<script src="./lib/vue.js"></script>
<script>
    var vue = new Vue({
        el:'#app',
        data:{
            serachMap:{
                keyword:'lala'    
            }
        }
    })
</script>

第一个input框绑定到vue中serachMap里的keyword，就是可以读取到；第二个input不仅于keyword所绑定，而且它一旦更改，会使得第一个input中的内容也随之更改！

浏览器打开后：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JQpPe7TW-1583237425408)(VUE.assets/1583156567233.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OFnA6Svs-1583237425408)(VUE.assets/1583156590744.png)]

事件：v-on(@)

用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

测试代码：查询数据显示出来

<div id="app">
    <button @click="serach()">查询</button>
	<!-- <button v-on:click="serach()">查询</button>-->
    <p>你要查询的是：{{result.title}}</p>
    <p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
</div>
    <script src="./lib/vue.js"></script>
    <script>
        var vue = new Vue({
            el:'#app',     //绑定视图
            data:{     //定义要给前端的数据，页面所有数据都来自这里
                //查询结果
                result:{}
            },
            methods:{    //事件
                serach(){
                    console.log("serach")
                    this.result={
                        "title":"标题哦",
                        "site":"http://www.baidu.com/"
                    }
                }
            }
        })
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BVyZnxxX-1583237425409)(VUE.assets/1583156925486.png)]

点击后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Vka6skK-1583237425410)(VUE.assets/1583156951014.png)]

点击链接会跳转至百度首页。

路由

在测试路由前，所作准备

新建立测试文件夹，再鼠标右键，在终端中打开，导入vue，vue-router的依赖

npm install vue
npm install vue-router

接着在此目录下建立lib文件夹，将依赖中的vue.js与vue-router.js复制放入

建立新的测试html文件，进行测试

路由：页面跳转

通过路由实现单页面跳转

<!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>
  <div id="app">
    <h1>Hello,App!</h1>
    <p>
      <router-link to="/">首页</router-link>
      <router-link to="/student">学员管理</router-link>
      <router-link to="/teacher">讲师管理</router-link>
    </p>
    <!-- 显示view -->
    <router-view></router-view>
  </div>

  <script src="./lib/vue.js"></script>
  <script src="./lib/vue-router.js"></script>
  <script>
    //1、定义路由的组件
    const welcome = { template: '<div>欢迎</div>' }
    const student = { template: '<div>Student List</div>' }
    const teacher = { template: '<div>Teachet List</div>' }

    //2、定义路由
    const routes = [
      { path: '/', redirect: '/welcome' },
      { path: '/welcome', component: welcome },
      { path: '/student', component: student },
      { path: '/teacher', component: teacher }
    ]

    // 3、创建 router实例
    const router = new VueRouter({
      routes: routes //
    })

    // 挂载路由
    new Vue({
      el: '#app',
      router
    })

  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CGr7JdFl-1583237425410)(VUE.assets/1583157407228.png)]

当点击不同link时，下方会即时刷新出所属数据

axios

异步通信，与ajax类似

vue推荐使用

使用此功能也是需要进行导入依赖的工作，步骤于上例相似

在此测试目录下建立测试的html文件，一个json文件

  <div id="app">
    <button @click="getList()">测试</button>
    <table>
      <!-- 循环 v-for-->
      <tr v-for="list in lists">
        <td>{{list.id}}</td>
        <td>{{list.name}}</td>
      </tr>
    </table>
  </div>

  <script src="./lib/vue.js"></script>
  <script src="./lib/axios.js"></script>
  <script>
    var vue = new Vue({
      el: '#app',
      data: {
        lists: []
      },
      methods: {
        // 前后端分离开发中，前端接收数据并渲染，后台只用提供json数据
        getList() {
            // 可以在本地新建一个json数据文件，用来测试ajax请求
          axios.get('http://localhost:8110/admin/edu/teacher').then(response => {
            console.log(response)
            // 后端接收的值交给前端的vue管理
            this.lists = response.data.data.items
          })
        }
      }
    })
  </script>
[
    {"id":1,"name":"天才"},
    {"id":2,"name":"英子"},
    {"id":3,"name":"笔杆"}
]

将本地json文件中的数据（在实际中，应该是数据库中的数据），在前端页面进行结果显示

在浏览器中打开后，点击测试按钮：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vksPF9xO-1583237425411)(VUE.assets/1583157714888.png)]

实战

ElementUI的例子https://github.com/PanJiaChen/vue-element-admin

项目：vue-element-admin-master

启动命令：npm run dev

Vue.js学习地址

不了解的知识还需在https://cn.vuejs.org/v2/guide/index.html多学习

补充webpack的学习

webpack是一个打包工具，需要将项目适配浏览器的特性
也学习下前端化工程的一些思想

使用VScode进行测试：

  • 编写一个hello.js，使用exports，才可将此部分导出至所要导入的主函数中
exports.sayHi = function(){
    document.write("<h1>输出看看Hello</h1>")
};
  • 编写主程序main.js，使用require引入hello.js并定义变量，供下面使用其中方法
var hello = require("./hello");
hello.sayHi();
  • 建立webpack.config.js一个打包工具
module.exports = {
    entry:'./main.js',
    output:{
        filename:"./js/bundle.js"
    }
};
  • 使用管理员模式进入cmd，在cd到项目所在目录，输入webpack
D:\environment\41.20-3-2\Vue\nodejs\node-start>webpack

在这里插入图片描述
成功之后，在VScode中可找到对应打包目录

  • 再建立一个index.html页面，里面导入刚打包的bundle.js文件，进行测试
<body>
    <script src="./dist/js/bundle.js"></script>
</body>
  • 在index.html文件中空白处鼠标右键，用live server 打开，就会在自己浏览器中显示！
fenglgC
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
vue 循环_Vue 学习笔记（一）：基础
weixin_39593340的博客
11-25 181
条件与循环 My first Vue app 现在你看到我了 浏览器控制台输入app3.seen = false，即把显示的那行字隐藏。这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。v-for指令可以绑定数组的数据来渲...
VUE小白入门 记录我的学习路（1）
wendyw1999的博客
05-11 151
文章目录初始化背景知识Virtual DOM 虚拟DOM安装基本语法Hello World通过console修改message隐藏消息 seen = falsev:bindv-on:click计算属性 computedwatch侦听器 初始化 背景知识 官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。 Virtual DOM 虚拟DOM 什么是虚拟DOM呢？React和Vue.js都属于虚拟DOM 简单来讲，就是不直接对DOM进行操作。 如果大家用过JavaScript
02Vue - Vue.js 入门（条件与循环）
阿甘兄
07-26 286
条件 控制切换一个元素的显示也相当简单： 继续在控制台设置 app3.seen = false，你会发现 “Now you see me” 消失了。 这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据。而且，Vue.js 也提供一个强大的过渡效果系统，可以在 Vue 插入/删除元素时自动应用过渡效果。 循环 也有一些其它指令，每个都有特殊的功能。例如， v-for...
Vue入门-入门案例
压缩疯雷的博客
10-19 134
入门案例声明式渲染条件 v-if循环 v-for处理用户输入 v-on Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： 声明式渲染 文本插值 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 除了文本插值，我们还可以像这样来绑定元素 attribute： &lt
初学Vue(学习笔记 一) day one
01-20
Vue.js 是一个渐进式的JavaScript框架，它设计的目标是让开发者能够轻松地构建用户界面，尤其是在Web应用开发中。Vue的核心特性包括声明式渲染、组件系统、客户端路由管理和集中式状态管理。Vue的设计使得它对熟悉...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
Vue Markdonwn学习笔记
11-17
Vue Markdown学习笔记主要涵盖了使用Vue.js框架与Markdown语法结合，以构建高效、可维护的文档和界面的知识。Vue.js是一个轻量级的前端JavaScript框架，它以组件化开发为核心，而Markdown则是一种简洁的标记语言，常...
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文).zip
08-05
[毕业设计]VB环境下电脑销售与财务管理系统开发(ACCESS+源代码+论文)
PPO（Proximal Policy Optimization，近端策略优化）算法
08-05
在解答2024年华数杯全国大学生数学建模竞赛的C题“老外游中国”时，虽然PPO（Proximal Policy Optimization，近端策略优化）算法主要是应用于强化学习领域，特别是在解决连续动作空间的策略优化问题上，但在此数学建模竞赛中，它并不直接适用于数据处理、综合评价或路径规划等任务。不过，我们可以从数据处理和决策优化的角度，类比强化学习中的一些思想来构思解题策略。 然而，对于本题而言，我们可以更侧重于数据分析、综合评价模型（如层次分析法AHP、TOPSIS、模糊综合评价等）和路径规划算法（如Dijkstra、A*、遗传算法等）来解决问题。以下是对各个问题的进一步建模思路： 一、问题1建模思路 1.1 数据处理与分析 数据收集与清洗：首先，需要加载所有352个城市的CSV文件，对每个城市的100个景点信息进行数据清洗，去除无效或缺失的关键信息（如评分缺失的景点）。 最高分查找：遍历所有景点，找到最高评分（BS），并统计获评该评分的景点数量。 城市排名：统计每个城市获评BS的景点数量，并根据数量多少进行排序，列出前10个城市。 二、问题2建模思路 2.1 综合评价体系构建
中国城市统计年鉴（1985-2023）
08-05
《中国城市统计年鉴》是全面反映中国城市社会经济发展情况的资料性年刊。《中国城市统计年鉴—2023》收录了2022年全国各级城市社会经济发展等方面的主要统计数据。 本年鉴内容共分四个部分: 第一部分是全国城市行政区划,列有不同区域、不同级别的城市分布情况; 第二、三部分分别是地级以上城市统计资料和县级城市统计资料,具体包括人口、资源环境、经济发展、科技创新、人民生活、公共服务、等方面的数据; 第四部分是附录,为主要统计指标解释。 需要说明的是,从1997年开始,地级以上城市和县级城市分别采用不同的统计制度,有些指标在两类城市之间不具有可比性,故本年鉴将地级以上城市和县级城市统计资料分为独立的两部分。本年鉴所涉及的全国或全部城市统计资料,均未包括香港特别行政区、澳门特别行政区和台湾省。
振中TP900 驱动工具2.2
08-05
振中TP900 驱动工具2.2
大学信息安全试题精选12
08-05
大学信息安全试题精选 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
mutiple_pie (8).zip
08-05
mutiple_pie (8).zip
基于pytorch实现的ResUnet对BRATS脑肿瘤多模态分割项目（数据集、源码、训练结果）
最新发布
08-06
基于pytorch实现的ResUnet对BRATS脑肿瘤多模态分割项目（数据集、源码、训练结果） 本项目对BRATS脑肿瘤的四种模态FLAIR、T1w、t1gd、T2w进行融合分割 实现思路，将四种模态进行融合，并且将原始的nii.gz数据转换成npy数据。然后将四种模态的npy数据输入resUnet网络，总共训练了30个epoch，训练集的iou达到了0.84左右 如果想更换数据集进行多模态的训练，更换数据集按照readme文件操作即可
[毕业设计]JAVA大文件分块传输与合并机制(源代码+论文).zip
08-05
[毕业设计]JAVA大文件分块传输与合并机制(源代码+论文)
销售总数据统计表.xlsx
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
毕业设计:基于Springboot的智慧校园管理微信小程序论文
08-05
互联网发展至今，其理论与技术均已趋于成熟，并广泛渗透于社会的各个领域。它使得信息能够通过网络迅速传播，结合信息管理工具，可有效地服务于大众。针对高校教师成果信息管理存在的混乱、高错误率、信息安全性不足、劳动强度大及耗时费力等问题，智慧校园管理系统的应用能够实现更为科学和规范的信息管理。 该系统采用Java语言进行开发，利用MySQL数据库构建数据表以存储系统生成的数据。它不仅能够提供信息的展示与相应服务，还涵盖了智慧校园管理系统信息的全面管理功能，包括信息的查看与管理。 总而言之，智慧校园管理系统实现了信息的集中化管理，具有高度的保密性、高效率、大存储空间及低成本等多重优势。它有助于降低信息管理成本，推动信息管理的计算机化进程。
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值