Vue学习
学习地址: https://www.runoob.com/vue2/vue-directory-structure.html
一. 安装
1.使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
2.这样就可以使用 cnpm 命令来安装模块了：
$ cnpm install vue
3.命令行执行
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
4.成功执行以上命令后访问 http://localhost:8080/
二. 目录
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src |
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
三. 模板语法
1.Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
2.使用 v-html 指令用于输出 html 代码
3.HTML 属性中的值应使用 v-bind 指令。
4.Vue.js 都提供了完全的 JavaScript 表达式支持。
5.指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
6.参数在指令后以冒号指明。
7.v-on 指令，它用于监听 DOM 事件：<a v-on:click="doSomething"> 在这里参数是监听的事件名。
8.修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：<form v-on:submit.prevent="onSubmit"></form>
9.v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
10.Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 过滤器函数接受表达式的值作为第一个参数。
11. v-bind 缩写:
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
12.v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
四. 条件和循环
1.条件判断使用 v-if , v-else ,v-else-if (在 2.1.0 新增,用作 v-if 的 else-if 块,可以链式的多次使用)
2.使用 v-show 指令来根据条件展示元素
3.v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
4.v-for 可以通过一个对象的属性来迭代数据：<li v-for="value in object"> {{ value }} </li>
五.计算和监听属性
1.computed vs methods: 我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
2.可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
3.computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter。
4.Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。
六.样式绑定
1.class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
2.我们可以为 v-bind:class 设置一个对象，从而动态的切换 class: <div v-bind:class="{ active: isActive }"></div>
3.我们也可以在对象中传入更多属性用来动态切换多个 class: v-bind:class="{ active: isActive, 'text-danger': hasError }"
4.我们也可以直接绑定数据里的一个对象：<div v-bind:class="classObject"></div>
5.我们也可以在这里绑定返回对象的计算属性。
6.我们可以把一个数组传给 v-bind:class ，实例如下：<div v-bind:class="[activeClass, errorClass]"></div>
7.我们还可以使用三元表达式来切换列表中的 class ：<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
8.我们可以在 v-bind:style 直接设置内联样式：<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
9.当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
七.事件处理器
1.v-on 可以接收一个定义的方法来调用,也可以用内联 JavaScript 语句。
2.事件修饰符，如：event.preventDefault() 或 event.stopPropagation()。
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
3.按键修饰符: Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：<input v-on:keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
八.表单
1.可以用 v-model 指令在表单控件元素上创建双向数据绑定。
2.复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组: <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label>
3.单选按钮的双向数据绑定：<input type="radio" id="runoob" value="Runoob" v-model="picked"> <label for="runoob">Runoob</label>
4.下拉列表的双向数据绑定：<select v-model="selected" name="fruit"> <option value="">选择一个网站</option> <option value="www.runoob.com">Runoob</option> <option value="www.google.com">Google</option> </select>
5.修饰符
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
<input v-model.number="age" type="number">
这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg">
九.组件
1.组件（Component）可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
2.注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
3.所有实例都能用全局组件。
4.也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
5.prop 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
6.动态 Prop: 类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件
7.prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
8.组件可以为 props 指定验证要求。为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。
9.Prop 验证: 组件可以为 props 指定验证要求。为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。
type 可以是下面原生构造器：
-
StringNumberBooleanArrayObjectDateFunctionSymbol
type 也可以是一个自定义构造器，使用 instanceof 检测。
10.自定义事件: 父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
-
- 使用
$on(eventName)监听事件 - 使用
$emit(eventName)触发事件
- 使用
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
