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

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

智能推荐

CentOS7 完全卸载 php-程序员宅基地

文章浏览阅读2.2k次，点赞2次，收藏3次。在 CentOS 7 使用 yum install 简单安装 php 后，发现 php 版本 5.4 ，太低了！然后，使用 yum remove 简单卸载后，发现 php 还在，不干净！只好 rpm 慢慢卸载

ASP.Net中使用Log4Net-程序员宅基地

文章浏览阅读254次。1、在Web.Config配置Code<configSections><sectionname="log4net"type="log4net.Config.Log4NetConfigurationSectionHandler,log4net"/></configSections><log4net><!--De..._asp.net中使用log4net

文章浏览阅读800次。将图片压缩后，我们会得到一个 Base64 编码的字符串，该字符串包括了压缩后的图片数据以及一些元信息，如图片格式、压缩质量等。可以通过第二个参数来设置图片的压缩质量，该参数的取值范围是0到1，其中0表示最低质量（最高压缩），1表示最高质量（最低压缩，默认值为0.92）。就是如果后续需要把压缩后的图片比如说进行上传操作，我们得得到处理后图片的Base64 编码就好办了，其实这个 Base64 编码就在眼前。这里我再提供一个vue测试代码，可以在控制台中打印出图片压缩前后的size，以及图片压缩后的回显。

第十三届蓝桥杯省赛C++ C组《全题目+题解》_蓝桥杯c组省赛-程序员宅基地

文章浏览阅读5.4k次，点赞75次，收藏141次。本篇来自第十三届蓝桥杯省赛C++ C组《全题目+题解》_蓝桥杯c组省赛

MATLAB车道线检测技术分析_车道路线识别matlab-程序员宅基地

文章浏览阅读942次，点赞22次，收藏21次。车道线检测的应用场景具有时序信息特性，为了利用时序特征通常会引入RNN模块，加上Encoder-Decoder的形式已经成为CNN特征提取的标配，所以一般的做法是对Encoder提取的Features进行进一步加工，提取连续帧带来的历史信息。VPGNet：一共20k张图片，包含白天（非雨天、雨天、大雨天）、夜晚的数据，同时包含了各种车道线类型，以及其他不同类型的车道标识（左转箭头、直行箭头、斑马线等等），如下图。TuSimple：一共72k张图片，位于高速路，天气晴朗，车道线清晰，特点是车道线以点来标注；_车道路线识别matlab

kds官方android客户端,电子厨打设置（KDS/ADS）-程序员宅基地

文章浏览阅读1.3k次。KDS应用场景KDS和ADS设置使用方案：厨房模式(KDS) 配菜模式(ADS) 呼叫广告模式(TV)电子菜牌模式KDS(kitchen display system)ADS(assign display system)准备工作安卓电子厨打客户端硬件要求：各类安卓平板及安卓一体机(安卓4.4.2以上，7寸屏以上)收银设备的IP，做KDS的设备IP，做ADS的设备IP必须在同一个网段(接同一个路由上..._kitchen display system

随便推点

墨器杯垫文创商品设计特优_杯垫文创设计说明-程序员宅基地

文章浏览阅读737次。教育部昨举行「102年国立馆所文创商品设计比赛」颁奖典礼，台北科技大学创新设计研究所硕士生谢镇宇，为TW艺术教育馆设计「墨器」杯垫，取「默契」谐音，用5片压克力板，展现水墨画层层渲染效果，增加立体视觉感受，并在杯架后方加入LED光源，获评审肯定夺特优奖和奖金10万元。台南应用科技大学商品设计系学生高郁翔，为国立自然科学博物馆设计「恐龙化石钉书机」，他认为小朋友把钉书机钉下去的那一刻，会觉得像暴龙準_杯垫文创设计说明

C#中关于XML与对象，集合的相互转换-程序员宅基地

文章浏览阅读404次。XML与对象，集合的相互转化　　今天小伙伴在群里问了一下关于XML与对象之间的相互转换，作为菜鸟的我正好趁着闲着的时间学习了一波，直接上代码了，有疑问或者有错误的地方还请大家指正，谢谢。。。。 1 using System; 2 using System.Collections.Generic; 3 using System.IO; 4 using System...._c# xml转集合

笔记：图以及cpp基础-程序员宅基地

文章浏览阅读1.8k次。如int fun(int i,char a)和void fun(char a,int i)就可以构成函数重载，根据函数名修饰的原理我们可以得到_funic和 _funci两个经过修饰之后得到的函数名，在进行修饰后的函数名显然是不同的。定义：同一个作用域内，相同函数名，参数不同（类型不同，个数不同）可以构成函数重载（和返回值无关）分析其二：顶点i的度即为第i行和i列的“1”的个数，如果是无向图就只要考虑每一行“1”的个数。图的邻接矩阵为一个二维数组，设为A.arcs【i】【j】（理解为两个顶点之间的关系）_cpp