mvvm
vm:监听同步view和model
用数据渲染页面操作页面
差值表达式
作用：操作判断处理数据，数据拼接渲染。
指令
v-text
- 将文本数据渲染到页面
- 将内容和标签原样输出
v-html
- 将带标签的文本解析成HTML渲染到页面
- 容易导致xss攻击
v-bind
- 动态的绑定属性
v-for
渲染对象三个参数
item key index
<br />
渲染数组两个参数
item index
- 循环遍历对象数组
- key属性具有唯一性，标识数组的每一项
注意：一下变动不会触发视图更新
- 通过索引给数组设置新值
- 通过length改变数组
解决：- Vue.set(arr, index, newValue)
- arr.splice(index, 1, newValue)
数组
<li v-for="(item, index) in user" :key="index"> {{index}}.{{item.name}}</li>
对象
<li v-for="(value, key, index) in boss"> {{index}}.{{key}}:{{value}}</li>
v-model
- 视图层和数据层互相绑定，同时更新
<input type="text" v-model="uname" />
v-on
- 绑定事件监听
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
修饰符
- .stop 调用event.stopPropagetion()
阻止事件捕获、冒泡- .prevent 调用 event.preventDefault() 取消事件的默认行为
- .capture 添加事件侦听器时使用capture模式
- .self 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
v-if
- 根据表达式判断是否渲染元素
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
v-show
- 根据表达式判断真假，设置display属性
v-cloak
- 这个指令保持在元素上直到关联实例结束标签
- 和
[v-cloak] {display: none}一起用时，可以隐藏未编译的标签直到实例准备完毕
自定义指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
<input type="text" v-focus>
<div id="app">
<input type="text" v-mycolor="color"
</div>
<script>
Vue.directive("mycolor", {
inserted(el, binding) {
el.style.color = binding.value
}
})
var vm = new Vue({
el: "#app",
data: {
color: "red"
}
})
</script>
过滤器
- 用于文本格式化
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
计算属性和监听器
官方文档计算属性和侦听器
深度监听
var vm = new Vue({
el: '#app',
data: {
user: {
name: 'jack'
}
},
watch: {
// 监听对象不能使用下面这种写法，要使用深度监听
// user(newVal, oldVal) {
// console.log('改变了');
// }
user: {
// hanlder这个函数名字固定
handler (newval) {
console.log('改变了');
console.log(newval.name);
},
// deep:true表示深度监听
deep: true
}
}
})
动画 过渡
css过渡
- v-enter: 定义进入过渡的开始状态。
- v-enter-active：定义进入过渡生效时的状态。
- v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。
- v-leave: 定义离开过渡的开始状态。
- v-leave-active：定义离开过渡生效时的状态。
- v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。
// html
<div id="example-1">
<button @click="show = !show">
Toggle render
</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
js
new Vue({
el: '#example-1',
data: {
show: true
}
})
css
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
自定义过渡的类名
- 结合第三方css动画库，如Animare.css
-enter-class
-enter-active-class
-enter-to-class (2.1.8+)
-leave-class
-leave-active-class
-leave-to-class (2.1.8+)
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
javaScript 钩子
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
// ...
methods: {
beforeEnter: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
组件
注册组件
- 全局注册
Vue.component('my-compone', {
})
<div id="app">
<my-compone></my-compone>
</div>
- 局部注册
var ComponentA = { /* ... */ }
new Vue({
el: '#app'
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
父子组件通信
- 子传父
Vue.component('father', {
template: `
<div>
<p>父亲年纪大了，记性不好，我儿子告诉我他叫{{mySonName}}</p>
<son @tellFatherMyname="getMySonName"></son>
</div>
`,
data () {
return {
mySonName: '???'
}
},
methods: {
// 这个函数中有一个默认参数，该参数就表示上传上来的值
getMySonName (data) {
// console.log(data);
this.mySonName = data
}
},
components: {
son: {
data () {
return {
myName: '小明'
}
},
template: '<button @click="emitMyname">点击就告诉我爸爸我叫{{myName}}</button>',
methods: {
emitMyname () {
// 子组件传值给父组件需要用到$emit()方法，这个方法可以传递两个参数，一个是事件名称，一个是需要传递的数据
this.$emit('tellFatherMyname', this.myName)
}
}
}
}
})
- 父传子
// 创建一个fahter组件
Vue.component('father', {
// 2. 在使用子组件的地方，通过v-bind指令给子组件中的props赋值
template: '<div><p>我是父组件，我给我儿子起名叫{{mySonName}}</p><son :myName="mySonName"></son></div>',
data () {
return {
mySonName: '小光'
}
},
// 通过components属性创建子组件
components: {
// 创建一个son组件
son: {
// 1. 声明props，它的作用是：用来接收从父组件传递过来的值
// props可以跟一个数组，数组里面的值是一个一个的字符串，这个字符串可以当成属性来使用
props: ['myName'],
template: '<p>我是子组件，我爸爸给我取名叫{{myName}}</p>'
}
}
})
网友评论