vue从入门到放弃

Posted 胡金水

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue从入门到放弃相关的知识,希望对你有一定的参考价值。

----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------

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从入门到放弃

vue从入门到放弃

vue从入门到放弃

vue从入门到放弃

vue从入门到放弃

转-Vue.js2.0从入门到放弃---入门实例