computed 计算属性
computed的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当做属性来使用。
var vm = new Vue({
el: '#app',
computed: {
name() {
return 111
}
}
})
watch 监听属性
被监听的属性值一发生变化就会触发 watch
var vm = new Vue({
el: '#app',
data: {
name: 'aaa'
},
watch: {
'name': function (newVal, oldVal) {
console.log(newVal) // 最近变化的新值
console.log(oldVal) // 以前的旧值
}
}
})
父子组件传递数据
(1) 子组件获取父组件的数据
<div id="app">
<child :sendMsg="msg"></child>
</div>
var child = {
template: '<input @click="getMsg"> 猜我说了啥 {{ sendMsg }} </input>',
data () {},
methods: {
getMsg() {
console.log( this.sendMsg )
}
},
props: ['sendMsg']
}
var vm = new Vue({
el: '#app',
data: {
msg: '媛问：猿哥一起嗨啊'
},
components: {
child
}
})
（2）子组件获取父组件的方法 并向父组件传递数据。
<div id="app">
<child @sendWay="way"></child>
</div>
var child = {
template: '<input> </input>' ,
data() {
return {
title: '猿'
}
},
methods: {
getWay() {
this.$emit('sendWay', this.title)
}
}
}
var vm = new Vue({
el: '#app',
data: {
from: ''
},
methods: {
way(t) {
this.from = t
}
}
})
ref 获取DOM 元素 和 组件
获取DOM元素
<div>
<h3 ref="txt">丫丫滴滴啪啪</h3>
</div>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
getElement(){
this.$refs.txt.innerText // 输入h3 的文本内容
}
}
})
获取组件
var tpl = {
template: '<h1 ref="child">子组件</h1>',
data () {
return {
some: '一点东西'
}
}，
methods: {
way () {
console.log('噜噜噜')
}
}
}
var vm = new Vue({
el: '#app',
data: {},
methods: {
getChild () {
this.$refs.child.innerText // 子组件
this.$refs.child.some // 获取子组件中定义的数据 ‘一点东西’
this.$refs.child.way() // 获取子组件中的方法， '噜噜噜'
}
},
components: {
tpl
}
})
Router
<div class="app">
<!-- 相对于a 标签， tag属性可以改变元素的状态，不影响跳转 -->
<router-link to="/login" tag="button">登录</router-link>
<router-link to="/register" tag="p">注册</router-link>
<!-- 占位符 路由组件将放在这里显示 -->
<router-view></router-view>
</div>
var login = {
template: '<h1>登录组件</h1>',
}
var register = {
template: '<h1>注册组件</h1>'
}
var router = new VueRouter({
routes: [
// component 必须是组件的模板对象，不能是组件的引用名称
{path: '/login', component: login},
{path: '/register', component: register}
]
})
var vm = new Vue({
el: '.app',
data: {},
router: router // 暴露在 vm 实例对象
})
路由 redirect 重定向
{path: '/', redirect: '/login'},
组件间切换的动画效果:
组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name="fade",会有如下四个CSS类名：
- fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
- fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
- fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
- fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
- in-out(mode默认in-out模式）：新元素先进入过渡，完成之后当前元素过渡离开。
- out-in：当前元素先进行过渡离开，离开完成后新元素过渡进入。
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(100px)
}
.v-enter-active,
.v-leave-active {
transition: all .5s ease
}
</style>
<div class="app">
<router-link to="/login" tag="button">登录</router-link>
<router-link to="/register" tag="p">注册</router-link>
<!-- 占位符 路由组件将放在这里显示 -->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
路由传参1
<router-link to="/login?id=111"> 登录 </login>
获取参数
this.$route.query.id // id= 111
image.png
路由传参2
<router-link to="/login/222" tag="button">登录</router-link>
<router-link to="/register/333" tag="p">注册</router-link>
routes: [
// component 必须是组件的模板对象，不能是组件的引用名称
{path: '/', redirect: '/login'},
{path: '/login/:id', component: login},
{path: '/register/:id', component: register}
]
})
created() {
console.log(this.$route.params.id) // 222
},
image.png
使用render 渲染组件
我们不光可以使用components渲染组件，还可以用 render 属性来渲染组件
看代码：
html:
<div class="app">
<h2>render 会替换掉整个元素</h2>
</div>
js:
var com = {
template: '<div>这是一个登陆组件</div>'
}
var vm = new Vue({
el: '.app',
render: function (createElement) {
return createElement(com) // createElement 是一个函数 参数是模板对象 ， 返回的结果将替换 el 指向的元素
}
})
与components不同的是 render属性会覆盖整个dom 元素，只能放一个组件，components 却可以放多个组件
文件的导入和导出
es6 提供了文件的导入和导出，但是不能直接通过浏览器运行，需要借助bable 进行转码，才可以使用
export default : 将文件导出
test.js :
export default {
name: '张三',
age: 20
}
import : 导入文件
main.js :
import file from './test.js'
使用 export default 只能导出一个对象
export
按需要导出成员，可以向外暴露多个成员
test.js:
export var title = '一只猿' // 导出成员
export var o = '一只媛'
import {title, o} from './test.js' // 名称必须一致
使用 {} 的方式来接收多个成员，不需要的成员可以不用接收 {title}
