阿里前端Vue
具备三剑客的基础，vue是渐进式的框架。
安装：cdn
- Vue基础语法
- 组件化开发
- Vue CLI脚手架
- Vue router路由
- Vue 详解
- Vuex
- 网络封装
- 项目实战
- 项目部署
git
https://learn-anything.cn/git-github
node
https://learn-anything.cn/node-js-nvm
npm
https://cloud.tencent.com/developer/article/1906694
全局过滤器
https://cn.vuejs.org/v2/guide/filters.html
M：
<div id="app">
<p class="red" v-bind="msg | msgFormat('月亮')">
<!--过滤器调用 格式 {{ name | 过滤器的名称 }} 可以调用多个过滤器-->
<!--{{ msg | msgFormat('月亮') | headFormat}}-->
<!-- 在 `v-bind` 中 -->
</p>
</div>
VM：
<script type="text/javascript">
// 全局的过滤器，第一个参数是过滤器管道符前面传递古来的数据
Vue.filter('msgFormat', function(msg, arg) {
// 1.只匹配了第一个
// return msg.replace('太阳','月亮')
// 2.正则表达式，全局匹配
return msg.replace(/太阳/g, arg)
})
Vue.filter('headFormat', function(msg){
return '*-*-*-*-*-*-*' + msg
})
var vm = new Vue({
el: '#app',
data:{
msg:'太阳从东方升起，太阳从东方落下。'
},
methods:{
}
});
</script>
格式化时间的全局过滤器
模板字符串
${}
短路运算 &&
es6 形参的默认值
定义私有过滤器
es6 padStart方法的使用
用另一个字符串填充当前字符串。
按键修饰符
https://v3.cn.vuejs.org/guide/migration/keycode-modifiers.html
码值or自定义全局按键修饰符
代码见：私有指令部分。
指令
自定义全局指令让文本框获取焦点
焦点：一进页面，鼠标停留在文本框上
<label>
搜索名称或关键词：
<input type="text" class="from-control" v-model="keywords" id="search" v-focus v-color="'blue'">
</label>
Vue.directive('focus',{
// 指令绑定到元素上，立即执行这个bind函数，只执行一次
// 注意：在每个函数中，第一个参数，永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的Js对象
// 在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候，调用focus方法没有作用
bind:function(el){
// el.focus()
},
// 插入到DOM中去
inserted:function(el){
el.focus()
},
// 当Node更新的时候，会执行updated，可能会触发多次
updated:function(){
}
})
使用钩子函数的第二个binding参数拿到传递的值
https://cn.vuejs.org/v2/guide/custom-directive.html#钩子函数
区分value与expression！
输入的字体为蓝色
// 自定义一个设置字体颜色的指令
Vue.directive('color',{
// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
bind:function(el, binding){
el.style.color = binding.value
//console.log(binding.value)
//console.log(binding.expression)
},
inserted:function(){
},
updated:function(){
}
})
定义私有指令
<div id="app2">
<p class="red" v-fontweight = "900" v-fontsize = "30">
{{ msg | msgFormat('月亮') | headFormat}}
</p>
</div>
var vm2 = new Vue({
el: '#app2',
data:{
msg:'太阳从东方升起，太阳从东方落下。'
},
methods:{
},
// 定义一个私有的过滤器，过滤器调用的时候采用的是就近原则，私有过滤器与全局过滤器名称一致，优先调用私有过滤器
filters:{
},
// 自定义私有指令
directives:{
/*
'fontweight':{
bind:function(el, binding){
el.style.fontWeight = binding.value
}
},
*/
'fontweight' : function (el,binding) {
el.style.fontWeight = parseInt(binding.value)
},
// 指令函数的简写形式
// 注意：这个function等同于把代码写到了bind和update中去
'fontsize' : function (el,binding) {
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
});
指令函数的简写形式
见上述代码。
生命周期函数
组件创建期间的4个钩子函数
组件运行和销毁阶段的钩子函数
https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforecreate
-
beforeCreate data和methods中的数据还没有初始化。
-
created 上述初始化完毕，上述最早操作阶段。
-
beforeMount 模板已经在内存中编译好了，但是未挂载到页面中去，页面中的数据还是旧的。
-
mounted 执行后，整个Vue实例已经初始化完毕，组件进入了运行阶段。
-
beforeUpdate
-
updated updated事件执行的时候，页面和data数据已经保特同步了，参是最斯的
-
activated
-
deactivated
-
beforeUnmount
-
unmounted
-
errorCaptured
-
renderTracked
-
renderTriggered
vue-resource发起get、post、jsonp请求
下载。
// 发起post请求 application/x-www-form-urlencoded
// 手动发起的post请求，默认没有表单格式，所以，有的服务器处理不了
// 通过post方法的第三个参数，{emu1ateJSON:true}设置提交的内容类型为普通表单数据格式
// 发起JSONP请求
post请求出错
Access to XMLHttpRequest at 'http://vue.studyit.io/api/getlunbo' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
结合Node手写JSONP服务器剖析JSONP原理
node课程还没有接触过
