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,一经查实,立即删除!

相关文章

mysql port range_MySQL 数据库常见调优方法及参数设置_MySQL

1. 关闭 SELinuxvim /etc/selinux/config 更改 SELINUXenforcing 为 SELINUXdisabled2. 更改 IO Schedule, 对于 SSD 硬盘无需更改echo deadline > /sys/block/sda/queue/scheduler3. 更改 ulimitvim /etc/security/limits.conf* soft nofile 65535* hard nofile 65535roo…

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

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

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

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

python判断正确错误_python错误和异常

Python3 错误和异常 作为 Python 初学者,在刚学习 Python 编程时,经常会看到一些报错信息,在前面我们没有提及,这章节我们会专门介绍。 Python 有两种错误很容易辨认:语法错误和异常。 Python assert(断言&…

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却不知道如…

mysql index sub part_mysql中的key和index 理解

mysql的key和index多少有点令人迷惑,这实际上考察对数据库体系结构的了解的。1 key 是数据库的物理结构,它包含两层意义,一是约束(偏重于约束和规范数据库的结构完整性),二是索引(辅助查询用的)。包括primary key, unique key, fo…

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

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

python快速排序代码_Python实现快速排序算法

原标题:Python实现快速排序算法 Python实现快速排序算法 快速排序算法是一种基于交换的高效的排序算法,由C.R.A.Hoare于1962年提出,是一种划分交换排序。它采用了一种分治的策略,通常称其为分治法(Divide and conquer algorithm)。…

docker mysql 生产环境_如何部署Docker MySQL生产环境?

1 前言Docker容器原则上是短暂的,如果容器被删除或损毁,数据或配置将丢失,所以上个章节部署的MySQL只适合于测试环境,由于生产的需求,本章将使用Docker卷机制持久保存Docker容器中创建的数据。2 最佳实践2.1 环境配置2…

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…

keyloadtool_phoenix 利用CsvBulkLoadTool 批量带入数据并自动创建索引

需要先创建表:CREATE TABLE IF NOT EXISTS population (state CHAR(2) NOT NULL, city VARCHAR NOT NULL, population BIGINTCONSTRAINT my_pk PRIMARY KEY (state, city));在phoenix 目录下执行hadoop jar /home/phoenix-4.6.0-HBase-1.0-bin/phoenix-4.6.0-HBase-…

【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前言最近在做订单模块,用户购买服务类产品之后,需要进行预约,预约成功之后分别给商家和用户发送提醒短信。考虑发短信…