Vue.js简单进阶

一、组件（重点）

• 组件（Component）是 Vue.js 最强大的功能之一。

• 组件可以扩展 HTML 元素，封装可重用的代码。

• 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
  

• 1、局部组件

  <div id="app">
          <Navbar></Navbar>
  </div>
  <script src="js/vue.min.js"></script>
  <script src="js/jquery-1.7.2.min.js"></script>
  <script>
      var app = new Vue({
          el: '#app',
          components: {
              //组件的名字
              'Navbar': {
                  //组件的内容
                  template: '<ul><li>首页</li><li>学生管理</li></ul>'
              }
          }
      })
  </script>
  

• 2、全局组件

  • 定义全局组件Navbar.js

    Vue.component('Navbar', {
        template: '<ul><li>首页</li><li>学生管理</li><li>教师管理</li></ul>'
    })
    

  • 调用全局组件

    <div id="app">
            <Navbar></Navbar>
    </div>
    <script src="js/vue.min.js"></script>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="components/Navbar.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
        })
    </script>
    

二、自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

• 1、局部指令

  <div id="app">
          <input v-focus>
  </div>
  <script src="js/vue.min.js"></script>
  <script src="js/jquery-1.7.2.min.js"></script>
  <script>
      var app = new Vue({
          el: '#app',
          // 局部指令的定义
          directives: {
              // 定义一个局部自定义指令 `v-focus`
              focus: {
                  // 当被绑定的元素插入到 DOM 中时……
                  inserted(input) {
                      // 聚焦元素
                      input.focus()
                  }
              }
          }
      })
  </script>
  

• 2、全局指令
  • 注册一个全局自定义指令 v-focus

  // 注册一个全局自定义指令 `v-focus`
  Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted (el) {
          // 聚焦元素
          el.focus()
      }
  })
  

  <div id="app">
          <input v-focus>
  </div>
  <script src="js/vue.min.js"></script>
  <script src="js/v-focus.js"></script>
  <script>
      var app = new Vue({
          el: '#app',
      })
  </script>
  

三、实例生命周期

•  <div id="app">
       <button @click="update">update</button>
       <h1 id="h1">{{ message }}</h1>
   </div>
   <script src="js/vue.min.js"></script>
   <script src="js/jquery-1.7.2.min.js"></script>
   <script>
       var app = new Vue({
           el: '#app',
           data: {
               message: '床前明月光'
           },
           methods: {
               show() {
                   console.log('执行show方法')
               },
               update() {
                   this.message = '疑是地上霜'
               }
           },
           //初始化四个钩子方法
           beforeCreate () {//第一个钩子方法，属性、方法都没有初始化
               console.log('beforeCreate---------------')
               //console.log(this.message)
               //this.show()
           },
           created () {//第二个钩子方法，属性、方法都已经初始化
               console.log('created---------------')
               console.log(this.message)
               this.show()
           },
           beforeMount () {//第三个钩子方法，内存视图模板已经准备好，还未渲染页面
               console.log('beforeMount---------------')
               console.log(`视图模板：${this.message}`)
               let text  = document.getElementById('h1').innerText
               console.log(`页面：${text}`)
   
           },
           mounted () {//第四个钩子方法，内存视图模板已经准备好，已经渲染页面
               console.log('mounted---------------')
               console.log(`视图模板：${this.message}`)
               let text  = document.getElementById('h1').innerText
               console.log(`页面：${text}`)
           },
          //更新两个钩子方法
           beforeUpdate () {//第一个钩子方法，内存视图模板已经更新，页面未更新
               console.log('beforeUpdate---------------')
               console.log(`视图模板：${this.message}`)
               let text  = document.getElementById('h1').innerText
               console.log(`页面：${text}`)
           },
           updated () {//第二个钩子方法，内存视图模板已经更新，页面也已更新
               console.log('updated---------------')
               console.log(`视图模板：${this.message}`)
               let text  = document.getElementById('h1').innerText
               console.log(`页面：${text}`)
           }
       })
   </script>