Vue
- Vue
- Vue目录结构
- 目录层级示例
- 目录文件说明
- node_modules
npm 加载的项目依赖模块 - src
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
- assets: 放置一些图片，如logo等。
- components: 目录里面放了一个组件文件，可以不用。
- App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
- main.js: 项目的核心文件。
- .xxxx文件
这些是一些配置文件，包括语法配置，git配置等。 - index.html
首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 - package.json
项目配置文件。 - README.md
项目的说明文档，markdown 格式
- Vue起步
- 每个 Vue 应用都需要通过实例化 Vue 来实现。语法格式如下：
- var vm = new Vue({ // 选项})
- 接下来让我们通过实例来看下 Vue 构造器中需要哪些内容：
- Vue样式绑定
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
- class 属性绑定
- 我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:
- 实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示
- 我们也可以在对象中传入更多属性用来动态切换多个 class 。
- text-danger 类背景颜色覆盖了 active 类的背景色：
- 我们也可以直接绑定数据里的一个对象：
- text-danger 类背景颜色覆盖了 active 类的背景色：
- 我们也可以在这里绑定返回对象的计算属性。
- 数组语法
- 我们可以把一个数组传给 v-bind:class ，实例如下：
- 结果：<div class="active text-danger"></div>
- 我们还可以使用三元表达式来切换列表中的 class ：
- errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类：
- style(内联样式)
- 我们可以在 v-bind:style 直接设置样式：
- 结果：<div style="color: green; font-size: 30px;">菜鸟教程</div>
- 也可以直接绑定到一个样式对象，让模板更清晰：
- v-bind:style 可以使用数组将多个样式对象应用到一个元素上：
- Vue事件处理器
事件监听可以使用 v-on 指令：
- v-on
- 简单使用
- v-on 可以接收一个定义的方法来调用。（v-on:事件 = “方法名”）
- 除了直接绑定到一个方法，也可以用内联 JavaScript 语句：
- 事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
- Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
- .stop - 阻止冒泡
- .prevent - 阻止默认事件
- .capture - 阻止捕获
- .self - 只监听触发该元素的事件
- .once - 只触发一次
- .left - 左键事件
- .right - 右键事件
- .middle - 中间滚轮事件
- 按键修饰符
- Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
- 记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
- 全部按键的别名
- .enter
- .tab
- .delete (捕获 "删除" 和 "退格" 键)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
- 按键组合
- Vue表单
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
- 可以用 v-model 指令在表单控件元素上创建双向数据绑定。
- v-model 会根据控件类型自动选取正确的方法来更新元素。
- input 和 textarea 元素中使用 v-model 实现双向数据绑定：
- 复选框
- 复选框如果绑定的数据是一个时，则表示逻辑值（true/false），如果是多个则绑定到同一个数组（取的值时每个元素的value）
- 单选按钮
- select 列表
- 修饰符
- .lazy
- 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步(正常input框输入数据后，就会立马更新值到变脸里去 ，加上.lazy修饰符以后只有当input值改变了，并且失去焦点后，才会去更新值)
- .number
- 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
- .trim
- 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
- Vue组件
组件可以扩展 HTML 元素，封装可重用的代码。
- 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
- 注册一个全局组件语法格式如下：
- 全局组件( 所有实例都能用全局组件。)
- 局部组件
- Prop
- prop 是子组件用来接受父组件传递过来的数据的一个自定义属性
- 动态 Prop
- 类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
- 实例 父组件--->子组件
- 注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
- Prop 验证
- 组件可以为 props 指定验证要求。为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象,而不是一个字符串数组。
- 当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
- type 可以是下面原生构造器：
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
- type 也可以是一个自定义构造器，使用 instanceof 检测。
- Vue组件 - 自定义事件
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
- 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
- 使用 $on(eventName) 监听事件（监听抛出去的事件）-->父组件监听子组件抛出来的事件
- 使用 $emit(eventName) 触发事件(子组件往出抛出事件)-->子组件抛出事件
- 子组件 向 父组件 传值
- 自定义组件的 v-model
组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。
- 说明
自定义组件父传子的v-model
- 父组件传值给子组件通过v-model，并更新子组件的数据，父组件的数据也同样会更新
- 由于 v-model 默认传的是 value，不是 checked，所以对于复选框或者单选框的组件时，我们需要使用 model 选项，model 选项可以指定当前的事件类型和传入的 props。
- 实例：
- 实例中 lovingVue 的值会传给 checked 的 prop，同时当 <base-checkbox> 触发 change 事件时， lovingVue 的值也会更新。
- Vue组件 - 自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
- 局部定义
局部定义指令：局部定义需要在单文件组件中的dirctives中进行
- 实例：
- 全局定义指令
全局定义指令：我们现在src目录下新建directive文件夹，在其中新建focus.js的文件
- 自定义
如何自定义指令
- 1、 编写focus.js的内容
- 2、在main.js中注册
- 3、在template中引用
- 4、效果页面的输入框就会自动获取焦点
- 自定义指令中涉及到的钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置;
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind：只调用一次，指令与元素解绑时调用
- Vue路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库
中文文档地址：vue-router文档。
- 安装
- 直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js - NPM
npm install vue-router
- 简单实例
Vue.js + vue-router 可以很简单的实现单页应用。
<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。
