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

最新推荐文章于 2024-07-05 17:23:01 发布

不写博客的前端不是好前端

最新推荐文章于 2024-07-05 17:23:01 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/yfm120750310/article/details/109535513

版权

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值