watch属性:监听指定值的变化(异步场景)
computed计算属性:方法里的任意一个值发生变化就会监听到(数据联动)
条件渲染:v-if v-else v-else-if v-show
列表渲染:v-for
属性绑定:v-bind:xxx (:xxx) class绑定(:class) style绑定(:style)
vue-cli脚手架:
安装全局vue-cli:$ npm install -g @vue/cli
创建项目:进入文件目录执行$ vue create hello-world
选择默认创建,然后按需要添加其他库,默认使用的是yarn,
安装vuex、vue-router、less,yarn add ...
常用目录结构:
组件化思想:整体化、复用化、独立化(300行原则、复用化原则)
组件状态管理(vuex)
多组件的混合使用,多页面,复杂业务(vue-router)
组件间传参,消息,事件管理(props,emit/on,bus)
vue-router
组件页面
Home
在router.js中定义router
import Router from "vue-router";
Vue.use(Router);
const routes = [
{
path: '/home',
name: 'home',
component: Home
}
];
var router = new Router({
routes
});
export default router;
动态路由:path变为/user/:id
在组件中想要获得这个id值,可以通过this.$router来获取router实例,可以定义一个computed属性:
computed: {
dynamicSegment() {
return this.$router.params.id
}
}
动态路由在来回切换时,由于指向组件,vue不会销毁再创建这个组件,而是复用这个组件,组件的生命周期就没有用了。就只能在组件内部利用watch来监听$router的变化
data() {
return {
dynamicSegment: ''
}
}
watch: {
$router(to, from) {
// to表示你要去的组件,from表示的是从哪个组件来的
this.dynamicSegment = to.params.id
}
}
路由嵌套:
const routes = [
{
path: '/home',
component: home,
children: [
{
path: 'girl',
component: girl
},
{
path: 'boy',
component: boy
}
]
}
]
vuex:组件状态的集中管理
单项数据流: Actions -->state -->View -->Actions
多个视图依赖于同一个状态(菜单导航)
来自不同视图的行为要更新同一状态(弹幕)
store.js:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0,
list: [
{id: 1, done: true},
{id: 2, done: false}
]
}, // 组件的状态
getters: {
todo: state => {
return state.list.filter(el => el.done)
}, // Getter接受state作为其第一参数
todoCount: (state, getters) => {
return getters.todo.length
}, // Getter接受其他getter作为第二参数
getTodoById: (state) => (id) => {
return state.list.find(el => el.id === id)
} // 让getter返回一个函数,来实现给getter传参。在对store里的数组进行查询时非常有用
}, // 相当于store的计算属性,getter的返回值会根据他的依赖被缓存起来,依赖值发生变化时会被重新计算
mutations: {
increase () {
this.state.count ++
}
}, // 改变组件状态的方法集
actions: {
}
})
组件中使用count值:
import store from '@/store';
export default {
name: 'Info',
store,
data () {
return {
msg: store.state.count
}
}
}
组件中出发count变化的方法: