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 ...
随机推荐
- 019_删除链表的倒数第N个节点
//使用两次遍历 ListNode* removeNthFromEnd(ListNode* head, int n) { if (!head->next) return NULL; ; List ...
- 近期Python学习笔记
近期Python 学习笔记--一篇文入门python 作者:Pleiades_Antares(www.cnblogs.com/irischen) 写在前面的话 想学Python已经许久,一年多以前(应 ...
- 18年10月份最新免费申请微软OneDrive5TB云盘超详细教程!(已亲测!)
本人已于今天10月23日亲测,成功获取微软OneDrive5T云盘! 第一步:.打开申请链接学生版:https://signup.microsoft.com/signup?sku=student教师版 ...
- Mac轻量级服务器http-server
刚想跑个Vue页面,发现我本地没有应用服务器(Tomcat/IIS...) 于是想下载了Tomcat,才发现我没有装JDK,而Mac的JDK下得好久,都下不下来,想想算了. 于是在网上找个轻量级的服务 ...
- SecureCRT 使用 rz命令提示waiting to receive.**B0100000023be50
SecureCRT 远程连接Linux服务器,使用 rz命令提示waiting to receive.**B0100000023be50,或者使用sz命令提示: **B0100000023be50 解 ...
- BAT美团滴滴java面试大纲(带答案版)之四:多线程Lock
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 这是多线程的第二篇. 多线程就像武学中对的吸星大法,理解透了用好了可以得道成仙,俯瞰芸 ...
- P1897 电梯里的爱情
简单模拟: 没什么好说的,因为范围比较水,所以直接按题意直接模拟1就好 #include<iostream> using namespace std; #define ll long lo ...
- 【转】svn冲突问题详解 SVN版本冲突解决详解
(摘自西西软件园,原文链接http://www.cr173.com/html/46224_1.html) 解决版本冲突的命令.在冲突解决之后,需要使用svnresolved来告诉subversion冲 ...
- day15--认识模块、导入模块、自执行与模块的区别
一.认识模块 什么是模块? 模块本质是一些功能的集合体 创建的一个py文件就是一个模块 使用模块: 在使用模块的py文件中 通过 import 或者 from import导入模块 模块的优点: 可 ...
- tomcat目录结构以及项目部署
摘要:tomcat的目录结构 tomcat是一个轻量级的免费开源的web服务器,使用非常方便,也是最普遍的一款优秀服务器. 一.tomcat目录结构 1.官方下载 http://tomcat.apa ...