Vue学习之路(4)------实例和内置组件_vue 内嵌 function-程序员宅基地

技术标签： Vue

转载：jspang.com

第1节：实例入门-实例属性
- Vue和Jquery.js一起使用
- 二、实例调用自定义方法
第2节：实例方法
第3节：实例事件
第4节：内置组件 -slot讲解

概述：实例就是在构造器外部操作构造器内部的属性选项或者方法，就叫做实例？实例的作用就是给原生的或者其他javascript框架一个融合的接口或者说是机会，让Vue和其他框架一起使用。

第1节：实例入门-实例属性

width="100%" src="https://v.qq.com/iframe/player.html?vid=e03918t5wy2&tiny=0&auto=0" allowfullscreen="">

Vue和Jquery.js一起使用

1、下载并引入jquery框架

下载可以去官网进行下载，我这里使用的版本是3.1.1，下载好后在需要的页面引入就可以了。当然你还有很多其它的方法引入jquery，只要可以顺利引入就可以了。


 
 
  
   
   <script < type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>

试着作一个案例，在DOM被挂载后修改里边的内容。


 
 
  
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <script type="text/javascript" src="../assets/js/vue.js"></script>
       <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
       <title>Early Examples Demo</title>
   </head>
   <body>
       <h1>Early Examples Demo</h1>
       <hr>
       <div id="app">
           {
    {message}}
       </div>
   
       <script type="text/javascript">
           var app=new Vue({
    
               el:'#app',
               data:{
    
                   message:'hello Vue!'
               },
               //在Vue中使用jQuery
               mounted:function(){
    
                   $('#app').html('我是jQuery!');
               }
           })
       </script>
   </body>
   </html>
   
  
html

现在页面显示是：我是jQuery，而不是hello Vue了。

二、实例调用自定义方法

在Vue的构造器里我们写一个add方法，然后我们用实例的方法调用它。

构造器里的add方法：


 
 
  
   methods:{
    
       add:function(){
    
           console.log("调用了Add方法");
       }
   }
  
javascript

实例调用：


 
 
  
   app.add();

PS：我们有可能把app.add()的括号忘记或省略，这时候我们得到的就是方法的字符串，但是并没有执行，所以必须要加上括号。

作业：利用console.log把app打印出来，看看里边到底包含了哪些属性和方法。因为里边的属性很多，这里只是简单的介绍。

第2节：实例方法

width="100%" src="https://v.qq.com/iframe/player.html?vid=b0391n1b72x&tiny=0&auto=0" allowfullscreen="">

一、$mount方法

$mount方法是用来挂载我们的扩展的，我们先来复习一下扩展的写法。

这里我们作了jspang的扩展，然后用$mount的方法把jspang挂载到DOM上，我们也生成了一个Vue的实例，直接看代码。


 
 
  
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <script type="text/javascript" src="../assets/js/vue.js"></script>
       <title>Examples Method Demo</title>
   </head>
   <body>
       <h1>Examples Method Demo</h1>
       <hr>
       <div id="app">
           {
    {message}}
       </div>
   
       <script type="text/javascript">
         var jspang = Vue.extend({
    
             template:`<p>{
     {message}}</p>`,
             data:function(){
    
                 return {
    
                     message:'Hello ,I am JSPang'
                 }
             }
         })
         var vm = new jspang().$mount("#app")
       </script>
   </body>
   </html>
   
  
html

这段代码我们在学习extends的时候已经写过一次，这里就不作过多解释了。

二、$destroy() 卸载方法

用$destroy()进行卸载。

我写了一个button按钮，点击后卸载整个挂载。

html：


 
 
  
   <p><button onclick="destroy()">卸载</button></p>

javascript


 
 
  
   function destroy(){
    
      vm.$destroy();
   }
   
  
javascript

PS:$destroy()后边必须要有括号，没有括号是无用的。

三、$forceUpdate() 更新方法


 
 
  
   vm.$forceUpdate()

四、$nextTick() 数据修改方法

当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。


 
 
  
   function tick(){
    
       vm.message="update message info ";
       vm.$nextTick(function(){
    
           console.log('message更新完后我被调用了');
       })
   }
  
javascript

安装Vue的控制台调试工具。

每个人的安装方法不同，不作太多的介绍，可能需要你科学上网。

第3节：实例事件

实例事件就是在构造器外部写一个调用构造器内部的方法。这样写的好处是可以通过这种写法在构造器外部调用构造器内部的数据。

width="100%" src="https://v.qq.com/iframe/player.html?vid=z0391czz0qp&tiny=0&auto=0" allowfullscreen="">

我们还是写一个点击按钮，持续加1的例子。

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


 
 
  
   app.$on('reduce',function(){
    
       console.log('执行了reduce()');
       this.num--;
   });
   
  
javascript

$on接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名方法。

如果按钮在作用域外部，可以利用$emit来执行。


 
 
  
   //外部调用内部事件
   function reduce(){
    
       app.$emit('reduce');
   }
  
javascript

二、$once执行一次的事件


 
 
  
   app.$once('reduceOnce',function(){
    
       console.log('只执行一次的方法');
       this.num--;
   
   });
  
javascript

三、$off关闭事件


 
 
  
   //关闭事件
   function off(){
    
      app.$off('reduce');
   }
  
javascript

第4节：内置组件 -slot讲解

slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。

width="100%" src="https://v.qq.com/iframe/player.html?vid=y0391yc4zvx&tiny=0&auto=0" allowfullscreen="">

先来定义一个的组件，这个组件用来显示博主的一些信息。

我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）


 
 
  
   data:{
    
       jspangData:{
    
           bolgUrl:'http://jspang.com',
           netName:'技术胖',
           skill:'Web前端'
       }
   },
   
  
javascript

我们用<template></template>标签的方式定义了组件：


 
 
  
   <template id="tmp">
       <div>
           <p>博客地址：</p>
           <p>网名：</p>
           <p>技术类型：</p>
   
       </div>
   </template>
  
html

我们现在就可以用slot功能让组件接收传递过来的值，并在模板中接收显示。

slot的使用需要两步： 1、在HTML的组件中用slot属性传递值。


 
 
  
   
   <jspang>
       <span slot="bolgUrl">{
    {jspangData.bolgUrl}}</span>    
       <span slot="netName">{
    {jspangData.netName}}</span>    
       <span slot="skill">{
    {jspangData.skill}}</span>    
   </jspang>
  
html

2、在组件模板中用标签接收值。


 
 
  
   
   <template id="tmp">
       <div>
           <p>博客地址：<slot name="bolgUrl"></slot></p>
           <p>网名：<slot name="netName"></slot></p>
           <p>技术类型：<slot name="skill"></slot></p>
   
       </div>
   </template>
  
html

我们贴出这个案例的全部代码：


 
 
  
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <script type="text/javascript" src="../assets/js/vue.js"></script>
       <title>Slot content extend Demo</title>
   </head>
   <body>
       <h1>Slot content extend Demo</h1>
       <hr>
       <div id="app">
       <jspang>
           <span slot="bolgUrl">{
    {jspangData.bolgUrl}}</span>    
           <span slot="netName">{
    {jspangData.netName}}</span>    
           <span slot="skill">{
    {jspangData.skill}}</span>    
       </jspang>
       </div>
   
   
   <template id="tmp">
       <div>
           <p>博客地址：<slot name="bolgUrl"></slot></p>
           <p>网名：<slot name="netName"></slot></p>
           <p>技术类型：<slot name="skill"></slot></p>
   
       </div>
   </template>
   
       <script type="text/javascript">
           var jspang={
    
               template:'#tmp'
           }
   
           var app=new Vue({
    
               el:'#app',
               data:{
    
                  jspangData:{
    
                      bolgUrl:'http://jspang.com',
                      netName:'技术胖',
                      skill:'Web前端'
                  }
               },
               components:{
    
                   "jspang":jspang
               }
           })
       </script>
   </body>
   </html>
   
  
html

    </div>

源码请看该文底部：
https://blog.csdn.net/Silence_Sep/article/details/82787095

本文链接：https://blog.csdn.net/Silence_Sep/article/details/82787558

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

html怎么遍历二维数组,原生js for循环遍历二维数组、嵌套元素的简单示例-程序员宅基地

文章浏览阅读1.4k次。这篇文章主要为大家详细介绍了原生js for循环遍历二维数组、嵌套元素的简单示例，具有一定的参考价值，可以用来参考一下。关于for循环这是js中的重点，特别是项目中会经常用到，并且它的运用范围还极其的广泛，极其的复杂，今天就来遍历一个多层嵌套的元素，先来看看简单的布局：我的好友张安李三张四nonono不认识的人王五刘四赵三黑名单刘八李八周六这种布局就是ul里有li然后li里又嵌套着ul，并且不是单..._html如何调用二维数组中的元素

Android音频框架之二用户录音启动流程源码走读_audio remote_submix 录音-程序员宅基地

文章浏览阅读7.1k次，点赞2次，收藏5次。前言此篇是对《Android音频框架之一详解audioPolicy流程及HAL驱动加载》的延续，此系列博文是记录在Android7.1系统即以后版本实现内录音功能。当用户使用 AudioRecord 录音 API 时，private void init() { int minBufferSize = AudioRecord.getMinBufferSize(kSampleRate, kChannelMode, kEncodeFormat); _audio remote_submix 录音

【c语言】—动态内存分配超详细版本-程序员宅基地

文章浏览阅读4.2k次，点赞15次，收藏88次。讲解C语言中的动态内存分配，主讲malloc、calloc和realloc_动态内存分配

中兴zxj10服务器,中兴ZXJ10大客户服务网-固话信天游-程序员宅基地

文章浏览阅读267次。一前言随着国内电信市场竞争的加剧，现在的集团客户不但关注资费政策，而且要求运营商能够提供各种满足个性化需求的业务组合。因此，对原有业务的升级和新业务、新功能的提供就成为决定电信运营商大客户市场竞争胜败的关键因素。能够提供有线无线一体化、广域Centrex、密码计费、预付费、固话信天游、话费即时知、一呼双应等多种特色业务的中兴ZXJ10大客户服务网整体解决方案，是中兴通讯为运营商倾力打造的利器，使..._中兴zxj10 sm4c

初始Linux的基本操作_桌面操作系统,手机操作系统,服务器操作系统,嵌入式操作系统-程序员宅基地

文章浏览阅读652次。Linux的相关概念和理解Linux的基本指令ls,cd,pwd, touch, mkdir, whoami, tree， adduser, userdel实现_桌面操作系统,手机操作系统,服务器操作系统,嵌入式操作系统

centos8使用命令修改主机名_centos8stream 关于的名称-程序员宅基地

文章浏览阅读1.1k次。hostnamectl set-hostname layuiFilehostname #查看主机名然后先跳到普通用户再exit退到root看其生效或reboot重启生效_centos8stream 关于的名称

随便推点

VSCode常用插件-程序员宅基地

文章浏览阅读1.1w次，点赞22次，收藏52次。一、VSCode常用的插件Chinese (Simplified)汉化Auto Rename TagOne Dark Pro颜色主题格式化代码（vscode系统自带）open in browser浏览器预览页面Live Server实时预览（推荐）vscode-icons设置文件图标主题Easy LESS编译less文件会了吧学习单词插件1.Chinese (Simplified)vscode下载完毕是英文版的，先安装这个插件，改为......_vscode常用插件

webstorm手动更新软件_webstorm在哪更新-程序员宅基地

文章浏览阅读1.7k次。webstorm手动更新软件打开软件，进入设置settings搜索Updates点击check now按弹出框内容点击下载更新_webstorm在哪更新

python基础教程第三版下载,python零基础入门书籍pdf_python编程:从入门到实践(第3版) pdf-程序员宅基地

文章浏览阅读246次，点赞7次，收藏2次。Python 虽是一门成熟的语言，但也像其他语言一样在不断发展。第3版的编写过程从始至终令人愉悦python100行代码画皮卡丘。主要修订目标依然是确保精练、简单易懂。能具备动手开发项目所需的一切知识，同时为进一步学习打下坚实的基础。为此，修订了部分章节，以反映如何利用 Python 中的新方式更简单地完成任务，还澄清了对Python语言的某些细节描述得不太准确的地方。所有的项目都做了全面修订，采用得到良好维护的流行库，让你能够充满信心地用它们来开发自己的项目。_python编程:从入门到实践(第3版) pdf

db2look导出数据库表结构用法_db2look导出表结构-程序员宅基地

文章浏览阅读7.7k次。对于db2数据库，导入和导出表结构和数据其实很简单，只需要用到db2look和db2move两个命令即可。这两个命令都需要在客户端的命令行处理器中执行，但对于数据库服务器和客户端不在同一机器上的，需要借助catalog命令，来先完成远程数据库加载到本地，然后再进行导出导入操作。如果是远程操作，则先需要把远程的数据库信息加载到本地，如果是本地则跳过1和2，从3开始，具体如下： ..._db2look导出表结构

Coursera—Andrew Ng机器学习—课程笔记 Lecture 5 Octave Tutorial-程序员宅基地

文章浏览阅读575次。定义函数 squareThisNumber(x)，内容如下：

超级应用 - 免费应用内测托管平台|APP应用分发平台|iOS应用分发|Android应用分发|免费应用内测托管平台源码下载_awjd1.tv-程序员宅基地

文章浏览阅读4k次。网站标题：超级应用 - 免费应用内测托管平台|APP应用分发平台|iOS应用分发|Android应用分发|免费应用内测托管平台源码下载网站关键词：超级应用(www.awwjd.com) 为您提供测试测试应用、应用托管、分发测试、兼容测试等,为客户提供APP托管和免费的下载分发渠道!源码下载网站描述：超级应用,分发平台,内测平台,内测分发,app分发,ios企业签名,ios分发平台,ios免签封装,苹果企业签名,苹果超级签名,免签封装,应用打包,苹果App下载,安卓应用,苹果应用,扫码下载,UDID,iO_awjd1.tv