首页 > 代码库 > Vue.js 实例和内置组件 入门

Vue.js 实例和内置组件 入门

2024-11-03 00:45:39   204人阅读

首先来看看实例的概述：

  • 实例就是在构造器外部操作操作构造器内部的属性和方法。
  • 实例的作用就是给Vue提供与其它js及其框架结合使用的接口。

进入实例阶段：

首先来看 Vue.js 搭配 jQuery 使用：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Early Examples Demo</title>
</head>
<body>
   <h4>Early Examples Demo</h4>
   <hr>
   <div id="app">
      {{message}}
   </div>
   <script src="https://unpkg.com/vue"></script>
   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
   <script type="text/javascript">
      var app=new Vue({
         el:‘#app‘,
         data:{
            message:‘hello Vue!‘
         },
         //在Vue中使用jQuery
         mounted:function(){
            $(‘#app‘).html(‘jQuery操作DOM!‘);
         }
      })
   </script>
</body>
</html>

页面输出：jQuery操作DOM!，改变了 message 的输出。

 

$mount方法是用来挂载我们的扩展的。将扩展挂载到DOM上。

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
   <title>Early Examples Demo</title>
</head>
<body>
    <div class="container">
       <h4>Early Examples Demo</h4>
       <hr>
       <div id="app">
          {{message}}
       </div>
    </div>
   <script src="https://unpkg.com/vue"></script>
   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
   <script type="text/javascript">
      var momei = Vue.extend({
          template: `<p>{{message}}</p>`,
          data: function() {
              return {
                  message: ‘Hello Vue.extend!‘
              }
          }
      });
      var vm = new momei().$mount(‘#app‘);
   </script>
</body>
</html>

 

 

实例在构造器外部的方法调用构造器内部的数据。

$on 构造器外部添加事件。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
   <title>Examples Demo3</title>
</head>
<body>
    <div class="container">

       <h4>Examples Demo3</h4>
       <hr>
       <div id="app">
          {{num}}
          <p><button @click=‘add‘>Add</button></p>
       </div>

       <p><button onclick=‘reduce()‘>Reduce</button></p>
       <p><button onclick=‘reduceOnce()‘>reduceOnce</button></p>
       <p><button onclick=‘off()‘>Off</button></p>

    </div>
   <script src="https://unpkg.com/vue"></script>
   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
   <script type="text/javascript">
      var app = new Vue({
          el: ‘#app‘,
          data: {
              num: 1
          },
          methods: {
              add: function() {
                  this.num ++;
              }
          }
      });
      // $on 实例事件 写入
      app.$on("reduce",function() {
          console.log(‘执行了reduce 多次执行方法！‘);
          this.num --;
      })
      // $once 实例事件 写入
      app.$once("reduceOnce",function() {
          console.log(‘执行了reduceOnce  执行一次方法！‘);
          this.num --;
      })
      //$emit() 调用
      function reduce() {
          app.$emit(‘reduce‘);
      }
      //$emit() 调用
      function reduceOnce() {
          app.$emit(‘reduceOnce‘);
      }
      //$off关闭事件
      function off() {
          app.$off(‘reduce‘);
      }
   </script>
</body>
</html>

 

 

slot功能让组件接收传递过来的值，并在模板中接收显示。通过代码实例认识一下：

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />
   <title>Examples Demo4</title>
</head>
<body>
    <div class="container">

       <h4>Examples Demo4</h4>
       <hr>
       <div id="app">
           <!-- slot 传递参数 -->
          <momei>
               <span slot="bolgUrl">{{momeiData.bolgUrl}}</span>
                <span slot="netName">{{momeiData.netName}}</span>
                <span slot="skill">{{momeiData.skill}}</span>
          </momei>
       </div>
        <!-- slot 接收参数 -->
        <template id="tmp">
           <div>
              <p>博客地址：<slot name="bolgUrl"></slot></p>
              <p>网名：<slot name="netName"></slot></p>
              <p>技术类型：<slot name="skill"></slot></p>
           </div>
        </template>

    </div>
   <script src="https://unpkg.com/vue"></script>
   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
   <script type="text/javascript">
      var momei={      //定义组件
         template:‘#tmp‘
      }

      var app=new Vue({
         el:‘#app‘,
         data:{
            momeiData:{
               bolgUrl:‘http://www.cnblogs.com/momei/‘,
               netName:‘墨眉‘,
               skill:‘Web前端‘
            }
         },
         components:{   //挂载组件
            "momei":momei
         }
      })
   </script>
</body>
</html>

 

页面代码如何呈现，对页面及功能实现都很重要，这里更多的是体现没一个方法的使用。

在实践和学习中总结，完善自己对Vue.js更深层次的认识。

 

Vue.js 实例和内置组件 入门


联系
我们