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
- 安装全局vuecli
3.1输入命令 cnpm install vue-cli -g
- 初始化项目:
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中的值相同
复选框 v-model中的值是boolean
单选框 v-model中值是value
==============================================
以上就是Vue的知识
记录学习,每天进步一点点的橘子大王。
axios安装_Vue脚手架安装,与基本语法(干货)相关推荐
- vue开发搭建(npm安装 + vue脚手架安装)
一.概念 1.npm: Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue ...
- vue-lic脚手架安装与部署项目流程
安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 ...
- Vue.js-Day03-AM【超级详细:Node.js环境安装、安装淘宝镜像(Win、Mac)、安装Vue脚手架、初始化Vue项目-命令解释(Vscode、命令行窗口)、目录介绍、Vue文件介绍】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 1.Node.js-环境安装 1.1.Node.js-详细安装步骤 2.vue-cli脚手架安装 2.1.安装 ...
- vue - cli 脚手架安装
一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...
- 使用npm安装vue脚手架
通过npm安装vue脚手架 准备工作 安装node.js node.js中集成npm 下载地址:node下载连接 下载好后可以通过cmd命令查看是否安装成功 安装cnpm(可选) 由于有些npm资源被 ...
- vue脚手架安装以及vue脚手架创建项目(详细步骤)
系列文章: 文章目录 node.js安装 vue环境安装 vue创建项目 命令行方式创建 使用UI界面搭建 idea导入vue项目 学习Vue不需要学会Node,Vue是前端框架,nodejs是服务端 ...
- vue-cli 脚手架安装
转自 https://www.cnblogs.com/loveyaxin/p/7094089.html 一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node - ...
- vue的组件components基础和安装vue脚手架
组件 组件在vue是一个很强大的功能,可以对HTML进行扩展,在大型应用中,可以对一些抽象的功能进行封装 作用:可复用的vue实例 组件注册 局部注册组件 new Vue({ el: comp ...
- 安装vue脚手架创建项目
1.安装node.js [nodejs官网](https://nodejs.org/en/) 2.安装cnpm 到这里node的环境已经安装完了,npm包管理工具也有了,但是由于npm的有些资源被墙, ...
最新文章
- 谷歌15个人工智能开源免费项目!开发者:懂了
- ABAP Text edit使用
- 用JavaScript 控制input的值
- linux nameserver导致的故障
- OAuth认证与授权
- 交换机选用要点及订货主要技术条件
- idea命令行运行多个客户端_推荐一款神仙颜值的 Redis 客户端工具,开源啦
- restful风格使用小例
- 启动redis闪退/失败
- leetcode python3 简单题231. Power of Two
- DDR3内存频率标识对应
- 一文读懂高频交易程序化交易和量化交易区别
- Qt2D游戏开发引擎QtGameEngine使用入门9——在游戏界面中添加gui按钮文本等控件
- 证明HITTING SET 是NP完全
- Windows 10 Conda 更换清华大学的镜像源
- DL | TensorFlow代码调试
- C++ 实用趣味小程序
- 计算机系系徽设计说明,《系徽设计介绍简介模版.ppt
- 20170916导出fuck 7654导航
- 福克斯车钥匙遥控失灵解决办法
热门文章
- mysql 日期和时间函数_介绍一下mysql的日期和时间函数
- java多参方法_Java中多参数方法进阶
- continue详细讲解
- ncurses下c语言定位光标,C指针原理教程之Ncurses介绍
- python我的世界服务器_Python取Minecraft服务器信息
- java构建json_Java构造和解析Json数据的两种方法详解一
- java集合系列_Java集合系列01-Java集合概述
- c语言参数不能用 吗,如何在C语言中禁止“未使用的参数”警告?
- kafka 脚本发送_Kafka笔记归纳(第五部分:一致性保证,消息重复消费场景及解决方式)...
- kafka多个消费者消费一个topic_kafka:一文读懂消费者背后的那点quot;猫腻quot;