随笔分类 -  Vue.js

组件插槽
摘要：组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力 匿名插槽 ​ <div id="app"> <!-- 插槽内容--> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 slot 中的默认值 --> <alert-box>有bug发生</alert-box> 阅读全文
posted @ 2020-12-03 00:07 星辰ꦿ.大海 阅读(143) 评论(0) 推荐(0)
Vue组件之间传值
摘要：父组件向子组件传值 父组件发送的形式是以属性的形式绑定值到子组件身上。 然后子组件用属性props接收 在props中使用驼峰形式，模板中需要使用短横线的形式，字符串形式的模板中没有这个限制 <div id="app"> <div>{{pmsg}}</div> <!--1、menu-item 在 A 阅读全文
posted @ 2020-12-03 00:06 星辰ꦿ.大海 阅读(161) 评论(0) 推荐(0)
Vue 调试工具
摘要：vue-devtools 新版本安装容易出错，我下载的旧版本 https://github.com/vuejs/vue-devtools/tree/v5.1.1 下载完成后在根目录下打开命令行工具，执行以下命令： npm install npm run build 然后去浏览器上添加扩展程序 这里要 阅读全文
posted @ 2020-12-03 00:05 星辰ꦿ.大海 阅读(97) 评论(0) 推荐(0)
组件注册
摘要：全局注册 Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象 全局组件注册后，任何vue实例都可以用 组件基础用 <div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-component 阅读全文
posted @ 2020-12-03 00:02 星辰ꦿ.大海 阅读(91) 评论(0) 推荐(0)
组件化思想
摘要：现实中的组件化思想体现 编程中的组件化思想体现 组件化规范: Web Components 我们希望尽可能多的重用代码 自定义组件的方式不太容易（html、css和js） 多次使用组件可能导致冲突 Web Components 通过创建封装好功能的定制元素解决上述问题 官网：https://deve 阅读全文
posted @ 2020-12-03 00:01 星辰ꦿ.大海 阅读(131) 评论(0) 推荐(0)
图书列表案例
摘要：1.图书列表 静态列表效果 基于数据实现模板效果 处理每行的操作按钮（禁止默认行为） 1、 提供的静态数据 数据存放在vue 中 data 属性中 var vm = new Vue({ el: '#app', data: { books: [{ id: 1, name: '三国演义', date: 阅读全文
posted @ 2020-12-02 13:58 星辰ꦿ.大海 阅读(188) 评论(0) 推荐(0)
数组相关API
摘要：1.数组变异方法（修改原有数据） 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展 push()往数组最后面添加一个元素，成功返回当前数组的长度 pop() 阅读全文
posted @ 2020-12-02 13:49 星辰ꦿ.大海 阅读(106) 评论(0) 推荐(0)
Vue常用特性
摘要：1.1常用特性概览 表单操作 自定义指令 计算属性 侦听器 过滤器 生命周期 1.2表单基本操作 1.基于Vue的表单操作 Input 单行文本 textarea 多行文本 select 下拉多选 radio 单选框 checkbox 多选框 获取单选框中的值 通过v-model <!-- 1、 两 阅读全文
posted @ 2020-12-02 13:45 星辰ꦿ.大海 阅读(161) 评论(0) 推荐(0)
选项卡案例
摘要：1、 HTML 结构 ` <div id="app"> <div class="tab"> <!-- tab栏 --> <ul> <li class="active">apple</li> <li class="">orange</li> <li class="">lemon</li> </ul> 阅读全文
posted @ 2020-11-26 22:43 星辰ꦿ.大海 阅读(169) 评论(0) 推荐(0)
Vue模板语法
摘要：1.1 模板语法概述 1.如何理解前端渲染？ 把数据填充到HTML标签中 2.前端渲染方式 原生js拼接字符串 使用前端模板引擎 使用vue特有的模板语法 3.原生js拼接字符串 基本上就是将数据以字符串的方式拼接到HTML标 签中，前端代码风格大体上如下所示。 var d = data.weath 阅读全文
posted @ 2020-11-26 22:40 星辰ꦿ.大海 阅读(367) 评论(0) 推荐(0)
Vue基本使用
摘要：1 .传统开发模式对比 //原生js<div id="msg"></div><script type="text/javascript">var msg = 'Hello World';var div = document.getElementById('msg');div.innerHTML = 阅读全文
posted @ 2020-11-26 17:07 星辰ꦿ.大海 阅读(89) 评论(0) 推荐(0)
Vue概述
摘要：尤雨溪：Vue.js的创建者 2014年2月，Vue.js正式发布 2015年10月27日，正式发布1.0.0 2016年4月27日，发布2.0的预览版本 Vue 是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层，不仅易于上 阅读全文
posted @ 2020-11-26 17:06 星辰ꦿ.大海 阅读(87) 评论(0) 推荐(0)