Vue
文章平均质量分 76
123
这个作者很懒,什么都没留下…
展开
-
Vue学习12--插槽
Vue学习12–插槽什么是插槽插槽是子组件提供给父组件使用的一个占位符,用,父组件可以在这个占位符中填充任何模板代码,如HTML,组件等,填充的内容会替换子组件中的slot标签。相当于在子组件中放置了一个占位符,父组件传递进来的html片段会被加载到这个占位符的地方。简单理解就是,在子组件内占坑,在父组件里填坑。 放在组件元素之间的html片段会被插槽占位符进行加载。插槽如何使用1、在子组件中使用插槽组件 指定插槽的名字:2、使用方:在父组件引入的子组件元素之间直接添加需要传递的html原创 2021-10-29 15:19:19 · 580 阅读 · 0 评论 -
Vue学习11--混合继承
Vue学习11–混合继承混合继承实现的效果:A有一个data属性,和一个say方法B有一个see方法和一个name属性A继承B后,A除了有自己的一个data属性,和一个say方法,还有B的一个see方法和一个name属性在C里混合AB后,C有自己的东西和A的一个data属性,和一个say方法,还有B的一个see方法和一个name属性一、继承Vue.extend方法Vue.extend( Vue ComponentOptions ) 是全局方法,使用基础 Vue 构造器,创建一个“子类”。参数原创 2021-10-29 15:15:32 · 316 阅读 · 0 评论 -
Vue学习10--父子组件通信
Vue学习10–父子组件通信父子组件是指一个A组件把另外一个B组件引入并使用,把A称为父组件,把B称为子组件。父组件向子组件传数据使用标签的属性来传递原理:props形式:父组件里: <子组件名 :属性名=“值”>子组件里:需要在js里用props属性接收父组件传递过来的属性数据子组件里每个接收的变量的属性:type:指定数据类型,(Array、Object、String、Number、Boolean)若类型不匹配也会报错:[Vue warn]: Invalid pr原创 2021-10-29 15:09:20 · 233 阅读 · 2 评论 -
Vue学习09--生命周期
Vue学习09–生命周期生命周期 – 钩子函数生命周期实际上是指虚拟dom的整个生命周期关于生命周期指一个组件从创建到销毁的整个过程划分为四个阶段:创建 --> 挂载 --> 更新 --> 销毁每一个阶段会划分为两个小阶段:xxx之前,xxx之后一二阶段创建和挂载:create、mount创建:之前 -> beforeCreate,之后 -> created挂载:之前 -> beforeMount,之后 -> mountedbef原创 2021-10-29 15:01:58 · 423 阅读 · 0 评论 -
Vue学习08--开发模式
Vue学习08–开发模式开发模式Vue有两种常见的开发模式:SPA和MPASPA:single page application 单页应用,整个应用只有一个html页面MPA:multiple page application 多页应用单页应用不用配置,Vue本身默认的就是一个单应用开发模式,直接用组件进行开发即可。如果要配置多页应用:需要在vue.config.js文件中进行页面配置,添加一个 pages 属性,它因该是一个对象,因为需要指定页面应用的名字// 这个检查机制太原创 2021-10-27 16:12:34 · 530 阅读 · 0 评论 -
Vue学习07-- Vue的组件
Vue学习07-- Vue的组件组件开发:具备一定功能得页面片段Vue的组件Vue的组件是功能高内聚、业务低耦合的一个通用的方法、模块称为组件组件是可复用的 Vue 实例,且带有一个名字,通常一个应用会以一棵嵌套的组件树的形式来组织。Vue的组件在项目中以一个有着 .vue 后缀的文件的形式存在如何定义一个组件需要给vscode安装一些vue插件:Vetur和Vue 3 Snippets一个vue组件需要三个模块html 模板(template) – 直接书写html代码,根元素原创 2021-10-27 16:04:25 · 655 阅读 · 0 评论 -
Vue学习06--虚拟节点
Vue学习06–虚拟节点虚拟节点(virtual dom)在Vue中没有真实的Dom节点,在代码中写的dom都是虚拟dom(VDom)基本原理:虚拟dom是一个普通对象,它是描述真实dom的js对象,它至少会包含tag属性(描述当前节点是一个什么元素),VNodeData属性(描述当前节点有哪些属性),VNodeChildren属性(描述当前节点有哪些子节点,特殊子节点为innerTest)虚拟dom可以使用render方法的形参createElement方法来创建得到优点:虚拟DOM原创 2021-10-27 16:03:00 · 1977 阅读 · 0 评论 -
Vue学习03
vue的开发模式SPA(single page application 单页应用–只有一个页面),它的业务多用组件(一个一个的业务模块)var vm = new Vue({ // data: function() { data() { return { list: Array(10).fill('').map((_, i) => { return {id: `ID-${i}`, name: `我的电脑0$原创 2021-10-25 11:09:26 · 84 阅读 · 0 评论 -
Vue学习02
Vue双向绑定原理在上一节里演示了如何用Vue实现数据的双向绑定,接下来要分析的是Vue双向绑定的原理Vue的v-model是基于什么实现的:由效果可知,Vue的v-model是基于inpout输入框的oninput事件来实现的。下面用oninput事件来实现一下我们看到的效果(可以将下段代码复制直接放到body标签里,运行看效果)<div> 输入姓名:<input oninput="inputEvt()" id="input" type="text"&原创 2021-10-22 19:12:22 · 65 阅读 · 0 评论 -
Vue学习01
框架模式:MVVM版本简述:vue3.x的语法和vue2.x写法差不多,可以兼容vue2,其实vue3是推荐TS来进行项目开发,它借鉴了React的函数式编程。引入vue的方式:vue资源链接:https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js方法一:直接在线引用,要求电脑必须联网<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js">原创 2021-10-22 12:49:48 · 98 阅读 · 0 评论