vue2.0学习(四)-实例和内置组件

1.实例入门-实例属性

一、Vue和Jquery.js一起使用

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

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

<!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>

二、实例调用自定义方法

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

构造器里的add方法

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

实例调用:

app.add();

2.实例方法

一、$mount方法

$mount方法是用来挂载我们的扩展的.

<!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 zidingyi = Vue.extend({
          template:`<p>{{message}}</p>`,
          data:function(){
              return {
                  message:'Hello ,I am JSPang'
              }
          }
      })
      var vm = new zidingyi().$mount("#app")
    </script>
</body>
</html>

二、$destroy() 卸载方法

用$destroy()进行卸载

html:

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

javascript代码

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

三、$forceUpdate() 更新方法

vm.$forceUpdate()

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

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

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

3.实例事件

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

写一个点击按钮，持续加1的例子.

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

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

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

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

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

二、$once执行一次的事件

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

三、$off关闭事件

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

4.内置组件 -slot讲解

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

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

我们在Vue 构造器里的data中给出了信息.

   data:{
        baiduData:{
            url:"https://www.baidu.com/",
            name:"百度",
            skil:"web前端"
        }
      },

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

<template id="tmp">
    <div>
        <p>百度地址</p>
        <p>网名：</p>
        <p>技术类型：</p>
        
    </div>
</template>

slot的使用需要两步:

1.在HTML的组件中用slot属性传递值.

 <baidu>
            <span slot="url">{{baiduData.url}}</span>
            <span slot="name">{{baiduData.url}}</span>
            <span slot="skil">{{baiduData.skil}}</span>
/baidu>

2.在组件模板中用<slot></slot>标签接收值.

<template id="tmp">
    <div>
        <p>百度地址:<slot name="url"></slot></p>
        <p>网名:<slot name="name"></slot></p>
        <p>技术类型:<slot name="skil"></slot></p>
    </div>
</template>

全部代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>example methods Demo</title>
    <script type="text/javascript" src="../assert/js/vue.js"></script>
    <script type="text/javascript" src="../assert/js/jquery-3.2.1.min.js"></script>
</head>
</head>
<body>
    <h1>example methods Demo</h1>
    <hr>
    <div id="app">
        <baidu>
            <span slot="url">{{baiduData.url}}</span>
            <span slot="name">{{baiduData.url}}</span>
            <span slot="skil">{{baiduData.skil}}</span>
        </baidu>
     </div>
  <template id="tmp">
    <div>
        <p>百度地址:<slot name="url"></slot></p>
        <p>网名:<slot name="name"></slot></p>
        <p>技术类型:<slot name="skil"></slot></p>
    </div>
  </template>
    <script>
        var baidu={
            template:"#tmp"
        }
  var app=new Vue({
      el:'#app',
      data:{
        baiduData:{
            url:"https://www.baidu.com/",
            name:"百度",
            skil:"web前端"
        }
      },
   components:{
       "baidu":baidu
   }
  })

    </script>
</body>
</html>

秒客网

vue2.0学习(四)-实例和内置组件