Vue 基础精讲(一)

Vue 实例

创建一个Vue实例，并让其接管id为root的DOM的显示，通过插值表达式可以将data中的内容显示出来，通过@(v-on)给div绑定一个 handleClick 的点击事件，点击触发 methods 中的事件，船舰一个名为 item 全局组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue实例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="root">
    <div @click="handleClick">
      {{message}}
    </div>
    <item></item>    
  </div>

  <script type="text/javascript">
    Vue.component('item', {
      template: '<div>hello item</div>'
    })

    var vm = new Vue({
      el: '#root',
      data: {
        message: 'hello world'
      },
      methods: {
        handleClick: function() {
          alert("hello")
        }
      }
    })
  </script>
</body>
</html>

Vue 的生命周期函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue实例生命周期</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript">
    // 生命周期函数就是vue实例在某一个时间点会自动执行的函数
    var vm = new Vue({
      el: '#app',
      template: "<div>{{test}}</div>",
      data: {
        test: "hello world"
      },
      beforeCreate: function() { // Vue 部分初始化时会调用
        console.log("beforeCreate");
      },
      created: function() {
        console.log("created");
      },
      beforeMount: function() {
        console.log(this.$el);
        console.log("beforeMount");
      },
      mounted: function() { // Vue实例内容会被渲染到页面上
        console.log(this.$el);
        console.log("mounted");
      },
      beforeDestroy: function() { // Vue实例被销毁时执行
        console.log("beforeDestroy");
      },
      destroy: function() {
        console.log("destroy");
      },
      beforeUpdate: function() { // Vue实例数据改变时执行
        console.log("beforeUpdate");
      },
      updated: function() {
        console.log("updated");
      }
    })
  </script>
</body>
</html>

Vue 实例

猜你喜欢