【黑马程序员】vue学习笔记（未完）

vue官方文档：https://cn.vuejs.org/v2/guide/
github地址：https://github.com/feddiyao/vue-base-framework.git
Vue的核心是帮我减少不必要的DOM操作，提高渲染效率
Vue同时提供双向绑定的功能，通过提供的指令，我们只需要刷新数据，不再需要去管更新DOM的操作了
mvc与mvvm关系图：

mvvm的进一步解析
浏览器的network-slow 3g可以调慢网速，这是用户可能会看到页面上原先设置的属性调用，我们可以通过v-cloak来解决差值表达式的闪烁问题，可以设定

[v-cloak]:{display:none;
}

v-text和差值表达式的区别：v-text没有差值表达式的闪烁问题，差值表达式只会替换自己的内容但是v-text会覆盖元素中所有的内容。
v-bind是vue中提供的用于绑定属性的指令
v-bind中可以写合法的js表达式
简写v-bind可以直接用:代替
vue中提供了v-on:事件绑定机制
事件修饰符：
.stop阻止冒泡
.prenvent 阻止默认事件
.capture阻止默认事件
.self只当该事件在该元素本身（比如不是子元素）触发时出发回调，只阻止自己冒泡行为的触发，不阻止别人的行为
.once 事件只触发一次
事件修饰符可以串联。
v-model是唯一的双向数据绑定指令
类的绑定类名要用字符串，多个类名可以包含在一个数组中：:class="['first-class', 'second-class']我们也可以使用三元表达式：:class="['first-class', 'second-class', flag ? 'third-class' : '' ]三元表达式可以表示成对象的形式：:class="['first-class', 'second-class', 'third-class' : flag]那么在class中我们可以使用一个对象，提高代码的可读性：:class="{first-class:flag1, second-class :flag2, third-class : flag3}"这个Obj又可以抽离出来：:class="classObj"
v-if每次都会重新删除或创建元素，v-show每次不会重新进行DOM的创建和删除，只是切换了元素的 display:none样式，所以如果元素涉及到频繁切换，最好使用v-show，如果元素永远不会显示出来被用户看到，推荐使用v-if
数组的.some():返回一个Boolean，判断是否有元素符合func条件，如果return为true则立刻终止数组的后续循环
善于使用ES6的filter和includes方法，过滤器的定义语法：Vue.filter('过滤器名称', function(){})
字符串填充方法String.padstart()头部填充String.padend()尾部填充
监听键盘回车事件@key.enter
vue中所有的指令在调用的时候都以v-开头,Vue.directive(‘指令名称’, {bind, inserted, updated})可以用来定义全局的指令，指令名称不需要加v-前缀。
vue当我们在bind和update中触发行为时。可以简写：

Vue.directive('color-swatch', function (el, binding) {el.style.backgroundColor = binding.value
})

Vue 生命周期
在beforeCreate生命周期函数执行的时候，data和methods中的数据和方法都还未被初始化
在created中，methods和data都已经被初始化好了，如果要调用methods中的方法或者操作data中的数据，最早只能在created中进行
beforeMount 模板已经编译在了内存中，但是尚未把模板渲染到页面中，beforeMount执行的时候，页面中的元素还没有被完全替换过来，只是之前写的模板字符串。
mounted 内存中的模板已经挂载到了页面中，用户可以看到渲染好的页面。
beforeUpdate的时候页面上的数据还是旧的，此时data数据时最新的，页面尚未和最新的数据保持同步
updated执行的时候页面和数据已经保持同步了
beforeDestroy 已经从运行阶段进入到了销毁阶段，实例身上所有的数据、函数和过滤器都处于可用过程
destroyed 当执行到destroyed的时候，组件已经被完全销毁了，组件上所有的数据、函数和过滤器都是处于不可用的状态
nser快速创建node服务器
jsonp实现形式
客户端：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{var html = '<ul>';for(var i = 0; i < result.length; i++){html += '<li>' + result[i] + '</li>';}html += '</ul>';document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>

服务端：

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

Vue.http.options可以用来定义全局的http属性
Vue中的动画有自己的生命周期函数
el-offsetWidth会强制动画刷新
动画里的done()，调用的就是afterEnter()函数
渲染list的动画效果，list的每一项要加一个key属性，再用将整个list包裹起来。
Vue组件化
Vue.extend拿到一个模板对象，再用Vue.component将组件注册为全局对象，注意Vue.component命名的时候大写的驼峰需要改为小写的字母，两个单词之间用 - 进行连接
Vue.component直接将对象字面量转换为组件形式
将模板单独抽离出来放到template元素当中去
组件可以有自己的data数据，组件的data和实例的data不一样，组件中的data必须为一个方法，这个方法内部必须返回一个对象才可以
动画可以设置mode可以设置组件动画切换的模式
路由中的linkActiveClass可以配自己的激活类
计算属性有return值，watch属性没有return值

【黑马程序员】vue学习笔记（未完）相关推荐

黑马程序员VUE学习笔记-小黑记事本案例
自己写的样式,有很多不足,敬请见谅和指正.功能还是正常的. CSS部分 * {padding: 0;margin: 0; }#todoapp {width: 300px;margin: 5px aut ...
黑马程序员Maven学习笔记
前言这里是黑马程序员Maven学习笔记分享,这是视频链接. 我还有其它前端内容的笔记,有需要可以查看. 文章目录前言基础 Maven简介 Maven是什么 Maven的作用 Maven的下载 M ...
黑马程序员Javaweb学习笔记01
该博客主要记录在学习黑马程序员Javaweb过程的一些笔记,方便复习以及加强记忆文章目录一 . BS架构,HTTP协议 http请求数据格式和相应数据格式二 . web服务器 2.1 tomca ...
黑马程序员C++学习笔记＜第一阶段_基础篇＞
配套视频网址: 黑马程序员:http://yun.itheima.com/course/520.html?bili B站:https://www.bilibili.com/video/BV1et411 ...
黑马程序员C++学习笔记（第三阶段核心：STL）--- 更新中
目录迭代器序列式容器 vector -- 可随机访问 list -- 不支持随机访问 deque -- 动态关联式容器 -- 红黑树 map multimap set multiset -- 废 ...
黑马程序员Javaweb学习笔记02【request和response】
该博客主要记录在学习黑马程序员Javaweb过程的一些笔记,方便复习以及加强记忆
黑马程序员SSM-MyBatisPlus学习笔记
目录一.MyBatisPlus简介 1.1 SpringBoot整合MyBatisPlus入门程序 1.2 MyBatisPlus概述二.标准数据层开发 2.1 标准数据层CRUD功能 2.2 分 ...
黑马程序员-C#学习笔记（二）
---------------------- ASP.Net+Android+IOS开发..Net培训.期待与您交流! ---------------------- - C# 学习笔记一.变量与表达 ...
黑马程序员C++学习笔记
C++基础入门 1 C++初识 1.1 第一个C++程序 1.1.1 创建项目 1.1.2 创建文件 1.1.3 编写代码 1.1.4 运行程序 1.2 注释 1.3 变量 1.4 常量 1.5 关键 ...
“黑马程序员”视频学习笔记之面向对象基础及调试问题
------- Windows Phone 7手机开发. .Net培训.期待与您交流! ------- ]方法: 语法:[访问修饰符][static] 返回值类型方法名() ...

【黑马程序员】vue学习笔记（未完）

【黑马程序员】vue学习笔记（未完）相关推荐

最新文章

热门文章