龙空技术网

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

是橘子大王o 252

前言:

此时兄弟们对“vue返回上一页保留数据”大致比较看重,咱们都需要了解一些“vue返回上一页保留数据”的相关文章。那么小编同时在网摘上汇集了一些对于“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=

安装全局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的知识

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

标签: #vue返回上一页保留数据