- 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值