vue的常用标签:

1、<router-link to=''>主要实现跳转链接功能,属性to='/'即是跳转到path为'/'的路径.

2、v-bind动态绑定指令,格式为:v-bind:你要动态变化的值="表达式"

3、v-for列表渲染 例: <tr v-for="item in peoples"> <td> {{item.name}} </td>  </tr>

4、v-show指令与v-if指令的区别就在于,前者一开始就加载,更适用于频繁的切换,后者需首先判断布尔值,为true才加载渲染

5、v-model指令是双向绑定,一般用于表单组件

6、单文件组件的引用,import [命名] from [相对路径]

7、自定义标签:驼峰法定义的组件FooterNav需在使用时用短横线连接<footer-nav>

8、在<style>标签上添加scoped,声明作用域,样式效果只在该页面内生效,不污染全局。

9、CSS中class可以指定多个值,用空格隔开就可以了。 比如:<div class="exp1 exp2 exp3">这个是范例</div>

10 v-if v-else v-ifelse 作为页面进行判断的,

vue-cli的安装使用:

  vue.js是基于node.js和npm的,所以首先需要安装node.js环境来进行开发的,安装node.js源码包都是下一步下一步的进行操作的,并没有其他内容:

安装完成之后配置环境:然后在控制台输入:

因为npm是国外的镜像,所以需要进行需要安装淘宝进行,使用cnpm的命令进行安装依赖库,国外服务器速度是比较慢的,

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

前面那个$是代表当前登录使用用户不是root用,后面才是关键:

命令行执行 : npm install -g vue-cli    // 加-g是安装到全局

安装完成以后 可以输入命令 :vue 回车,可以看到针对vue的命令行;

安装完成之后执行: vue -V 注意这个v是大写的哦哦

然后就是创建项目:

执行vue init webpack demo命令 后面是你需要创建项目的名字  webpack代表是使用webpack进行打包;

直接enter进入:

是否使用router 选择y

可以根据自己需要进行安装

依赖库的安装:

如果依赖库没有安装完成,那么可以进行暂停,进行项目所在目录执行 cnpm install 就会从淘宝镜像中安装依赖库,这样速度会比国外的要快

再进入安装目录执行 npm run dev

webpack就会进行打包编译数据:

然后在浏览器中输入:localhost:8080

由于我设置了调式模式: 将web调用为手机的

到此vue.js的项目就跑起来安装完成了

vue学习二:的更多相关文章

  1. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  2. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  3. Vue学习(二)-Vue中组件间传值常用的几种方式

    版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...

  4. Vue学习二:v-model指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...

  5. 02.VUE学习二之数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. vue 学习二 深入vue双向绑定原理

    vue双向绑定原理 请示总体来讲 就是为data的中的每个属性字段添加一个getter/seter属性 以此来追踪数据的变化,而执行这部操作,依赖的就是js的Object.defineProperty ...

  7. vue 学习 二

    动画 <transition name="fade"> <p v-if="show">hello</p> </tran ...

  8. vue学习(二) 三个指令v-cloak v-text v-html

    //style <style> [v-cloak]{ display:none } </style> //html <div id="app"> ...

  9. vue学习(二)

随机推荐

  1. linux下mysql 最新版安装图解教程

    1.查看当前安装的linux版本 命令:lsb_release -a 如下图所示 通过上图中的数据可以看出安装的版本为RedHat5.4,所以我们需要下载RedHat5.4对应的mysql安装包 2. ...

  2. java 多线程系列基础篇(七)之线程休眠

    1. sleep()介绍 sleep() 定义在Thread.java中.sleep() 的作用是让当前线程休眠,即当前线程会从“运行状态”进入到“休眠(阻塞)状态”.sleep()会指定休眠时间,线 ...

  3. 用JS 写一个简单的程序,切换七彩盒子背景

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 工作的时候用到spring返回xml view查到此文章亲测可用

    spring mvc就是好,特别是rest风格的话,一个 org.springframework.web.servlet.view.ContentNegotiatingViewResolver就可以根 ...

  5. js面试题知识点全解(一原型和原型链)

    1.如何准确判断一个变量是数组类型2.写一个原型链继承的例子3.描述new一个对象的过程4.zepto(或其他框架)源码中如何使用原型链知识点:1.构造函数2.构造函数-扩展3.原型规则和示例4.原型 ...

  6. go get

    go get 命令用于从远程代码仓库(比如 Github )上下载并安装代码包.注意,go get 命令会把当前的代码包下载到 $GOPATH 中的第一个工作区的 src 目录中,并安装. 如果在 g ...

  7. The Apache Tomcat installation at this directory is version 8.5.24 Tomcat 8.0 installation is expect

    在一台新电脑上搭建Java开发环境,JDK 是1.8,Tomcat下载了Tomcat 8.5.24,已经配置好了Java和Tomcat的环境变量,开发工具是Eclipse MARS,准备在Eclips ...

  8. 算法Sedgewick第四版-第1章基础-006一封装输出(文件)

    1. package algorithms.util; /*********************************************************************** ...

  9. SDUT 3379 数据结构实验之查找七:线性之哈希表

    数据结构实验之查找七:线性之哈希表 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 根据给定 ...

  10. HDU 3974 Assign the task (DFS+线段树)

    题意:给定一棵树的公司职员管理图,有两种操作, 第一种是 T x y,把 x 及员工都变成 y, 第二种是 C x 询问 x 当前的数. 析:先把该树用dfs遍历,形成一个序列,然后再用线段树进行维护 ...