Vue学习笔记(11)-Vue中的组件(2)
1.组件之间的嵌套关系：
话不多说直接上代码：
代码解析:<body> <!-- Vue模板 --> <div id="root"></div></body><script type="text/javascript"> Vue.config.productionTip = false // 创建student组件（归属于school的子组件） const student = Vue.extend({ name:'student', template : ` <div> <h2>学生姓名:{{name}}</h2> <h2>学生年龄:{{age}}</h2> ...
Vue学习笔记(10)-Vue中的组件(1)
Vue中的组件1.什么是组件?
组件的理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)
下面用两张图片来对比传统编码和组件编码
2.Vue中组件分为非单文件组件和单文件组件
1.非单文件组件(一般不常用)：
1.模板编写没有提示
2.没有构建过程, 无法将ES6 转换成ES5
3.不支持组件的CSS
4.真正开发中几乎不用
2.单文件组件：
1. 模板页面
<template> 页面模板</template>
2. JS 模块对象
<script> export default { data() {return {}}, methods: {}, computed: {}, components: {}}</script>
3. 样式
<style> 样式定义</style>
3.V ...
Vue学习笔记(9)-Vue中的生命周期
Vue中的生命周期
什么是生命周期?
这里我们用一个类比来引出生命周期:
1.类比如下:
1. 人的一生(生命周期)
时期
做的事情
婴儿将要出生
做好接生准备
婴儿出生了(重要时刻)
做身体检测,打疫苗,摆满月酒
婴儿会说话了
叫爸爸,叫妈妈,会用语言沟通
婴儿会走路了
可以进行自主的移动,可以去玩耍了
………
…….
………
…….
将要死亡了(重要时刻)
男
已经死亡了
生命周期结束
由此可见,一般来讲生命周期这个概念就是相当于在什么时期,做什么事(特定的时期做特定的事)
2. Vue的生命周期(就相当于vm的一生,在特定的时候调用特定的函数)
运行时期
要运行的函数
将要创建
调用beforeCreate()函数
创建完毕
调用created()函数
将要挂载
调用beforeMount()函数
挂载完毕(重要时刻)
调用mounted()函数 ====> [重要的钩子函数]
将要更新
调用beforeUpdate()函数
更新完毕
调用updated() ...
Vue学习笔记(8)-Vue中的内置指令和自定义指令
1.Vue中的内置指令
我们之前学过的指令：
v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）
v-show : 条件渲染 (动态控制节点是否展示)
Vue中另外的内置指令:
v-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，则不会
v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，则不会。
(2).v-html可以识别html结构
3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上
v-cl ...
Vue学习笔记(7)-Vue中表单数据的收集与过滤器
1.Vue中表单数据的收集
若：<input type=”text”/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type=”radio”/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type=”checkbox”/>
没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
代码解析:<div id="root"> <!-- .prevent阻止默认事件 - ...
Vue学习笔记(6)-数据监测的原理(2):Vue中数据监测的原理
Vue中数据监测的原理
1. vue会监视data中所有层次的数据
2. 如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)
3. 如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
代码 ...
Vue学习笔记(5)-前置知识复习Object.keys()和数组的常用方法
1.复习知识：Object.keys（）的详解和用法Object.keys(obj)
参数：要返回其枚举自身属性的对象
返回值：一个表示给定对象的所有可枚举属性的字符串数组
其实就是在里面传进一个对象，返回一个数组（数组里面是对象的键名（属性名））
代码解析://处理对象，返回可枚举的属性数组let person = {name:"马保国",age:25,address:"江门",getName:function(){}}Object.keys(person) // ["name", "age", "address","getName"]//处理数组，返回索引值数组let arr = [1,2,3,4,5,6]Object.keys(arr) // ["0", "1", "2", "3", "4", "5"] ...
Vue学习笔记(4)-条件渲染,列表渲染,key的作用与原理
1.条件渲染1).v-if
写法：(非常暴力,会直接移除元素标签)
(1).v-if=”表达式”
(2).v-else-if=”表达式”
(3).v-else=”表达式”
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
2).v-show(他不会暴力的去动DOM树,只会做一些样式上的隐藏)
写法：v-show=”表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3).备注：使用v-if的时，元素可能无法获取到(因为使用v-if会直接删除目标元素标签)，而使用v-show一定可以获取到。代码如下:<body> <!-- 准备好一个容器--> <div id="root"> <h2>当前的n值是:{{n}}</h2> <bu ...
Vue学习笔记(3)-计算属性,监听属性以及绑定样式
1.计算属性-computed
所谓的计算属性,就是拿着你Vue中原有的属性（data里面的）去加工,计算,生成的全新的属性。
定义：要用的属性不存在，要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。(在开发者工具(Vue)当中可以直接观察到)
备注：
(1).计算属性最终会出现在vm上，直接读取使用即可。
(2).如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
代码例子: <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 // 创建Vue实例 const vm = ...
魔改butterfly(8)-给博客的弹出添加特效
添加 wowjs特效
参考:wowjs 特效
使用流程:
首先安装插件:npm install hexo-butterfly-wowjs --save
添加配置项# wowjs# see https://www.npmjs.com/package/hexo-butterfly-wowjswowjs: enable: true #控制动画开关。true是打开，false是关闭 priority: 10 #过滤器优先级 mobile: false #移动端是否启用，默认移动端禁用 animateitem: - class: recent-post-item #必填项，需要添加动画的元素的class style: animate__zoomIn #必填项，需要添加的动画 duration: 1.5s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。 delay: 200ms #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。 offset: 30 #选填项，开始动画的距离（相对浏览器底 ...
