前端学习笔记（未整理）
Vue
引自https://www.cnblogs.com/rik28/p/6024425.html
ViewModel是vue的一个实例。
View -> Dom listener 检测页面上dom元素的变化；如有变化 则更改Model中的数据。
Model –> Model中的数据被更新时 Data bindings工具会帮我们更新呢页面中的Dom元素。
<body>
<div id="app">
{{ message }}
div>
body>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',//挂载到div id=app这个元素
data: exampleData
})
script>
在创建Vue实例的时候，需要传入一个“选项对象”。（选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。）
el属性——指向view
data属性——指向model
【MVVM模式】
“当任何外部事件发生时，永远只操作 ViewModel 中的数据”
设定viewModel与view的映射关系。
Vue.js可以使用v-model指令在表单元素上创建双向数据绑定。
<div id="app">
<p>{{ message }}p>
<input type="text" v-model="message"/>
div>
将message绑定到文本框，当更改文本框的值时， {{ message }}
每个vue实例都会代理其选项对象里的data属性。所以可以直接访问。
指令
Vue.js的指令以v-开头 作用于HTML元素。
指令提供一些特殊的特性，将指令绑定在元素上，指令会为绑定的元素添加一些特殊的行为。
常用的内置指令有：v-if、v-show、v-else、v-for、v-bind、v-on（也可以开发一些自定义的指令。）
1、v-if=”expression”(expression 返回一个bool值)条件渲染 根据表达式的真假来删除和插入元素。
2、v-show也是条件渲染 但是使用v-show指令的元素始终会被渲染到HTML 它只是简单地为元素设置css的style属性（display设置为none）
3、v-else 用来为v-if or v-show添加一个else块
如果v-if为true则v-else不会渲染HTML;但如果前面是v-show为true 则v-else依旧会被渲染。
4、v-for=”item in items”基于一个数组渲染一个列表
5、v-bind可以在其名称后带一个参数 中间用冒号（：）隔开 这个参数通常是HTML元素的属性。
6、v-on指令用于监听DOM事件
v-bind缩写为：
v-on缩写为@
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ span> div>
var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } })
“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
一个组件本质上是一个拥有预定义选项的一个vue实例。
在vue中注册组件://定义名为todo-item的新组件
Vue.component('todo-item', { template: '这是个待办项' })
只有当实例被创建后，data中存在的属性才是响应式的。
【例外】当使用objec.freeze(obj)时，会阻止修改现有属性，响应式系统无法追踪变化。
除了数据属性，vue实例还暴露了一些有用的实例属性和方法，都有 $ 前缀。
每个vue实例在被创建时都要经过一系列的初始化过程——同时在这个过程中会运行一些生命周期钩子（函数）。
如created、mounted、updated、destroyed
生命周期钩子的this 指向调用他的vue实例。
｛｛ msg ｝｝数据绑定（mustache语法）
【v-once进行一次性插值 当数据改变时 不会发生变化】
双大括号会把数据解释为普通文本 而不是HTML代码；如果想要输出真正的html 需要使用v-html指令
Mustache语法不能作用在HTML特性上。
只能包含单个表达式。
对于复杂的逻辑，应该使用”计算属性“。
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关属性发生改变时，才会重新求值。（message改变时它才重新开始求值。）而调用方法时，则每次重新渲染的时候，都会再次执行函数。
侦听属性（观察和响应vue实例上的数据变动）：
操作元素的class列表和内联样式是数据绑定的一个常见需求。
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }">div> |
上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。
你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板:
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> div> |
和如下 data：
data: { isActive: true, hasError: false } |
结果渲染为：
<div class="static active">div> |
组件基础：
通过prop向子组件传递数据。
Prop可以在组件上注册的一些自定义特性。
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：
| 根实例
所有的vue组件都是vue实例，并且接受相同的选项对象。 |
选项对象包括:data、methods、computed、watch等方法。
自定义组件的时候：data选项必须是一个函数。因此每个实例可以维护一份被返回对象的独立的拷贝。
data:function(){
return {
count:0
}
}
为了能在模板中使用，组件必须先注册以便vue能够识别。
全局注册和局部注册。
1全局注册：Vue.component(可被用在其被注册之后的任何（通过new Vue）先创建的实例。
Vue.component(‘my-component-name’,{
//…option…
})
通过prop向子组件传递数据。
Prop是在组件上注册的一些自定义特性。
当一个值传递给一个Prop 特性的时候，它就变成了那个组件实例的一个属性。（props属性）。
如Vue.component(‘blog-post’,{
Props: [‘title’],
Template: ‘{{title}}
’
})
也可能有一个数组：
new Vue({
el:'#blog-post-demo',
data:{
posts: [{
id:1, title:"this is my first"
} ,{
id:2, title:"my vue journry"
}
]
}
})
v-bind:key="post.id"
v-bind:title="post.title"
>
v-bind用来动态传递prop。
【template模板将会替代挂载内容】
每个组件只能有一个根元素：可以将模板的内容包裹在一个父元素内。
{{ title }}
当组件变得越来越复杂的时候，为每个相关信息定义一个prop会变得很麻烦。
如：
v-for=”post in posts”
v-bind:key=”post.id”
v-bind:title=”post.title”
v-bind:content=”post.content”
v-bind:comments=”post.comments”
>
重构
v-bind:key=“post.id”
v-bnd:post=”post”
>
Vue.component(‘blog-post’,{
props:[‘post’],
template:
………… {{post.title}}
}
)
通过事件向父级组件发送消息：
v-bind:key="post.id" v-bind:post="post">
Vue.componet('blog-post',{
props:['post'],
template:'
enlarge button {{post.title}}
'
})
调用内建的$emit 方法并传入事件的名字，来向父级组件触发一个事件。
Enlarge button
然后用v-on 监听这个事件：
…
v-on:enlarge-text=”postFontSize += 0.1”>
使用事件抛出一个值：（比如决定一个文本要放大多少）<>
Enlarge button
然后用$event 可以访问到这个值：
也可以传入一个方法。
在组件上使用v-model：
<=>
v-bind:value=”searchText”
v-on:input=”searchText = $event.target.value”>
组件上：
v-bind:value=”searchText”
v-on:input=”searchText = $event”>
【将其value特性绑定到一个名叫value的prop上】
【在其input事件被触发后，将新的值通过自定义的input事件抛出】
Vue.component(‘custom-input’,{
props: [‘value’],
template:’
v-on:input=”$emit(‘input’,$event.target.value)”>
’
})
通过插槽分发内容：
如：
Sth bad happened
可能会渲染成ERROR!sth bad happened
Vue自定义的
Vue.component(‘alert-box’,{
Template:’
ERROR! ’ }) 动态组件：is ---------------------------------分割线------------------------------ 组件命名：小写字母——用横杠分隔开； 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。——单向数据流 将原生事件绑定到组件。 在一个组件的根元素上直接监听一个原生事件。V-on 的.native修饰符。 is的用法: 有些元素内部不能使用自定义的标签或者自定义标签内不能放某些特殊的标签，这时候就要用is代替，让HTML语法符合规则验证。 如 自定义组件 is只能用于绑定组件。 :is 是用来动态切换组件的。 区别如下： is – 要在components 中注册这个组件，才能用is 引用这个组件。 :is – 要在vue实例中注册后才能用 :is 在模板#app中调用；并且先要定义一个变量。 当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。 例如，如果你声明了这个组件： Vue.component('my-component', { 然后在使用它的时候添加一些 class： 【template 最外层只能有一个div 不能有两个并列的div】 【定义组件的模板】 Slot – 插槽是组件的一块HTML模板 这块模板显不显示 以及怎样显示 由父组件来决定。 由于插槽是一块模板，所以，对于任何一个组件，从模板种类的角度来分，可以分为非插槽模板和插槽模板两类。 非插槽模板指的是HTML模板，’div span ul table’这些。它的显示与隐藏以及如何显示由它自己决定；插槽模板，’slot’。它是一个空壳子，因为它的显示与隐藏以及如何显示由父组件控制。但是插槽显示的位置由自身决定。Slot写在组件template 的哪块，父组件传过来的模板就显示在哪块。 作用域插槽：父组件只管样式，数据由子组件来提供。
template: ''
})