Vue 学习总结
##将数据渲染进DOM元素
- {{message}}
- v-bind:属性= (也可写作 :属性=)
##常用语句
判断 v-if
循环 v-for="todo in todos"
按钮 v-on:click="函数名" (也可写作 @click=)
表单数据和应用数据双向绑定 v-model="数据名"
##组件
Vue.component('todo-item',
// The todo-item component now accepts a
// "prop", which is like a custom attribute.
// This prop is called todo.
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
-
props作为子组件的接口，接收父类的数据，同时解耦
-
组件可以作为自定义标签在HTML中使用
-
所有的 Vue.js 组件其实都是被扩展的 Vue 实例
实质上是一个预定义的Vue实例，在实例app中，app相当于父类，而组件相当于是app中的子类，父类的数据可以通过v-bind:字段名
的方式将父类作用域中的数据传入子类组件中
####用Vue创建的应用的大致结构
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
###创建实例
var vm = new Vue({
// 选项
})
传入的选项对象包括：
-
数据
-
模板
-
挂载元素
-
方法
-
生命周期钩子
###属性和方法
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
//vm.a === data.a
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
// 这个回调将在 vm.a 改变后调用
})
#####注意：
-
所有代理的属性都是响应的，添加新的属性时不会触发视图的更新
-
钩子的
this代表着调用它的实例
###插值
####文本
-
用双大括号
{{数据对象 | 过滤器}}注意：
双大括号中也可以是JS表达式可对数据进行运算
渲染结果解释为纯文本
若要输出HTML，需要在div中设置
<div v-html="rawHtml"></div>
##计算属性 用于将复杂的数据运算包含于实例的初始化中
作为其中一个选项对象：
computed: {
// a computed getter
reversedMessage: function () {
// this points to the vm instance
return
this.message.split('').reverse().join('')
}
}
reversedMessage作为计算过后的新属性，直接用双大括号进行解释即可得到计算的最终结果
####计算缓存与Method的区别 好处：当数据的值不改变的时候，依然会使用计算缓存而无需像调用Method那样重新计算 前提：计算缓存的使用必须要基于相关依赖，像Date.now()就不行
####计算缓存与$watch
在数据变动时，可以优先考虑用计算缓存，而并非watch回调
注意:计算属性默认为getter，也可设置为setter,setter在内部赋值的时候会被调用
##观察者 Watchers
当数据值变动时，相对于计算属性，更加的通用，执行异步操作(ajax访问API)或需要响应不断变化昂贵的数据操作时这很有用,例如限制访问API的频率
##Class 与 Style绑定
###绑定HTML Class
语法：v-bind:class={class1:布尔变量,class2...}
class还可以是数据对象,甚至是计算属性！
#####通过控制布尔变量可以使元素的class动态切换
<div v-bind:class="[activeClass, errorClass]">
###绑定内联样式
v-bind:style="{ color: mycolor}" mycolor在data中定义
复杂内联样式推荐绑定styleObject对象
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
##条件渲染
判断一个标签的输出 v-if="ok" ok值决定是否显示
判断一块标签的显示 用template元素作为包装元素，下面为根据需要显示的标签块
v-else可以和v-if和v-show一起使用
v-show专门用于对渲染元素的CSS属性，且不支持<template>标签
####v-if 和 v-show比较
频繁切换使用的用v-show,条件不大可能改变的v-if
##列表渲染
<template v-for="">
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
index索引，key键，value值
##key(未完)
作用：让Vue标识出节点的身份，检测数组元素的突变 用法：v-bind:key=“item.id”
##数组更新检测
变异方法：一组用来观察数组的方法，可以触发视图更新
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
非变异方法：不会改变原始数组的数据，但是会返回新的数组，适用于不想改变原值的情况
- filter()
- concat()
- slice()
##事件处理器
###监听事件
v-on:指令，例如点击v-on:click="触发方法名"
###内联事件处理
<button v-on:click="say('hi')">Say hi</button>
say方法名(传入的参数)
如果要访问DOM原生对象,传入的参数要有 特殊符号美元+event
###事件修饰符 添加在click和submit后
- .stop
- .prevent
- .capture
- .self
###按键修饰符
<input v-on:keyup.13="submit">
13表示键值，该按键按下后会触发submit
<input @keyup.enter="submit">
达到直接在HTML中监听事件的效果
##表单控件绑定 略 ##组件 ###注册全局组件
Vue.component('my-component', { 选项 }) 父组件
``
必须先注册组件，然后再初始化父实例，才能在父实例中使用组件自定义标签
###注册局部组件
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
'my-component': Child
}
})
子组件 ###data
注意：组件的data必须是函数！通过return的方式将data传入组件绑定的元素中
意义：类似接口解耦，使得同一个data在不同的组件中都能有自己不同的状态！
###传递数据 父–>子 props:[‘字段名’]
动态绑定 v-bind:字段名="父数据名"
<child v-bind:my-message="parentMsg"></child>
###props验证
propB: [String, Number],
// 必须且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组／对象的默认值应当由一个工厂函数返回
###组件v-model数据双向绑定 表单自定义绑定：
1.绑定value
2.有新的value时触发input事件
###非父子组件的通信 须使用一个空vue实例来当中央
var bus = new Vue()
// 触发组件 A 中的事件
bus.美元emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.美on('id-selected', function (id) {
})
###内容分发
绑定子组件内的指令到一个组件的根节点，必须在子组件的内部定义模板时进行绑定
<my-component>
<p>This is some original content</p>
<p>This is some more original content</p>
</my-component>
在父模板中放入子组件的标签，其中的内容将会被安插到子组件的<slot></slot>标签中
slot=“名称” 可以定义名字以标识父插入子的何处
