vue实例
var data = {a: 1}
var vm = new Vue({
el: '#app',
router,
data: data,
components: {App},
template: ''
})
vm.a = 5
console.log(vm.a === data.a)
- 传进去的数值与外面的数值一直相等
- 在外面添加的属性不会随之改变
- 使用Object.freeze(obj)后在传进去的值不会被绑定
- 前面带有
$的函数一般是vue的属性或方法
vm.$data //传进去的data vm.$el //组件的根节点 vm.$watch('a', function (newValue, oldValue) {}) //数据a改变之后触发的回调函数，不要使用剪头函数
生命周期
-
beforeCreate、created -
beforeMount、mounted -
beforeUpdate、updated -
beforeDestroy、destroyed
模板语法
<span>Message: {{ msg }}</span>- 只渲染一次
<span v-once>{{ msg }}</span> - 输出html代码：
<p>Using v-html directive: <span v-html="rawHtml"></span></p> -
v-bind可以使用简单表达式，也可以为元素指定属性，如<a v-on:click="doSomething">...</a>或<a v-bind:href="url">...</a> - 也可以使用修饰符：
<form v-on:submit.prevent="onSubmit">...</form> - 缩写：
v-bind=>:,v-on=>@
计算属性
- 可以理解为一个内部的方法，可以随时改变传入的
data值 - 计算属性写在
computed方法中
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
- 计算属性使用缓存，方法不使用缓存，方法写在
methods中 - 进行较大的开销的时候将函数写在
watch中，可以理解为自动节流函数
class与style绑定
- 使用
v-bind控制class，v-bind中可以是一个数组，在data中指定数据，经常与计算属性连用 - 会讲组件里面和外面的class属性一起添加
- 使用
v-bind也可以绑定内联属性，会自动添加浏览器前缀
条件渲染
- 通过
v-if控制元素是否显示，v-else必须紧跟在v-if的后面，也可以使用v-else-if - 也可以使用
v-show,他不会在DOM中删除元素，只是控制元素不显示 - v-for 具有比 v-if 更高的优先级。
列表渲染
- 用
v-for渲染列表，需要使用v-for="item in [array]"语法 - 可以使用
v-for="(item, index) in [array]"将数组的键名也加上 - 如果是对象的话，使用
v-for=value in [object] - 可以使用
v-for="(value, key, index)in object"获取键名和序号 - 使用
push, pop, shift, unshift, splice, sort, reverse方法更改数组时，vue会自动监测并重新渲染 - 使用索引直接设置和修改数组长度不会检测并渲染
- 使用对象时，vue不会检测对象属性的添加或删除，但是可以使用
Vue.set(object, key, value)为对象添加属性 - 不使用计算属性更改数组，应该使用方法
- 截取一段范围的
v-for:<span v-for="n in 10">{{ n }} </span> - v-for 的优先级比 v-if 更高
事件处理
- 使用
v-on监听DOM事件，事件的处理方法写在method中 - 可以将
$event作为参数传给方法，方法中可以调用原声事件对象 - 使用修饰符达到一些目的：
-
.stop阻止单击事件继续传播 -
.prevent提交事件不再重载页面 -
.capture添加事件监听器时使用事件捕获模式 -
.self只处理自己触发的事件 -
.once处理事件只进行一次 -
.passive只要触发事件，立刻执行，不等事件完成 - 使用的时候要注意顺序，可以串联使用
-
- 按键修饰符
- 可以使用
.+数字，还有一些常用的按键 -
.enter,tab,delete,esc,space,up,down,left,right - 可以通过
config.keyCodes设置按键别名 - and so on ...不太常用
- 可以使用
表单输入绑定
- 使用
model绑定表单元素，初始值为传入的data - 多个复选框应该绑定到同一个数组中
- 多个单选按钮绑定到同一个变量中
- 下拉框应该加一个禁用的请选择，以兼容ios
-
.lazy将每次都改变的model值设置为change -
.number将用户输入的值转为数值 -
trim自动过滤首位空白字符
组件
- 全局注册组件
Vue.component('my-component', {}) - 局部注册
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父组件模板中可用
'my-component': Child
}
})
- 组件的data必须是函数
- 在一些规定内部标签的标签中使用
<tr is="my-component"><tr/>来使用组件 - 尽量使用字符串模板：
<my-component my-message="hello"></my-comonent> - 使用
props接收父元素传入的数据，传入的数据可以是一个数组或者对象 - 父组件通过
v-bind绑定传值，子组件不应该修改传入的props
Prop验证
props: {
propA: Number, //基础类型检测
required: true,
type: Object,
default: 1,
validator: function(value){} //自定义验证
}
-
type的值可以是String,Number,Boolean,Function,Object,Array,Symbol,也可以用instanceof检测 - 先进行
props检测，在进行组件注册
自定义事件
子组件给父组件传值
- 父组件在使用子组件的时候绑定触发函数，将这个触发函数写进自己的方法中，子组件也可以有自己的方法
- 父组件在调用子组件中写
@[方法名]=[方法值],子元素触发在触发事件中写this.emit([方法名], '传递的数据') -
.native给组件的跟元素加原生事件
非父子组件的通信
- A组件：
bus.$emit('id-selected', 1) - B组件：
bus.$on('id-selected', function (id) { // ... })
插槽分发内容
-
单个插槽
如果父组件使用子组件，并在子组件中还加入了其他元素，那么应该在子元素中加入
slot元素，如果父组件没有加入其他内容，那么将渲染slot中的html片段，如果加入了其他内容，则渲染其他内容。 -
具名插槽
如果父组件添加了两个
slot元素，父组件通过slot=[名]指定子组件渲染的位置。子组件通过name=[名]来确认渲染位置。 -
作用于插槽
文档截图
动态组建
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
上述代码可以从当前代码选择一个子元素渲染，也可以直接用在组件对象上面
var Home = {
template: '<p>Welcome home!</p>'
}
var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})
如果在外层家一个keep-alive元素，则在切换当前的子元素后，前一个子元素不会被清楚，而是放在内存中，可以保留他的状态或避免重新渲染。
杂项
- 写组件的时候想好以后要不要进行复用
- 进行使用
v-bind和v-on的简写:和@ - 给子组件加
ref属性后可以使用父组件.ref属性值来调用子组件，当ref和v-for一起使用时，获取到的将是一个数组
网友评论