vue学习的笔记补充
// vue-router中可以使用 routes:[
{
path:'/',
name:'index',
component:()=>import('./index')
}
]
// 这种写法可以让componet 后面跟一个匿名函数里面跟着组件的路径。
// v-cloak 防止表达式闪烁
// v-pre 不编译这个标签
// immediate:true 在使用handler 函数时 可以在初始化时进行监听.
watch:{
$route:{
handler:function(newVal,oldVal){
// 监听新数据
// 监听旧数据
},
immediate:true, //监听初始化的数据
deep:true //深度监听数据 }
}
// 凡是实例上的东西都可以进行监听
// 权限路由
// 路由组件传值
{
path:'/',
name:'list',
component:List,
props:true
// 子组件在接收值时. 在props里直接直接写传值的数据名字.
} // 计算属性也拥有getters 和setters 默认写的是getter,设置setter
// 执行可以当此计算属性数据更改的时候去做其他的一些事情.相当于watch这个计算属性 computed:{
xm:{
get:function(){ //getter 当依赖改变后设置值的时候
return this.xing+'.'+this.ming
},
set:function(val){ //setter 当自身改变后执行
this.xing = val.split('.')[],
this.ming = val.split('.'.[])
}
}
}
// 过滤器
// vue 中可以设置filter(过滤器)来实现数据格式化,双花括号插值和v-bind表达式中使用
// 调用过滤器 {{msg|money}} {{msg|money|money}} 可以有多个过滤器进行过滤 Vue.filter('money',(value)=>{
return '$'+value;
})
// mixin 便于混合 后期维护时候进行操作 let obj = {
data:{ //混合到data中 也可以混合到methods或者created等等所有vue的实例拥有的方法
xs:'',
xq:'bk'
}
}
let vm = new Vue({
el:'#box',
mixins:[obj],
data:{
msg:'hello',
x:'s'
}
}) // 虚拟dom的核心思想:对复杂的文档DOM结构,提供一种方便的工具,进行最小化的DOM操作
// 这句话,也许过于抽象,却基于概况了虚拟DOM的设计思想
// 1,提供了一种方便的工具,使得开发效率得到了保证
// 2,保证最小化的DOM操作,使得执行效率得到保证
// 也就是说,虚拟DOM的框架/工具都是这么做的:
// 1:根据现有的真实的dom来生成一个完整的虚拟DOM树结构
// 2:当数据变化,或者说页面需要重新渲染时候,会重新生成一个新的完整的虚拟DOM
// 3:拿新的虚拟dom来和旧的虚拟DOM做对比(使用diff算法),.得到需要更新的地方之后,更新内容 // 组件化开发:
// 优点:代码复用,便于维护
// 划分组件的原则:具有大量的布局结构的,或者是独立的逻辑的,都应该分成组件.
// 组件应该拥有的特性:可组合,可重用,可测试,可维护 // 组件可以用script的标签来书写比如: <script type="text/x-template" id="myComponent">//注意 type 和id。
<div>This is a component!</div>
</script>
Vue.component('my-component',{
template: '#myComponent'
}) //我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求,Vue 会发出警告。这对于开发给他人使用的组件非常有用 // 验证主要分为:类型验证、必传验证、默认值设置、自定义验证
props:{
// 类型验证:
str:String, //str:[String,Number] 也可以是多种类型
num:{
type:Number,
required:true //必填项
},
//默认数据
bool:{
type:Boolean,
// default:true,
default:function(){
return true
}
},
// 自定义类型
nums:{
type:Number,
validator:function(value){
return value % ==;
}
} }
// slot 匿名插槽 具名插槽 作用域插槽 // 匿名插槽
<com><h1></h1></com>
// 为了让h1显示出来
let com = {
template:'<div>111<slot></slot></div>'
}
// 具名插槽 根据名字来匹配
<com><h1 slot='right'></h1></com>
let com = {
template:'<div>www<slot name="right"></slot></div>'
}
// 组件传参可以使用props 路由 非父子组件可以使用props 路由 还有空组件也可以传参
// 从A组件传给B组件
// A组件内容
<template>
<div>
AAA <button @click='send'>send</button>
</div>
</template>
<script>
import bus from "空组件路径"
export default{
methods:{
send(){
bus.$emit('msg','hahaha');
}
}
}
</script>
// 在空组件种传参 空组件内容:
import Vue from 'vue';
export default new Vue(); // B组件
import bus from "空组件路径"
export default {
created() {
bus.$on("msg",(data)=>{
console.log(data);
})
}
} // 命名路由
// router-link 写在本页面
<router-link to="/">点我显示多个组件</router-link>
routes:[
{
path:'/',
components:{
default:One //One组件
right:Two //组件
}
}
]
// router-view 显示本页面的路由 显示当前组件的子组件 如果是默认路由的话 直接写router-view 显示当前的组件
<router-view></router-view>
<router-view name="right"></router-view>
// right是要显示组件的名字
vue学习的笔记补充的更多相关文章
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记之:为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- STM32 FSMC学习笔记+补充(LCD的FSMC配置)
STM32 FSMC学习笔记+补充(LCD的FSMC配置) STM32 FSMC学习笔记 STM32 FSMC的用法--LCD
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
随机推荐
- DBUtils温习1
1.简介 Commons DBUtIls是Apache组织提供的一个开源JDBC工具类库,它是对JDBC的简单封装,学习成本极低,但是使用DBUtils却极大的简化了dao层的开发,少些了很多的jdb ...
- formbuild拖拽表单设计器
formbuild拖拽表单设计器 表单设计器适用于OA系统.问卷调查系统.考试系统等系统,具体使用请前至官网API请点击 formbuild拖拽表单设计器 formbuild迭代几个功 ...
- 【消息队列】RabbitMQ+PHP实现
本文链接:http://www.cnblogs.com/aiweixiao/p/7374249.html 文档提纲: 扫描关注微信公众号 1.[下载和安装] 1)gitHub下载地址: https:/ ...
- Contest Setting 2018 ICPC Pacific Northwest Regional Contest dp
题目:https://vj.69fa.cn/12703be72f729288b4cced17e2501850?v=1552995458 dp这个题目网上说是dp+离散化这个题目要对这些数字先处理然后进 ...
- 「APIO2017」商旅
「APIO2017」商旅 题目描述 在广阔的澳大利亚内陆地区长途跋涉后,你孤身一人带着一个背包来到了科巴.你被这个城市发达而美丽的市场所深深吸引,决定定居于此,做一个商人.科巴有 \(N\) 个集市, ...
- P2819 图的m着色问题(DFS)
思路:最开始的回溯顺序是正常的图遍历的回溯顺序,其实也没有错.但是,因为怎么调都不对,看了题解.下面,请结合题解思路和代码一起感受一下回溯顺序的改变,算法的改变和代码在哪里实现了这种顺序. 回溯顺序: ...
- 了解一下Redis队列【缓兵之计-延时队列】
https://www.cnblogs.com/wt645631686/p/8454021.html 我们平时习惯于使用 Rabbitmq 和 Kafka 作为消息队列中间件,来给应用程序之间增加 异 ...
- 【js】项目中遇到的零星知识点
1.将进行url编码的json字符串转成json对象 在解析为json对象之前,要先用decodeURIComponent(str)来进行解码,然后这json串又变成了我们原先的json串了.然后我们 ...
- ubuntu部分端口命令的使用----开启端口/开启防火墙
环境系统: ubuntu 工具:xshell + virtualbox 1.测试远程主机的端口是否开启(windows命令行下执行) telnet 192.168.1.103 80 远程访问主机的80 ...
- selenium:解决页面元素display:none的方法
在UI自动化测试中,有时候会遇到页面元素无法定位的问题,包括xpath等方法都无法定位,是因为前端元素被设置为不可见导致. 这篇博客,介绍下如何通过JavaScript修改页面元素属性来定位的方法.. ...