Vue|Vue 学习记录二 Vue学习记录二

组件化：

全局组件： 1、创建组件构造器(template 只能有一个根元素) var Profile = Vue.extend({ template: "标题内容 " }) 2、注册已经创建好的组件 // 第一个参数：组件名称 // 第二个参数：组件构造器 Vue.component('my-component',Profile) 3、使用注册好的组件创建组件的其他写法简写 // 1、直接将一个对象作为第二个参数，这时内部会自动创建组件构造器 Vue.component('my-component-2',{ template: "标题2 内容2 " })// 2、template 的内容写在 script 中 Vue.component('my-component-3',{ template:"#info" })//3、template 的内容写在 template 标签中 Vue.component('my-component-4',{ template:"#info" }) 局部组件： // 自定义组件属性key components: { "my-component-5": { template: "#info", }, },

动态组件

// v-bind:is='' 通过这种方式切换组件可以保存组件的状态

父子组件

//首先弄两个组件 // 注册组件 Vue.component('father',{ template:'#fater', // father 组件里面存在子组件 son。 components:{ 'son':{ template:'#son', } } })// 父组件给子组件传数据 // 子组件添加 props 字段，弄个数组，接受的字段全写进去就好啦。 'son':{ template:'#son', props:['name','age'] } //使用的地方，用 :name 就可以将参数传递过来//父组件的方法传递给子组件 // 1、将父组件的方法 fatherFn，通过约定的事件名 sonclick，传递给子组件// 2、子组件添加自己的事件，调用自己方法。【Vue|Vue 学习记录二】点击事件 // 3、子组件在自己的方法中，通过以下方式调用父组件。 sonFn(){ this.$emit('sonclick') }//子组件给父组件传递参数通过调用父组件方法，传递参数。 this.$emit('sonclick','哈哈哈哈')*** 传递参数的时候不能用驼峰命名，用 - 连接，接受到的就是驼峰命名 *** 传递方法的时候不能用驼峰命名，只能用 - 连接

插槽

默认情况下是不能在组件中添加子元素的。要想添加就需要用到 slot。匿名插槽具名插槽啦啦啦啦啦啦作用域插槽

数据共享（Vuex）

// 1.创建 Vuex 对象 const store = new Vuex.Store({ // 用于保存共享数据 state:{ msg:'我是共享数据' } })Vue.component('father', { template: '#fater', // 2.在父组件添加这个对象，子组件也可以进行使用 store: store, //...修改共享数据 // 创建 Vuex 对象 const store = new Vuex.Store({ // 用于保存共享数据 state:{ msg:'我是共享数据', count: 0 }, // 修改共享数据要通过这个统一的方法,方便排查错误 mutations:{ mAdd(state){ state.count = state.count + 1 } } }) //使用 this.$store.commit('mAdd')//计算属性 // 创建 Vuex 对象 const store = new Vuex.Store({ // 用于保存共享数据 state:{ msg:'我是共享数据', }, // 和组件中的计算属性一样的（computed） getters:{ format(state){ return "格式化数据" + state.msg } } }) //使用{{this.$store.getters.format}}

Vue Router：

// 基本步骤 // 1、定义组件 const one = { template: '#one' }const two = { template: '#two' } // 2、定义路由规则 const routes=[ {path:'/one', component: one}, {path:'/two', component: two}, ]// 3、创建路由对象 const router = new VueRouter({ routes: routes })var app = new Vue({ el: '#app', // 4、路由对象绑定Vue实例 router:router,components: { one: one, two: two } })第一个页面第二个页面 // router-linkto:指定路由 tag:指定渲染的标签（默认是）第一个页面> 第二个页面// router-link 激活样式 const router = new VueRouter({ routes: routes, // 指定激活状态的 router-link 样式 linkActiveClass:'wjj-link-active' })//页面重定向 const routes=[ // 重定向根路径重定向到具体页面 {path:'/', redirect: '/one'}, {path:'/one', component: one}, {path:'/two', component: two}, ]//参数传递 //通过连接传递参数第一个页面 //获取参数 this.$route.query//通过占位符来传递 const routes=[ {path:'/two/:name/:age', component: two}, ] 第一个页面 //获取参数 this.$route.params//嵌套路由 const routes = [ { path: '/one', component: one, children: [{ path: 'sub1', component: subOne }, { path: 'sub2', component: subTwo }] }, ]//监听路由地址变化 var app = new Vue({ //省略代码 data:{ one:1 }, watch:{ one:function(newValue, oldValue){}, "$route.path":function(newValue, oldValue){} }, //省略代码 })

生命周期：

//Vue 创建期间的生命周期方法 beforeCreate(){ //仅仅代表 Vue 实例刚刚被创建，还没有初始化好 Vue 实例的数据和方法，因此不能访问 Vue 的数据和方法。 }, created(){ //Vue 实例数据和方法已经初始化成功 }, beforeMount(){ //编译好最终模板，但是没有将最终的模板渲染到界面上 }, mounted(){ //完成最终的渲染，可以拿到最终的数据（界面上渲染的数据） },//Vue 运行期间的生命周期方法 beforeUpdate(){ //保存的数据发生变化就会调用，数据已经修改但是界面还没有同步 }, update(){ //界面同步更新之后就会调用 },//Vue 销毁期间的生命周期方法 beforeDestroy(){ //表示组件即将被销毁，最后一个可以获取 Vue 实例数据和方法的生命周期方法。 }, destroyed(){ //当前组件已经被销毁 }

Plugin 开发：第一步：需要搞一个组件。
第二部：编写插件对应的JS文件。
其结构如下图：

文章图片
插件结构图.png 插件的配置文件：

import Vue from 'vue' import Toast from './Toast.vue'export default { //组件封装成为插件，必须提供一个 install 方法，在 install 中注册对应的组件。 install:function(){ Vue.component(Toast.name, Toast) } }

我们为啥要把组件封装成插件呢？因为插件更方便进行扩展。
下面我们对插件进行如下修改。

import Toast from './Toast.vue'export default {// 这个方法可以接收两个参数(Vue对象，参数) install: function (Vue, options) { //1、根据组件生成构造函数 let Contructor = Vue.extend(Toast)//2、创建对应的实例对象 let taostInstance = new Contructor()//3、随便创建一个标签 let oDiv = document.createElement('div')//4、将标签添加到界面上 document.body.appendChild(oDiv)//5、将创建好的对象挂载到创建好的元素上 taostInstance.$mount(oDiv)//处理传入的参数(Toast 对象中已经添加 title, isShow 的属性) if (options){ if (options.title){ taostInstance.title = options.title } }//添加全局方法 //显示toast Vue.showToast = function(){ taostInstance.isShow = true }//隐藏toast Vue.hideToast = function(){ taostInstance.isShow = false }//添加实例方法 Vue.prototype.$toast =function(isShow){ taostInstance.isShow = isShow } } }