一.computed和methods
- methods: 适合用于业务逻辑处理, 数据不能缓存, 每次使用都会重新调用
<div id="app">
<input type="text" name="" id="input" class="form-control" v-model='firstName'>+
<input type="text" name="" id="input" class="form-control" v-model='lastName'>=
<!-- <input type="text" name="" id="input" class="form-control" :value='methodsFullName()'> -->
<!-- <input type="text" name="" id="input" class="form-control" :value='fullName'> -->
<!-- computed里面定义的函数可以直接以方法名作为属性使用 -->
<input type="text" name="" id="input" class="form-control" :value='computedfullName'>
</div>
<script>
new Vue({
el: "#app",
data: {
firstName: '',
lastName: '',
fullName: ''
},
created() {
},
methods: {
methodsFullName() {
//使用methods方法 数据得不到缓存
//需要使用() 调用
return this.firstName + '-' + this.lastName
}
},
watch: {
//直接以data里面的数据作为方法名 即可监听该属性
firstName(newVal, oldVal) {
console.log(newVal, oldVal);
this.fullName = newVal + "-" + this.lastName;
},
lastName(newVal, oldVal) {
console.log(newVal, oldVal);
this.fullName = this.firstName + "-" + newVal;
},
},
computed: {
computedfullName() {
return this.firstName + '-' + this.lastName
}
}
})
computed: 适合计算属性, 不支持异步, 可以缓存数据, 只有在相关依赖发生变化时才会重新求值
<div id="app">
{{fullname}}
<button @click='changeFirstname'>changeFirstname</button>
</div>
<script>
new Vue({
el: "#app",
data: {
firstname:'0567',
lastname:'34566778'
},
created() {
},
methods: {
changeFirstname(){
this.firstname='86'
}
},
computed:{
// 这种方法只能计算属性，且无法给他当作普通的函数
// fullname(){
// return this.firstname+'-'+this.lastname
// }
// 这种方法可以传递数据，但是需要使用另一个函数
fullname:{
get(){
return this.firstname+'-'+this.lastname
},
set(val){
this.firstname=val
}
}
}
})
</script>
- watch: 当想要执行异步或者昂贵的操作以响应不断的变化时使用watch, 支持异步监听, 也可以监听路由变化, 不支持缓存, 数据变化时, 就会触发相应的操作
<router-link to='/login'>login</router-link>
<router-link to='/home'>home</router-link>
{{msg}}
<router-view></router-view>
<script>
const Login = {
template: '<div>Login</div>'
}
const Home = {
template: '<div>Home</div>'
}
const router = new VueRouter({
routes:[
{
path:'/login',
component:Login
},
{
path:'/home',
component:Home
},
]
});
new Vue({
el: "#app",
data: {
msg:'welcome'
},
created() {
},
methods: {
},
watch:{
'$route.path'(newVal,oldVal) {
console.log(newVal,oldVal);// 打印结果是两个路径
if(newVal==='/login'){
this.msg='请登录！'
}else if(newVal==='/home'){
this.msg='欢迎回来'
}
}
},
router,
})
</script>
父传子
1. 在渲染的子组件上，使用v-bind的方式绑定要传递的父组件的data中的数据
2. 在子组件中，使用props接受传递的数据
props: ['parent']
props: {
parent: {
type: ,
defulat: ,
}
}
子传父
ref
兄弟传值
B ---> A
1. 定义空的vue实例 eventBus
2. A中使用
created() {
eventBus.$on('getB',function(data){
console.log(data) // 传递的数据
})
}
3. B中使用
eventBus.$emit('getB','传递的数据')
vuex
1. 什么是vuex
是一个状态管理，可以理解为一个全局的空间，所有的组件都可以通过特定的方式获取到数据
2. vuex有哪些核心
state
mutations
actions
getters
modules
3. vuex的数据流是怎样
同步： 组件--commit--mutations--修改state的数据--render--组件
异步： 组件--dispatch--actions(发送异步请求)--commit--mutations--修改state的数据--render--组件
4. vuex 如何多人开发
modules
开启命名空间
namespaced
路由
路由传参
query
/home?name=fly&age=18
this.$route.query.name
this.$route.query.age
params
路由跳转传的具体参数
/home/fly/18
路由配置文件中占位
{
path: '/home/:name/:age'
props: true
}
this.$route.params.name
this.$route.params.age
props: ['name','age']