![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue学习笔记记录
学会改变Lxw
编程是一门技术,更加是一门艺术
当能力撑不起我想要的明天,只有好好努力才可以~~~
展开
-
项目使用中vue知识点整理
@符号代表的是vue项目的src目录 import HelloWorld from '@/components/HelloWorld'vue组件的template对外只能暴露一个标签,所以最外层得用一个div进程包裹写移动端访问页面的时候,需要做一些初始配置不允许手指放大需要在index.html页面的meta标签进行补充<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-sc.原创 2020-07-06 13:02:04 · 544 阅读 · 0 评论 -
动态组件和v-once指令
可以通过component标签对组件进行动态加载通过is属性来确认加载哪个属性动态加载的组件最好加上v-once,因为component在进行组件切换显示的时候会销毁组件,而组件加上v-once属性之后,不显示的组件会加载在内存里面,提高显示的性能示例代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态组件和v-onc.原创 2020-07-03 10:29:25 · 195 阅读 · 0 评论 -
在Vue中使用插槽
作用主要是为了让父组件向子组件优雅的传递dom结构使用方式通过子组件中的slot标签显示在子组件中添加的dom元素示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue中的插槽(slot)</title> <script src="./vue.js"></script></h原创 2020-07-03 09:44:03 · 264 阅读 · 0 评论 -
非父子组件之间传值
通过总线机制完成相应的功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>非父子组件之前传值</title> <script src="./vue.js"></script></head><body> <div id="app">原创 2020-07-03 09:24:44 · 170 阅读 · 0 评论 -
组件参数校验与非props特性
组件参数校验Vue.component('child', { props:{ content:{ type:String, required:true, default:'default value', validator: function(value){ return (value.length>5) }原创 2020-07-02 16:34:14 · 145 阅读 · 0 评论 -
组件使用的细节点
使用is标签解决模板出现bug的问题有时候一些特定标签的子标签,用自定义的组件无法识别,必须通过is标签来解决这样的问题举例如tbody标签下面必须用tr标签,指定自定义的组件row为tr就可以解决这样的问题:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue中的条件渲染</title> <script原创 2020-07-02 16:00:37 · 169 阅读 · 0 评论 -
Vue中的条件渲染
v-if和v-show标签使用的区别标签v-if和v-show都能控制一个模板标签是否显示出来两者的区别就是:V-if标签只要对应的值是false,就不会存在于dom节点之上,v-show这个标签,一旦对应的值为false,它对应的dom依然存在,只不过是以display:none的形式存在于dom之上v-if的高级用法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-07-02 15:26:56 · 138 阅读 · 0 评论 -
Vue中的样式绑定
方法一:class的对象绑定通过修改某个div的class那么来实现css的绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue中的样式绑定</title> <script src="./vue.js"></script> <style> .activ原创 2020-07-02 15:00:32 · 136 阅读 · 0 评论 -
计算属性的setter和getter
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性、方法和侦听器</title> <script src="./vue.js"></script></head><body> <div id="root"> {{fullName原创 2020-07-02 14:35:52 · 313 阅读 · 0 评论 -
计算属性、方法和侦听器
计算属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性、方法和侦听器</title> <script src="./vue.js"></script></head><body> <div id="root"> {{ful原创 2020-07-02 14:12:16 · 194 阅读 · 0 评论 -
Vue实例介绍
下面就是一个简单的实例,通过在script里面new出来一个Vue对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue实例</title> <script src="./vue.js"></script></head><body> <div id=原创 2020-07-02 13:32:02 · 134 阅读 · 0 评论 -
vue之简单的组件间传值
以删除todolist的组件里面的item来做相应的传值主要的思想就是通过子组件发出信号通知父组件,父组件再对数据进行相应的操作组件中定义index属性用来作为item的索引因为组件是没有数据的,所以得通过绑定方法,然后发送消息给父组件,让父去删除对应的数据具体代码实现如下,实现的具体功能就是点击todolist的item,然后会对item进行删除<!DOCTYPE html><html lang="en"><head> <meta ch原创 2020-07-02 13:12:01 · 136 阅读 · 0 评论 -
vue组件化思想修改todolist
全局组件实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>TodoList</title> <script src="./vue.js"></script></head><body> <div id="app"> <in原创 2020-07-02 11:13:39 · 169 阅读 · 0 评论 -
Vue.js实现TodoList
通过Vue实现数据的双向绑定<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>TodoList</title> <script src="./vue.js"></script> </head> <body> &l原创 2020-07-02 10:51:28 · 266 阅读 · 0 评论