vue学习二:
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学习二:的更多相关文章
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- Vue学习(二)-Vue中组件间传值常用的几种方式
版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...
- Vue学习二:v-model指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...
- 02.VUE学习二之数据绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- vue 学习二 深入vue双向绑定原理
vue双向绑定原理 请示总体来讲 就是为data的中的每个属性字段添加一个getter/seter属性 以此来追踪数据的变化,而执行这部操作,依赖的就是js的Object.defineProperty ...
- vue 学习 二
动画 <transition name="fade"> <p v-if="show">hello</p> </tran ...
- vue学习(二) 三个指令v-cloak v-text v-html
//style <style> [v-cloak]{ display:none } </style> //html <div id="app"> ...
- vue学习(二)
随机推荐
- LNMP 1.1 php编译安装
LNMP 是 Linux nginx mysql php nginx和apache一样也是一种web服务.在静态web服务中nginx更胜一筹.在动态中不比apache有优势. LNMP的mysql ...
- 用JS,做一个简单的计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&g ...
- maven依赖scope配置项讲解
我们在使用Maven配置依赖项的时候,常常只会配置Maven的坐标以及版本信息就可以了,但我们看其他人的工程代码的时候常常会见到有个scope配置项,今天就来分别介绍下这个配置下几个类别的作用. &l ...
- .each循环的两种使用方法
- HDU 5242 树链剖分思想的贪心
题意及博客 树链剖分分为2步,第一次求出深度,重儿子,第二次求出重链,用到了启发式的思想,即对于比较重的儿子,尽量去完整的维护它.类似于我们去合并两个堆,明显把小的堆逐个插入大的堆中会比大的往小的插更 ...
- ThinkPHP的URL模式
ThinkPHP的URL模式有四种,默认是PATHINFO模式,其他三种分别为:普通模式.REWRITE和兼容模式. 一.PATHINFO模式 浏览器输入格式为: http://localhost/d ...
- SQL获取时间戳流水号
流水号生成规则: 1:流水号总长度为22位数 2:流水号总共分三部分:标头(2位)+ 时间戳(YYYYMMDDHHmmSSsss共17位)+ 随机码(3位) 举例流水号:SN2015081210240 ...
- c语言实战: 计算时间差
计算时间差有两种,一种是把时间都转化为分钟数,一种是把时间都转化为小时,后者是会用到除法所以不可避免产生浮点数,所以我们选择转化为分钟数来计算. //题目:给定两个时间点计算它们的时间差,比如,1:5 ...
- USB无线网卡导致耳机电流声很大
今天把许久未用的USB无线网卡插入到电脑中,戴上耳机准备听音乐,发现耳机里面的电流声非常大.回想以前并没有这种状况呀,忽然发现原来是USB无线网卡和耳机都插在前置面板中了,把USB无线网卡插在后置面板 ...
- JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-005Table per subclass with joins(@Inheritance(strategy = InheritanceType.JOINED)、@PrimaryKeyJoinColumn、)
一.结构 The fourth option is to represent inheritance relationships as SQL foreign key associations. Ev ...