Vue知识点总结
注：个人笔记不适用于他人学习~~
1. 事件修饰符
Vue中事件修饰符 事件的执行阶段：捕获阶段（父元素） --> 事件源阶段（被点击的内部子元素） --> 事件冒泡阶段 1. stop 阻止冒泡 如： <div id="inner" @click="innerClick"> <input type="button" value="按钮" @click.stop="btnClick"> </div> 2. prevent 默认事件 如： <a href="http://www.baidu.com" @click.prevent="linkClick">阻止a元素跳转的默认行为</a> 3. capture 事件监听器使用事件捕获模式 事件捕获模式 和 事件冒泡模式 只能二选一 如： 鼠标点击input元素, 先触发外层元素的innerclick事件 <div id="inner" @click.capture="innerClick"> <input type="button" value="按钮" @click="btnClick"> </div> 4. self 当事件在该元素本身触发时才会触发自生绑定的事件 5. once 只触发一次 如：第一次点击时才会被触发 <input type="button" value="按钮" @click.once="btnClick">
2. 过滤器
1. 全局过滤器 Vue.filter('过滤器名称', function() {}) 2. 私有过滤器 var vm = new Vue({ data: {}, filters: {} }); vm.$mount('app')
3. vue实例--设置渲染区域的两种写法
// 创建 Vue 实例，得到 ViewModel vm 1. var vm = new Vue({ el: '#app' }); 2. var vm2 = new Vue() vm2.$mount('#app2') // 按需挂载 推荐使用
4. 自定义指令
// v-focus='value' 1. 全局指令 Vue.directive('指令名称（如focus）', { bind: function(el, binging) { // 当解析到元素绑定的自定义指令时调用 el.style.color = 'red' el.focus() binging.name // 指令名称 不包含 v- binging.value // 指令的值 value }, inserted: function(el) { // 当指令绑定的元素被到插入到其父元素时调用 el.focus() } }) 2. 私有指令 var vm = new Vue({ data: {}, directives: { focus: { bind: {...}, inserted: {...} } } }); /* 注： 1. 自定义指令可以用来进行dom操作 2. 一定要注意调用时间 3. 样式设定不需要考虑时间 因为设定了就会存在 el.style.color 4. 解析到时如果元素还没渲染到页面，事件不会生效 el.focus
5. 按键修饰符
使用：v-on:keyup.enter .enter .tab .delete (“删除”和“退格”键) .esc .space 等.
6. axios
1. 挂载axios Vue.prototype.$http = axios 注：axios不支持JSONP
7. 组件创建/使用
注册全局组件： 1. Vue.component('组件名', 组件的构造函数) 如： const com1 = Vue.extend({ template: '<h1>创建全局组件----第一种方式</h1>' }) Vue.component('com1', com1) 2. Vue.component('com2', { template: '<h1>创建全局组件----第二种方式</h1>' }) 3. <template id='tmpl-id'> <h1>创建全局组件----第三种方式</h1> </template> Vue.component('com3', { template: '#tmpl-id' }) 注： 1. 组件是特殊Vue实例 2. 使用template方式创建的全局组件 UI模板元素必须放在在注册组件前, 3. 模板元素不能放入Vue实例控制的app容器中，因为会被当成组件渲染到界面上 注册私有组件 let vm = new Vue({ data: {}, components: { 'com4': { template: '<h1>创建私有组件----第一种方式</h1>' } } }) 定义组件的私有data methods Vue.component('com2', { template: '<h1>定义组件的私有数据----{{ msg }}</h1>', data: function() { return { msg: '组件私有数据msg' } } }) 注： 1. 组件私有数据data必须是function类型，且必须return一个对象 2. 每次引用组件data方法return出的对象都是一个新的对象，保证每次创建的组件数据私有化 使用component标签结合is属性切换多个组件 <div> <component :is="'组件名'"></component> // is属性用来控制要渲染的组件 </div> <script> Vue.component('com1', { template: '<h1>组件1</h1>' }) Vue.component('com2', { template: '<h1>组件2</h1>' }) Vue.component('com3', { template: '<h1>组件3</h1>' }) </script>
8. 使用hash值模拟路由实现
// hash # 不会刷新页面以及发送HTTP请求，只是实现客户端页面的定位 // hash # 可以修改浏览器的历史纪录 window.onhashchange() // 监听页面的hash值的改变 location.hash() // 获取当前页面hash值
9. 路由
1. const login = { template: '<h1>路由----登录</h1>' } 2. const router = new VueRouter({ routes: [ // 路由规则 {path: 'hash路径', component: '组件物理地址'}, {path: '/login', component: login} ] }) 3. new Vue({ data: {}, methods: {} router: router, }) 4. <div> <router-link to='路由路径'></router-link> // 负责路由跳转，类似于a链接 <router-view></router-view> // 负责UI界面的呈现 </div> 5. 设定默认的根路由 {path: '/', redirect: '重定向到某路由'} 6. 路由传参 a. query传参（即问号传参） <router-link to='/login?id=536'></router-link> // to="{path:'/login',query: {id:536}}" this.$route.query // 获取url问号后面传递的参数 注：query传参（问号传参）不需要修改对应的路由规则 对比params传参 b. params传参 <router-link to='/login/536/lien'></router-link> {path: '/login/:id/:name', component: login} this.$route.params c. props 获取参数 {path: '/login/:id/:name', component: login, props: true} 注：props: true这种获取参数的形式好处是 不需要在使用'this.$route.'的形式，直接 在组件中使用 props: ['id', 'name']接收参数即可 7. 子路由 { path: '/account', component: account, children: [ {path: 'login', component: login} // 子路由规则path属性值前不需要再加 '/' ] } 8. 编程式导航--实现路由跳转 标签式 <router-link to=''> <button @click='goRouter'></button> goRouter() { this.$router.push('/login/' + this.id) } this.$router.go(-1) 后退，用来实现面包屑导航 注： this.$route 是用来获取参数的 this.$router 是用来实现编程是路由跳转的
10. watch、computed属性使用
UI界面：name = xing + ming new Vue({ data: { xing: '', ming: '' name: '' }, watch: { // watch 应用场景：监听虚拟数据如监听url的改变（单个数据） 'ming': function(newVal, oldVal) { this.name = this.xing + newVal }, '$route.path': function(newVal, oldVal) {} } computed: { 'name': function() { return: this.xing + this.ming // 'name'即为计算属性 // 只要计算属性的function中，任何依赖的数据发生变化，就会触发重新求值 // 计算属性的值，如果未发生变化，则会被缓存供之后使用 } } }) // get set使用 computed: { 'name': { get() { // 获取name的值触发 return: this.xing + this.ming }, set(val) { // name的值自身发生改变，触发 const arr = val.split('-') this.xing = arr[0] || '' this.ming = arr[1] || '' } } }
11. Vuex使用
// 全局环境实现数据共享 1. 导入并注册 Vue.use(Vuex) 2. 创建 store = new Vuex.Store({ state: { // state用来存储数据 count: 0 }, mutations: { // 专门用来修改state中的数据 add(state, arg) { // mutations中的方法第一个参数永远都是 state // 自定义参数只能有一个，多个参数可以使用数组或对象 state.count += arg } }, getters: { // getter 类似于计算属性----包装数据类似过滤器----如添加前缀（不会修改原数据） nameInfo(state) { let xing = 'li', ming = 'en' state.name = xing + ming return '我的名字是：' + state.name } }, actions: { // actions类似于mutations // actions里进行异步操作、mutations里进行同步操作 // mutations中的异步操作，可以正常执行，但是vue-tools调试插件无法监听数据变化 newAdd(context) { // actions中的方法，可以提交对应的mutations方法 // action中不能直接操作state，如果想要修改state，只能在actions中，提交对应的 mutations方法 context.commit('add') } } }) new Vue({ el: '#app', store: store, // 挂载到Vue实例上 methods: { increment() { //直接使用this.$store.state修改数据 // this.$store.state.count++ 强烈不推荐 // this.store.commit可以调用mutations中的方法修改数据----推荐使用 let arg = 2 this.store.commit('add', arg) } } }) 3. UI界面 3.1 state----UI层使用方式 3.1.1 <h1>数量：{{ $store.state.count}}</h1> ---- 较为麻烦 3.1.2 mapState函数获取数据----返回值一个对象 computed: {// 定义计算属性区域 ...mapSate(['count']) } 3.2 mutations----UI层使用方式 3.2.1 this.store.commit('add', '可选实参') 3.2.2 mapMutations----映射mutations中的方法到methods中 methods: {// 定义计算属性区域 ...mapMutations(['add']) } 3.3 getters----UI层使用方式 3.3.1 this.$store.getters.nameInfo 3.3.2 mapGetters----映射到计算属性中 computed: {// 定义计算属性区域 ...mapGetters(['nameInfo']) } 3.4 actions----异步操作 3.4.1 mapActions---映射mutations中的方法到methods中 methods: {// 定义计算属性区域 ...mapActions(['newAdd']) } 3.4.2 this.store.dispatch('newAdd')
---------------------------------------------------------------2018/10/11------------------------------------------未完