vue
vue
el: 用于挂载要管理的元素
data 用于定义属性（object/function）
组件中data必须是一个函数
methods 用于定义的函数，可以通过 return 来返回函数值。
v-once 指令，执行一次性地插值
<span v-once>这个将不会改变: {{ msg }}span>
v-html 指令用于输出 html 代码：
vue生命周期
循环语句
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
<li v-for="item in movies">{{item}}li>
v-for 可以通过一个对象的属性来迭代数据：
第二个的参数为键名：
第三个参数为索引：
v-for 迭代整数:v-for=“n in 10”
反转字符串:message.split(’’).reverse().join(’’)
Vue.js 计算属性: computed。methods
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
computed vs methods
可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：计算属性一般没有set方法，只读属性
v-bind 缩写 ：
v-on 缩写 @
监听属性watch
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
Vue.js 样式绑定（v-bind:语法糖：）
为 v-bind:class 设置一个对象，从而动态的切换 class:
也可以在对象中传入更多属性用来动态切换多个 class 。
也可以直接绑定数据里的一个对象
也可以在这里绑定返回对象的计算属性
可以把一个数组传给 v-bind:class
还可以使用三元表达式来切换列表中的 class ：isActive ? activeClass : ‘’
可以在 v-bind:style 直接设置样式：
也可以直接绑定到一个样式对象，让模板更清晰：
v-bind:style 可以使用数组将多个样式对象应用到一个元素上：
注:当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
Vue.js 事件处理器：v-on: 指令（语法糖@）
使用 v-on 指令：
v-on 可以接收一个定义的方法来调用。
v-on 可以接收一个定义的方法来调用。
也可以用内联 JavaScript 语句：
事件修饰符:为 v-on 提供了事件修饰符来处理 DOM 事件细节
Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
- .stop - 阻止冒泡
- .prevent - 阻止默认事件
- .capture - 阻止捕获
- .self - 只监听触发该元素的事件
- .once - 只触发一次
- .left - 左键事件
- .right - 右键事件
- .middle - 中间滚轮事件
修饰符可以串联
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
Vue 为最常用的按键提供了别名：
v-if 指令：
条件判断使用 v-if 指令：在元素 和 template 中使用 v-if 指令：
v-if 指令将根据表达式 的值(true 或 false )来决定是否插入 p 元素。
- Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
- 不要复用，只需添加一个具有唯一值的 key
v-show 指令（与v-if比较）
带有 v-show 的元素始终会被渲染并保留在 DOM 中
v-for：列表渲染
表单:v-model 指令在表单控件元素上创建双向数据绑定。
复选框:
复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：
单选按钮
select 列表
修饰符
默认情况下， v-model 在 input 事件中同步输入框的值与数据，可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
可以添加一个修饰符 number 给 v-model 来处理输入值：自动将用户的输入值转为 Number 类型
添加 trim 修饰符到 v-model 上过滤输入：自动过滤用户输入的首尾空格.
组件（Component）是 Vue.js 最强大的功能之一。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
通常一个应用会以一棵嵌套的组件树的形式来组织：
-
两种组件的注册类型：全局注册和局部注册 -
Vue.component 全局注册
组件可以扩展 HTML 元素，封装可重用的代码。
注册组件步骤
-
调用Vue.extend()方法创建组件构造器 -
调用Vue.component()方法注册组件 -
在Vue实例的作用范围内使用组件
组件不能直接访问vue实例中的数据，也不推荐
vue组件内部有管理数据的部分（data） 必须是一个函数
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
- 注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。 - 调用组件：
全局组件:所有实例都能用全局组件。
局部组件:在实例选项中注册局部组件,组件只能在这个实例中使用：
Prop:子组件用来接受父组件传递过来的数据的一个自定义属性。
注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
动态 Prop:用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
组件 - 自定义事件:子组件要把数据传递回去，就需要使用自定义事件！
使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on
data 必须是一个函数,每个实例才可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例
自定义组件的 v-model
组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。
<input v-model="parentData">
<input
:value="parentData"
@input="parentData = $event.target.value"
>
v-model 默认传的是 value，不是 checked，所以对于对于复选框或者单选框的组件时，我们需要使用 model 选项，model 选项可以指定当前的事件类型和传入的 props。
Vue.js 自定义指令
全局变量
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
局部指令
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
<script>
// 创建根实例
new Vue({
el: '#app',
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>
Vue.js 路由 vue-router （这地方有点模糊，请大佬详解
是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。
<script src="https://unpkg.com/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<div id="app">
<h1>Hello App!h1>
<p>
<router-link to="/foo">Go to Foorouter-link>
<router-link to="/bar">Go to Barrouter-link>
p>
<router-view>router-view>
div>
// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: 'foo' }
const Bar = { template: 'bar' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo }//映射到组件Foo
{ path: '/bar', component: Bar }//映射到组件Bar
]
// 3. 创建 router 实例，new VueRouter然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
to：表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。
replace：设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。
append：设置 append 属性后，则在当前 (相对) 路径添加其路径。
tag：有时候想要 渲染成某种标签，例如
- 。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
-
active-class：设置 链接激活时使用的 CSS 类名。
exact-active-class：配置当链接被精确匹配的时候应该激活的 class。
event声明：可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。
除了使用 创建 a 标签来定义导航链接
- router.push(location, onComplete?, onAbort?)
- router.replace(location, onComplete?, onAbort?)
- router.go(n)：这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步
Vue.js 过渡 & 动画
过渡：Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。transition
Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。
<transition name = "nameoftransition">//nameoftransition <div></div> </transition>CSS 过渡
通常我们都使用 CSS 过渡来实现效果。CSS 动画用法类似 CSS 过渡，但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
自定义过渡的类名：自定义过渡的类名优先级高于普通的类名，这样就能很好的与第三方（如：animate.css）的动画库结合使用。
可以用 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：
//定制进入和移出的持续时间： <transition :duration="{ enter: 500, leave: 800 }">...</transition>//通过 appear 特性设置节点在初始渲染的过渡 //默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。 <transition appear> <!-- ... --> </transition>当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型
多个组件的过渡使用动态组件：
过渡模式
-
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
-
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
列表过渡：
可复用的过渡
状态过渡
通过侦听器我们能监听到任何数值 property 的数值更新。
把过渡放到组件里:管理太多的状态过渡会很快的增加 Vue 实例或者组件的复杂性，幸好很多的动画可以提取到专用的子组件。
混入 (mixin)提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
选项合并:组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
1、数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先
2、同名钩子函数将合并为一个数组，混入对象的钩子将在组件自身钩子之前调用。var mixin = { created: function () { console.log('混入对象的钩子被调用') } } new Vue({ mixins: [mixin], created: function () { console.log('组件钩子被调用') } }) // => "混入对象的钩子被调用" // => "组件钩子被调用"值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
Vue.extend()也使用同样的策略进行合并。混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。
自定义选项合并策略：自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { // 返回合并后的值 }渲染函数&JSX
createElement参数查api文档找详解系列
Vue.extend( options )使用基础 Vue 构造器，创建一个“子类”。
Vue.nextTick( [callback, context] )在修改数据之后立即使用这个方法，获取更新后的 DOM。
Vue.set( target, propertyName/index, value )向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
前端模块化
为什么要使用模块化
- 可以解决命名冲突
- 管理依赖
- 提高代码的可读性
- 代码解耦，提高代码的复用性
CMD、AMD、CommonJS
es6中模块化使用
- export
- import