关键词：
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
vue——v-for
forDemo.vue
<template >
<div>
<p>遍历数组</p>
<ul>
<li v-for="(item,index) in listArr" :key="item.id">
index - item.id - item.title
</li>
</ul>
<p>遍历对象</p>
<ul>
<li v-for="(val, key, index) in listObj" :key="key">
index - key - val
</li>
</ul>
</div>
</template>
<script>
export default
data()
return
flag:false,
listArr:[
id:'a',title:'标题1',
id:'b',title:'标题2',
id:'c',title:'标题3',
],
listObj:
name:'张三',
age:18,
sex:'男'
</script>
App.vue
<template>
<div id="app">
<forDemo/>
</div>
</template>
<script>
import forDemo from './components/baseDemo/forDemo.vue'
export default
name: 'App',
components:
forDemo
</script>
结果：
vue —— event
eventDemo.vue
<template>
<div>
<h1>事件</h1>
<ul>
<li v-for="(item,index) in arr" :key="index">
ID:item.id-------姓名:item.name
</li>
</ul>
<button @click="addFun">添加</button>
</div>
</template>
<script>
// 1.@click.stop:阻止事件
// 2.@click.prevent:阻止form重载
// 3.@click.capture:捕获html、body
// 4.@click.self:当前元素
// 5.@click.ctrl、shift、alt:键盘修饰符
export default
data()
return
arr:[
id:1,name:'张三',
id:2,name:'李四',
]
,
methods:
addFun(event)
this.arr.push(
id:`$Date.now()`,
name:'老王'
)
</script>
App.vue
<template>
<div id="app">
<eventDemo/>
</div>
</template>
<script>
import eventDemo from './components/baseDemo/eventDemo.vue'
export default
name: 'App',
components:
eventDemo
</script>
结果：
vue——表单
formDemo.vue
<template>
<div>
<h1>表单 v-model</h1>
<p>num</p>
<p>str</p>
<p><input type="text" v-model="num"></p>
<!-- lazy触发场景，失去焦点，触发change -->
<p><input type="text" v-model.lazy="num"></p>
<!-- 只能输入数字 -->
<p><input type="number" v-model.number="num"></p>
<!-- 去除收尾空格 -->
<p><input type="text" v-model.trim="str"></p>
<p><textarea v-model="area"></textarea></p>
<p>checkbox:class1</p>
<p><input type="checkbox" value="一阶段" v-model="class1">一阶段</p>
<p><input type="checkbox" value="二阶段" v-model="class1">二阶段</p>
<p><input type="checkbox" value="三阶段" v-model="class1">三阶段</p>
<p>radio:radio1</p>
<p><input type="radio" id = "1" value="男" v-model="radio1">
<label for="1">男</label>
</p>
<p><input type="radio" id = "2" value="女" v-model="radio1">
<label for="2">女</label>
</p>
<p>select:selected</p>
<p><select v-model="selected">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select></p>
</div>
</template>
<script>
export default
data()
return
num:0,
str:'',
area:'哈哈哈',
class1:[],
radio1:'',
selected:'北京'
</script>
App.vue
<template>
<div id="app">
<eventDemo/>
</div>
</template>
<script>
import formDemo from './components/baseDemo/formDemo.vue'
export default
name: 'App',
components:
formDemo
</script>
结果：
vue——父组件传递数据到子组件&&子组件传递数据到父组件&&Bus通信
parentComDemo.vue
<template>
<div>
<h1>父组件</h1>
<List :list="arr"/>
<Button @myAddFun="parentFun"/>
</div>
</template>
<script>
// 1.父 -- 子 通信，解释：就把父组件的数据传递给子组件
// 2.子 -- 父 通信，解释：子触发函数调用父组件的函数，并传递参数
import List from './list.vue'
import Button from './button.vue'
export default
components:
List,
Button
,
data()
return
arr:[
id:1,name:'a',
id:2,name:'b',
id:3,name:'c'
]
,
methods:
parentFun(val)
console.log('父组件的函数触发了：'+val)
this.arr.push(
id:`$Date.now()`,
name:'d'
)
</script>
list.vue
<template>
<div>
<p>子组件</p>
<ul>
<li v-for="(item,index) in list" :key="index">
id:item.id-----name:item.name
</li>
</ul>
</div>
</template>
<script>
import eventBus from './eventBus'
export default
props:
list:Array()
,
mounted() // 挂载，即把下面代码挂载在dom上，注意执行事件
eventBus.$on('sendNum',this.listFun)
// 总结：
// 1.addEventListener $on 添加自定义事件，切记要写销毁事件
// 2.定时器
// 3.自定义
,
destroyed()
eventBus.$off('sendNum',this.listFun)
,
methods:
listFun(val)
console.log('接收button通过事件总线传递过来的事件,val = '+val);
,
data()
return
// arr:[
// id:1,name:'a',
// id:2,name:'b',
// id:3,name:'c'
// ]
</script>
button.vue
<template>
<div>
<button @click="addFun">添加</button>
<button @click="sendFun">传递</button>
</div>
</template>
<script>
// 2.事件总线通信
import eventBus from './eventBus'
export default
methods:
addFun()
console.log('click addFun')
// 子组件，传递函数到父组件【参数可以传对象、数组】
this.$emit('myAddFun',10)
// this.$emit('myAddFun',id:100,name:'kkk')
// this.$emit('myAddFun',[1,2,3,4,5,6])
,
sendFun()
eventBus.$emit('sendNum',100)
</script>
App.vue
<template>
<div id="app">
<parentComDemo/>
</div>
</template>
<script>
import parentComDemo from './components/baseDemo/parentComDemo.vue'
export default
name: 'App',
components:
parentComDemo
</script>
结果：
vue——生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM，在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，目的是给予用户在一些特定的场景下添加他们自己代码的机会。
单个组件生命周期
挂载阶段-更新阶段-销毁阶段
1、beforeCreate
在实例初始化之后，数据观测和event/watcher时间配置之前被调用。
2、created
实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
3、beforeMount
在挂载开始之前被调用：相关的render函数首次被调用。
该钩子在服务器端渲染期间不被调用。
4、mounted
el被新创建的vm.$el替换，并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。
该钩子在服务端渲染期间不被调用。
5、beforeUpdate
数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程。
该钩子在服务端渲染期间不被调用。
6、updated
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务端渲染期间不被调用。
7、activated
keep-alive组件激活时调用。类似v-show
该钩子在服务器端渲染期间不被调用。
8、deactivated
keep-alive组件停用时调用。
该钩子在服务端渲染期间不被调用。
9、beforeDestroy 【类似于React生命周期的componentWillUnmount】
实例销毁之间调用。在这一步，实例仍然完全可用。
该钩子在服务端渲染期间不被调用。
10、destroyed
Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子在服务端渲染不会被调用。
单组件声明周期图
挂载： beforeCreate => created => beforeMount => mounted
更新： beforeUpdate => updated
销毁： beforeDestroy => destroyed
created和mounted有什么区别？
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID); 通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。
父子组件生命周期
index组件-input组件-list组件
父子组件生命周期图
挂载： parent beforeCreate => parent created => parent beforeMount => child beforeCreate => child created => child beforeMount => child mounted => parent mounted
更新： parent beforeUpdate => child beforeUpdate => child updated => parent updated
销毁： parent beforeDestroy => child beforeDestroy => child destroyed => parent destroyed
从以上能够看出：
挂载时，子组件是在父组件before mount后开始挂载，并且子组件先mounted，父组件随后
更新时，子组件是在父组件before update后开始更新，子组件先于父组件更新
销毁时，子组件是在父组件before destroy后开始销毁，并且是子组件先销毁，父组件随后。
mountedDemo.vue
<template>
<div>
num
<button @click="updateFun">修改</button>
</div>
</template>
<script>
export default
data()
return
num:100
,
methods:
updateFun()
this.num = 200
,
beforeCreate()
console.log("创建前");
,
created()
console.log("创建后");
// 创建后，数据观测，event 没有挂载
,
beforeMount()
console.log("挂载之前");
,
mounted()
console.log("挂载后");
// ajax最好放在mounted中，可以保证dom已经渲染，再更新数据
,
beforeUpdate()
console.log("更新前");
,
updated()
console.log("更新后");
,
beforeDestroy()
console.log("销毁前");
,
destroy()
console.log("销毁后");
</script>
App.vue
<template>
<div id="app">
<mountedDemo/>
</div>
</template>
<script>
import mountedDemo from './components/baseDemo/mountedDemo.vue'
export default
name: 'App',
components:
mountedDemo
</script>
结果：
更多文章
vue从入门到放弃（四）
vue从入门到放弃（二）
vue从入门到放弃（一）
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
vue从入门到放弃(代码片段)
----------------------------------------------------点击这里《专栏目录》查看更多--------------------------------------------------------------------------------------------------------点击这里《专栏目录》查看更多---------------- 查看详情
vue从入门到放弃(代码片段)
vue2.0创建项目命令：(base)goldwater@hujinshuivue%cnpminstall-gvue-cli(base)goldwater@hujinshuivue%vueinitwebpackvue2.0-demo?Projectnamevue2.0-demo#项目名称?ProjectdescriptionAVue.jsproject#项目描述?Au 查看详情
vue从入门到放弃(代码片段)
vue——filter过滤器filterDemo.vue<template><div><h1>过滤器</h1>message|lower</div></template><script>exportdefaultdata()returnmessage:'HelloWorld',fi 查看详情
vue从入门到放弃(代码片段)
vue——filter过滤器filterDemo.vue<template><div><h1>过滤器</h1>message|lower</div></template><script>exportdefaultdata()returnmessage:'HelloWorld',filters:low 查看详情
vue从入门到放弃(代码片段)
插值表达式templateDemo.vue<template><div>HelloWorld!!!<h1>插值表达式</h1>msgnamesex=='1'?'男':'女'<h1>指令</h1><!--尽量少用，会解析内 查看详情
vue从入门到放弃(代码片段)
vue——v-forforDemo.vue<template><div><p>遍历数组</p><ul><liv-for="(item,index)inlistArr":key="item.id">index-item.id-item.title</l 查看详情
vue从入门到放弃(代码片段)
插值表达式templateDemo.vue<template><div>HelloWorld!!!<h1>插值表达式</h1>msgnamesex=='1'?'男':'女'<h1>指令</h1><!--尽量少用，会解析内容，会导致 查看详情
vue从入门到放弃(代码片段)
今日学习内容：1.vuex的介绍2.vuex的结构和组成3.vuex的安装命令4.vuex的state、getters、mutations、actions的使用5.modules模块化和命名空间的使用vuex的介绍**VueX是一个专门为Vue.js应用设计的状态管理架构，统一管理和维护各个vue组... 查看详情
vue从入门到放弃(代码片段)
今日学习内容：1.vuex的介绍2.vuex的结构和组成3.vuex的安装命令4.vuex的state、getters、mutations、actions的使用5.modules模块化和命名空间的使用vuex的介绍**VueX是一个专门为Vue.js应用设计的状态管理架构，统一管理和维护各个vue组... 查看详情
vue-cli从入门到放弃(代码片段)
一:vue是单文件组件导:之前注册组件有什么缺点?1-?缺乏语法高亮2-格式不好整体3-没有专门的写css代码等等参考:vue=>工具=>单文件组件什么是单文件组件?后缀为.vue的文件单文件组件的三个组成部分(代码块:scaffold自动提示)templ... 查看详情
vue从入门到放弃(代码片段)
vue介绍Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整... 查看详情
初识pytorch：从安装到入门，从入门到放弃(代码片段)
目录PyTorch安装配置安装验证PyTorchPyTorch是Facebook团队于2017年1月发布的一个深度学习框架，虽然晚于TensorFlow，也没有TensorFlow火，但目前已经与TensorFlow奇虎相当。而且PyTorch采用了Python语言的接口，可以说它才是Pytho... 查看详情
深度学习---从入门到放弃pytorch基础(代码片段)
深度学习—从入门到放弃(一)pytorchTensor类似于numpy的array，pandas的dataframe；在pytorch里的数据结构是tensor，即张量tensor简单操作1.Flattenandreshape###Originalz:tensor([[0,1],[2,3],[4,5],[6,7],[8,9],[10,11]])Flatte 查看详情
clickhouse从入门到放弃(代码片段)
最近公司需要使用clickhouse做数据分析，我赶紧从docker上下载一个，学习学习。学习成本不大，会mysql就行。clickhouse下载分区基本使用下载下载clickhouse包dockerpullyandex/clickhouse-clientdockerpullyandex/clickhouse-server启动clickhouse-... 查看详情
clickhouse从入门到放弃(代码片段)
最近公司需要使用clickhouse做数据分析，我赶紧从docker上下载一个，学习学习。学习成本不大，会mysql就行。clickhouse下载分区基本使用下载下载clickhouse包dockerpullyandex/clickhouse-clientdockerpullyandex/clickhouse-server启动clickhouse-... 查看详情
django从入门到放弃(代码片段)
目录基于socket手写web框架基于wsgiref定义自己的web框架数据库取数据，渲染页面三大主流框架分析http协议分析Django下载，创建项目 基于socket手写web框架py文件importsocketdefserver_run():soc=socket.socket()soc.bind((‘127.0.0.1‘,8008))soc.listen... 查看详情
go语言从入门到放弃(代码片段)
HelloWorld我们先看看一个最简单的HelloWorld代码1packagemain23import"fmt"45funcmain()6fmt.Println("Hello,World!")7这段代码可以在控制台输出"Hello,World!"下面让我们来刨析一下此段代码第一行的packagemain 定义了该程序的包名为main,main的功能同其... 查看详情
docker从入门到放弃(代码片段)
...机时候用到的docker，时间长了也忘了，准备好好梳理学习入门一波。《十分感谢大神的文章，本文基于大神的文章学习整理。》一、入门基础??Docker使 查看详情