随笔分类 - Vue
介绍vue
摘要：创建module store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const mutations={ add(state,n){ state.count+=
阅读全文
摘要：先创建actions和方法 store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const mutations={ add(state,n){ state.co
阅读全文
摘要：通过this.$store.getters来使用 store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const getters={ count(state){
阅读全文
摘要：直接通过$store.commit调用 <button @click="$store.commit('mutations中的方法名','可带参数')">调用</button> 不需要再进行其他配置 通过在methods中注册方法调用 //先引入mapMutations import {mapMuta
阅读全文
摘要：store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } export default new Vuex.Store({ state,mutations }) 直接通
阅读全文
摘要：首先先创建一个store.js 安装vue,vuex什么的就不说了 这是一个仓库 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //装载数据的一个仓库 const state = { count: 1 } //修改仓库的方法
阅读全文
摘要：1.render的使用 定义html模板组件 var 组件名称 ={ template:'<p></p>' } 定义render var vm = new Vue({ el:'#app' render:c=>c(组件名称) }) 引入到render内的组件会替换掉el中指定的标签 2.与compon
阅读全文
摘要：需要安装vue-loader npm i vue-loader vue-template-complier -D 然后在配置文件中新增匹配规则 {test:/\.vue$/,use:'vue-loader'} 1. 定义.vue文件 <template> <!--这里定义html模板--> </te
阅读全文
摘要：1.定义 在computed中可以定义一些属性，这些属性叫做计算属性，这些属性是一个方法，当需要使用计算属性时，直接把属性当作数据的名称使用，就会调用对应的方法去计算出一个数据在引用计算属性时，一定不要加()，而应该将它当成不同数据来使用只要计算属性的方法内部，任何data中的发生了变化，就会立刻调
阅读全文
摘要：1.作用 这个属性可以监听data中制定数据的变化，然后触发watch中对应的函数进行处理 是Vue实例中的属性 2.使用 var vm=new Vue({ el:'#app'， data:{ 一个数据:'' }, watch:{ //这个函数有两个参数 //newVal改变后的值 //oldVal
阅读全文
摘要：就是通过vue-router将组件渲染到页面中 定义页面模板对象 var header={template:'<p>header</p>'} var left={template:'<p>left</p>'} var main={template:'<p>main</p>'} 定义路由对象，注册到V
阅读全文
摘要：使用children属性实现路由的嵌套 创建模板对象 .js文件 var father={template:'#temp'} var frist={template:'<p>第一个</p>'} var second={template:'<p>第二个</p>'} .html文件 <template
阅读全文
摘要：1.通过query获取参数 创建路由对象，将路由对象注册到Vue实例中去 var 页面模板对象={template:'<p>第一个</p>'} var router=new VueRouter({ routes:[ {path:'/监听的路由链接地址',component:页面模板对象} ] })
阅读全文
摘要：1.vue-router的安装 普通安装 先下载vue-router.js 导入，要先导入vue.js包 <script src="vue-router.js"></script> webpack安装 安装命令： npm install vue-router 导入，要先导入vue import Vu
阅读全文
摘要：默认情况下，components属性中的组件无法访问data中的数据和methods中的方法 1.父组件通过props属性来实现向子组件传值 定义子组件 var vm=new Vue({ components:{ coml：{ template:'<p>{{parentmsg}}</p>' } }
阅读全文
摘要：方式一 使用v-if和v-else实现切换 定义组件 Vue.component('myTag1',Vue.extend({ template:'<p>tag1</p>' })) Vue.component('myTag2',Vue.extend({ template:'<p>tag2</p>' }
阅读全文
摘要：Vue.component(‘组件名称’，{})中的属性 1.template 作用：用来定义组件的html模板 使用：直接接字符串 Vue.component('组件名称'， { template:'<p>aaa</p>' }) 2.data 作用： 定义一个在组件中使用的数据 定义： Vue.c
阅读全文
摘要：作用： 拆分Vue实例的代码，能够让我们以不同的组件来划分不同的功能模块，直接调用对应的组件即可 方便ui组件的重用 与模块化的区别： 模块化是从代码逻辑的角度进行划分的，代码的没一层结构就是一个模块，业务逻辑层，server层等 一般是后端，保证每个模块的职能单一 组件化是从ui界面的角度进行划分
阅读全文
摘要：1.过渡类名实现动画 四个时间点：v-enter，v-enter-to，v-leave,v-leave-to 入场时元素从v-enter变化到v-enter-to的状态，退场时元素从v-leave变化到v-leave-to 作用：使页面中的元素出现和消失不会很突兀，加一个过渡效果 使用： 用tran
阅读全文
摘要：除了vue-resource之外，还可以使用’axios‘的第三方包实现数据的请求 因为跨域失败访问不到，不过同域的可以直接访问.html文件来检验，这样可以不用搭服务器 建议使用axios来进行异步访问请求 1.安装或导入vue-resource 安装命令： npm install vue-res
阅读全文
浙公网安备 33010602011771号