vue 安装
Posted chengdongzi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 安装相关的知识，希望对你有一定的参考价值。
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装 vue.js
cnpm install -g vue-cli
cnpm cache clean —force
cnpm install webpack -g
//打开要创建的项目路径目录，创建项目
vue init webpack-simple <项目名>
cd <项目名>
//安装路由
cnpm install vue-router —save
//安装jquery
cnpm install jquery --save
//热启动服务
cnpm run dev
Vue.js 模板语法
Vue.js 使用了基于 html 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值
文本
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
文本插值
属性
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
v-bind 指令
表达式
Vue.js 都提供了完全的 javascript 表达式支持。
JavaScript 表达式
指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
实例
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
实例
过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：
实例
过滤器可以串联：
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA(‘arg1‘, arg2) }}
这里，message 是第一个参数，字符串 ‘arg1‘ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
Vue.js 条件与循环
条件判断
v-if
条件判断使用 v-if 指令：
v-if 指令
在元素 和 template 中使用 v-if 指令：
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：
<!-- Handlebars 模板 -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}
v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块：
v-else 指令
随机生成一个数字，判断是否大于0.5，然后输出对应信息：
v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
v-else 指令
判断 type 变量的值：
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
我们也可以使用 v-show 指令来根据条件展示元素：
v-show 指令
以上是关于vue 安装的主要内容，如果未能解决你的问题，请参考以下文章