![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue框架学习
文章平均质量分 62
程序员陈_明勇
一个热爱技术,喜欢专研技术的程序员。成功的路上并不拥挤,有没有兴趣结个伴?
展开
-
Vue框架——兄弟组件之间数据交互
兄弟组件之间数据交互兄弟组件之间数据交互需求需求实现兄弟组件之间数据交互需求需求:创建两个组件,分别是 kk-text 和 bb-text ,两个组件里都有一个属性 num, 在两个组件的字符串模板里都定义一个按钮,每当点击其中一个组件的按钮时,另一个组件的num值将会改变重点:通过事件中心进行间接的数据交互实现事件中心:① 创建事件中心var hub = new Vue();② 监听事件和销毁事件// 监听hub.$on('事件名称', 事件函数);// 销毁hub.$of原创 2021-02-24 22:24:25 · 370 阅读 · 0 评论 -
Vue框架——子组件给父组件传值
子组件给父组件传值子组件向父组件传值基本用法子组件向父组件传值(带参数)子组件向父组件传值基本用法props 传递数据原则:单向数据流要向从子组件中向父组件传值,需要进行两个步骤:① 子组件通过自定义事件向父组件传递信息Vue.component('small-item', { data: function() { return { msg: '子组件的值' } }, template: ` <div>原创 2021-02-24 21:23:27 · 273 阅读 · 2 评论 -
Vue框架——父组件给子组件传值
父组件给子组件传值基本用法组件内通过 props 接收传递过来的值Vue.component('small-item', { props: ['title', ], data: function() { return { msg: '子组件数据' } }, template: '<div>{{msg + "---" + title}}</div>',});父组件通过属性将值传递给原创 2021-02-24 20:14:58 · 330 阅读 · 0 评论 -
Vue框架——组件的基本使用
组件的基本使用全局组件的注册语法简单案例演示组件注册的注意事项局部组件注册全局组件的注册语法Vue.component(组件名称, { data: 组件数据, template: 组件模板内容, methods: 用户自定义方法})简单案例演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont原创 2021-02-24 13:42:18 · 151 阅读 · 0 评论 -
Vue框架——过滤器
过滤器过滤器的作用自定义过滤器局部过滤器过滤器的使用带参数的过滤器案例过滤器的作用格式化数据,比如将字符串格式化首字母大写,将日期格式化为指定格式等自定义过滤器使用filterAPIVue.filter('过滤器名称', function(val){ // 过滤器业务逻辑});第一个参数为过滤器的名称,第二个参数为一个函数,用来处理过滤器的业务逻辑,函数里的参数为需要处理的数据局部过滤器filters:{ '过滤器名称':function(val){ /原创 2021-02-15 14:20:26 · 541 阅读 · 4 评论 -
Vue框架——侦听器
侦听器虽然计算属性和侦听器的功能类似,数据变化就会触发某个函数。但是当需要在数据变化时执行异步或开销较大的操作时,侦听器这个方式是最有用的。侦听器的用法watch:{ elName:function(val){ }}侦听器触发的功能函数写在watch属性里,函数名与所侦听数据的名字一一对应,函数的参数为所侦听数据的值用户名验证案例<div id="app"> <div> <label for="">原创 2021-02-15 13:53:36 · 2647 阅读 · 12 评论 -
Vue框架——计算属性
计算属性计算属性为什么需要计算属性案例计算属性与方法的区别计算属性计算属性:当其依赖属性的值发生变化时,这个属性的值就会自动更新,与之相关的DOM部分也会同步更新为什么需要计算属性当表达式的计算逻辑比较复杂时,使用计算属性可以使模板内容更加简洁案例<div id="app"> <div>{{ msg }}</div> <div>{{ msg.split('').reverse().join('') }}</div>原创 2021-02-14 22:47:17 · 263 阅读 · 0 评论 -
Vue框架——自定义指令
自定义指令为什么要自定义指令自定义指令的语法规则钩子函数钩子函数的参数自定义指令的使用带参数的自定义指令的使用自定义局部指令的使用为什么要自定义指令Vue的内置指令不满足我们的需求自定义指令的语法规则使用Vue.directiveAPI去自定义指令用法——以获取焦点举例// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元原创 2021-02-14 22:13:26 · 1206 阅读 · 2 评论 -
Vue框架——表单的基本操作
表单的基本操作基于Vue的表单基本操作案例案例分析表单域修饰符基于Vue的表单基本操作案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w原创 2021-02-13 14:54:54 · 588 阅读 · 0 评论 -
Vue框架——循环结构
循环结构遍历数组v-for遍历数组<div id="app"> <div>图书列表</div> <ul> <li v-for="book in books"> {{book}} </li> <!-- 带有索引值遍历 --> <li v-for="(book, index) in books">原创 2021-02-13 03:00:49 · 381 阅读 · 2 评论 -
Vue框架——分支结构
分支结构v-ifv-else-ifv-elsev-show案例<div id="app"> <div v-if='score>=90'>成绩优秀</div> <div v-else-if='score>=80'>成绩良好</div> <div v-else-if='score>=60'>成绩合格</div> <div v-else>成绩较差<原创 2021-02-12 21:38:10 · 1392 阅读 · 10 评论 -
Vue框架——属性绑定和样式绑定
属性绑定和样式绑定属性绑定样式绑定class绑定class绑定对象用法class绑定数组用法对象绑定和数组绑定结合使用class绑定值简化操作当标签有默认的class时如何保留style绑定样式绑定之style绑定对象用法样式绑定之style绑定数组用法属性绑定使用v-bind指令<div> <a v-bind:href="url">百度</a></div>v-bind缩写形式<div> <a :href="ur原创 2021-02-12 18:22:37 · 1496 阅读 · 4 评论 -
Vue框架——事件绑定
事件绑定Vue如何处理事件事件函数的调用方式函数参数参数传递事件绑定-参数传递总结事件修饰符按键修饰符自定义按键修饰符Vue如何处理事件v-on指令用法<div><button v-on:click='number++'>按钮</button></div>v-on简写形式<div><button @click='number++'>按钮</button></div>事件函数的调用方式原创 2021-02-10 23:46:49 · 2815 阅读 · 4 评论 -
Vue框架——指令
指令什么是指令v-cloak指令的用法数据绑定指令双向数据绑定什么是指令在了解指令之前,我们先了解什么是自定义属性?在html5中,我们可以通过data-开头来设置我们需要的自定义属性(比如data-index)指令的本质就是自定义属性指令的格式:以v- 开头(比如:v-cloak)v-cloak指令的用法作用保持在元素上直到关联实例结束编译,可以用于解决插值表达式存在的“闪动”问题。原理先隐藏标签,替换好值之后再显示最终的值用法css文件[v-cl原创 2021-02-09 22:25:27 · 2546 阅读 · 4 评论 -
Vue框架的基本使用
Vue的使用步骤1.创建一个标签,用于数据的填充2.引入Vue.js库文件3.实例化Vue对象4.把Vue提供的数据填充到标签里代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-02-09 19:57:22 · 404 阅读 · 0 评论