axios安装_Vue脚手架安装,与基本语法(干货)

首先,这篇Vue文章是为了下一篇我整合springboot+vue前后分离的小demo,这两天整理好会上传哈哈

===================================================================

1. Node.js安装

1.1 下载安装

在node.js 官网下载, 根据自己电脑系统安装,一直点下一步即可

1.2 测试安装是否成功

Windows+R打开cmd窗口,输入node -v回车出现版本号,即安装成

2. 安装淘宝镜像

2.1 输入命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

946efdf47f72440a79275c7ed5a0c30e.png
  1. 安装全局vuecli

3.1输入命令 cnpm install vue-cli -g

b66f46beaeb329d97316037aeef97664.png
  1. 初始化项目:

4.1输入命令

vue init webpack 包名

5 . 按照提示步骤,分别输入命令:

cd 包名

cnpm install

cnpm run dev

(顺便安装:npm install axios

安装axios在项目中

在main.js配置内容

import axios from 'axios'

Vue.prototype.$axios = axios)====下一篇springboot+vue会用到

======================================================================

vue介绍:

 Vue

    vue返回的是一个对象

   vue是一个mvvm的框架,(面试官常问的),angular是mvc的框架

   Vue是vue的实例,这个实例存在计算机中,主要干俩大事:1、绑定事件;2、dom检测

    Vuejs是封装的一个类,参数是options对象

    Vue全家桶包括:vuex、vue-router、vue-resource还有构建工具 vue-cli

    但是vue-resource 现在不使用了,用的是axios

    最常用的属性是:

    el:"" 指定vue所操作的dom范围,属性值是你获取的节点

    data 就是vue的model,是存放数据的,属性值是一个对象或者是一个函数,在组件中的data是一个函数

     methods 是vue中的事件方法。

Vue常用语法:

v-html 与 v-text的区别:

 v-html会解析html格式

 v-text与插值表达式会把内容当做文本来解析

 v-html 和 v-text都会覆盖元素中原有的内容

    v-cloak:

      v-cloak 能够解决 插值表达式闪烁的问题

  v-if与v-show的区别:

    v-if是对节点的删除和添加,v-show是堆display属性值none和block的切换

    v-if与v-show的区别及使用场景:

  共同点:都是动态显示DOM元素

  不同点: 

v-if:

  v-if 是动态的向DOM树内添加或删除DOM元素

 v-if 切换一个局部编译/卸载的过程,切换时合适销毁和重建内部事件监听和子组件

v-if是懒惰性的,初始条件 = false,什么也不做,只有在条件第一次 = true时,才开始局部编译

 v-show 是在任何条件下(首次条件是否为着真)都会被编译,然后缓存,而且DOM元素保留

v-if有更高的切换消耗

使用场景: v-if 适合运营条件不大可能改变

 v-show:

v-show有更高的初始化渲染消耗

v-show只是简单的基于css切换

v-show是通过设置DOM元素的display实现控制显隐的

使用场景:v-show 适合频繁切换

循环指令:v-for=""

    * 值是一个数组 (item,index) in 数组名

    * 值是一个对象 (value,key) in 对象名 value是属性值,key是属性

   动态属性:v-bind:class="a"

    可以简写 :class="a" v-bind可以省略

  节点上绑定事件:

v-on:click="fn" 可简写:@click="fn",事件方法写在methods中

    v-on 监听事件:

     v-on:click="事件名",缩写@click="事件名"

    v-model 数据绑定:

     可以在表单中使用v-model实现数据双向绑定

     text类型中的文本都是字符串,v-model中的值相同

0f04d1b4534bc02cd5361c8b6f6f19b3.png

       复选框 v-model中的值是boolean

be844c1ce96f642b5779ae22529d844d.png

       单选框 v-model中值是value

9d18ef363f48bf2a7429c1344b9a7658.png

==============================================

以上就是Vue的知识

记录学习,每天进步一点点的橘子大王。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/534974.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

base64 能放数组里面么_数组:总结篇

我们做个总结吧数组理论基础数组是非常基础的数据结构,在面试中,考察数组的题目一般在思维上都不难,主要是考察对代码的掌控能力也就是说,想法很简单,但实现起来 可能就不是那么回事了。首先要知道数组在内存中的存储方…

xampp mysql 卸载_卸载Xampp并安装apache + mysql + php 过程

首先是卸载xampp,打开xampp-control.exe 控制面板,停止apache和mysql服务。如果你是安装版xampp,可以到如果不是则安装如下方法。停止服务之后。就需要卸载服务。打开cmd,用sc.exe这个Windows命令开始——运行——cmd.exe&#xf…

nodejs mysql 返回json_python向mysql中存储JSON及Nodejs取出

虽然把JSON数据存入mysql也是比较蛋疼,但是相比使用Nodejs嵌套处理多个mysql查询并拼接返回数据也算是没mongo时的一个折中方案了。我使用python拼接了一个json格式的字符串,却遇到了一些问题1,如果把json数据转成str存入,那么nod…

17个常用经典数据可视化图表与冷门图表

数据可视化是创建信息图形表示的过程。随着可视化技术的飞速发展,可以利用强大的可视化工具选择合适的数据可视化图表来展示数据。以下专业人士都应该知道的一些最重要的数据可视化图表。 常见数据可视化图表 饼图 饼图是最常见和最基本的数据可视化图表之一。饼图…

python keyerror_盘点Python 初学者最容易犯的10大错误!你中招了吗?

对于新手,初学Python时,总会遇到这样那样的报错,想要弄懂Python错误信息的含义可能还不知道怎么做,这里列出了一些比较常见的Python报错问题,希望对于学习Python的人能够有些帮助。发现有很多想要学习Python却不知道如…

【spring cloud】(六)消息总线——springcloud Bus

各位小伙伴们大家好,欢迎来到这个小扎扎的spring cloud专栏,在这个系列专栏中我对B站尚硅谷阳哥的spring cloud教程进行一个总结,鉴于 看到就是学到、学到就是赚到 精神,这波依然是血赚 ┗|`O′|┛ 💡Bus…

kali 切换root权限_Ubuntu 被曝严重漏洞:切换系统语言 + 输入几行命令,就能获取 root 权限...

公众号关注 “GitHubDaily”设为 “星标”,带你了解技术圈内新鲜事!来自量子位无需系统密码,就能添加新的 sudo 用户、获取 root 权限,事后还能删除不留痕迹。这是 GitHub 安全研究员 Kevin Backhouse 发现的一个 Ubuntu 系统大漏…

oracle定义变量sql赋值_ORACLE获取SQL绑定变量值的方法总结

本文总结一下ORACLE数据库中如何获取SQL绑定变量值的方法,在SQL优化调优过程中,经常会用到这方面的知识点。在此梳理、总结一下这方面的知识点,方面日后查找、翻阅。方法1:查询V$SQLV$SQL视图中的BIND_DATA字段用来存储绑定变量的…

transition css_Transition 过渡

1:基本概念在一定时间内平滑的过渡,也就是圆滑的以动画效果改变css的属性值。它的过渡可以由鼠标点击、焦点获取或者失去、被点击事件或对元素的改变中触发;不能主动触发,只能被动触发。常用的基本属性有:Transition-d…

jdbc mysql分页_JDBC【数据库连接池、DbUtils框架、分页】

1.数据库连接池什么是数据库连接池简单来说:数据库连接池就是提供连接的。。。为什么我们要使用数据库连接池数据库的连接的建立和关闭是非常消耗资源的频繁地打开、关闭连接造成系统性能低下编写连接池编写连接池需实现java.sql.DataSource接口创建批量的Connectio…

python读写文件操作_详解Python文件读写操作

读文件 打开文件(文件需要存在)#打开文件 f open("data.txt","r") #设置文件对象 print(f)#文件句柄 f.close() #关闭文件 #为了方便,避免忘记close掉这个文件对象,可以用下面这种方式替代 with open(data.t…

【cloud Alibaba】(三)流量控制、熔断降级(下)——Sentinel

各位小伙伴们大家好,欢迎来到这个小扎扎的spring cloud专栏,在这个系列专栏中我对B站尚硅谷阳哥的spring cloud教程进行一个总结,鉴于 看到就是学到、学到就是赚到 精神,这波依然是血赚 ┗|`O′|┛ 💡Sen…

python gui入门的例子_Python GUI编程之Tkinter入门之道

相信刚学习使用Python进行GUI编程的时候,肯定都会听过Tkinter,毕竟是standard Python interface to the Tk GUI toolkit.用来写一些小程序还是很方便的。但如果是刚接触GUI编程的话肯定是被官方文档搞的有些懵,毕竟还没弄清楚套路。之前使用过…

@async 默认线程池_SpringBoot 线程池的使用

Java大联盟帮助万千Java学习者持续成长关注作者|Musclehengblog.csdn.net/Muscleheng/article/details/81409672前言最近在做订单模块,用户购买服务类产品之后,需要进行预约,预约成功之后分别给商家和用户发送提醒短信。考虑发短信…

mysql 横向扩展 中间件_mysql-proxy数据库中间件架构 | 架构师之路

一、mysql-proxy简介mysql-proxy是mysql官方提供的mysql中间件服务,上游可接入若干个mysql-client,后端可连接若干个mysql-server。它使用mysql协议,任何使用mysql-client的上游无需修改任何代码,即可迁移至mysql-proxy上。mysql-…

python selenium对象怎么序列化_python selenium爬取斗鱼

不加延迟报错selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {“method”:”xpath”,”selector”:”.//span[class”DyListCover-hot”]”}(Session info: chrome80.0.3987.122)最开始以为是版本问题,不…

神经网络的全连接层_深度神经网络全连接层

一、概念全连接层一般在网络的最后部分做分类输出,全连接层的有m个输入和n个输出,每一个输出都和所有的输入相连,相连的权重w都是不一样的,同时每一个输出还有一个bias。二、前向全连接假设输入是4,输出是4&#xff0c…

vs 选定内容没有属性页_从智能单品,到全屋智能:2019中国智能家居发展白皮书【附82页PPT】...

2019年,智能家居行业在技术、市场和行业的变革中迎接新的挑战和机遇。一方面,AI、IoT、边缘计算全面赋能智能家居;另一方面,中国的房地产行业正在从上半场的“增量开发”,切换到下半场的“存量经营”、“楼盘精装化”政…

python决策树的应用_机器学习-决策树实战应用

1.下载2.安装:双击3.创建桌面快捷方式安装目录\bin文件夹\:找到gvedit.exe文件右键 发送到桌面快捷方式,如下图:4.配置环境变量将graphviz安装目录下的bin文件夹添加到Path环境变量中:5.验证是否安装并配置成功进入win…

【SSM面向CRUD编程专栏 3】关于黑马程序员最全SSM框架教程视频,P37集老师跳过的模块创建以及tomcat下载安装配置和运行等诸多问题

写在前面:​ 本人是在学习B站黑马程序员SSM框架教程视频的时候在P37集遇到了问题,如果不解决还没办法往下接着听,老师跳过的模块创建以及tomcat下载安装配置和运行等诸多问题,全在这篇博客中得到了解决 😢解决上…