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

3. 安装全局vuecli

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

4. 初始化项目：

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的知识

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