首页 Web开发 Windows程序 编程语言 数据库 移动开发 系统相关 微信 其他好文

Vue基础（环境配置、内部指令、全局API、选项、内置组件）

时间：2019-01-19 17:37:08   收藏：0   阅读：1502

1、环境配置

2、Vue内部指令 

2.1、hello world

编写第一个HelloWorld代码：

技术分享图片 
<!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>Helloworld</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: ‘#app‘,
            data: {
                message: "hello Vue!!!!"
            }
        })
    </script>
</body>

</html>
View Code

2.2、v-if v-else v-show 指令

2.3、v-for指令 ：解决模板循环问题

2.4、v-text & v-html

我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的 v-text ,就是解决这个问题的。我们来看代码：

<span>{{ message }}</span>=<span v-text="message"></span><br/>

如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用 v-html 标签了。

<span v-html="msgHtml"></span>

双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。 需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。 完整代码：

技术分享图片 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>v-text & v-html 实例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-text & v-html 实例</h1>
    <hr>
    <div id="app">
        <span>{{message}}</span>
        <span v-text="message"></span>
        <br>
        <span>{{dodo}}</span>
        <span v-html="dodo"></span>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: ‘#app‘,
            data: {
                message: "hello Vue!",
                dodo:"<h2>hello Vue!</h2>" 
            }
        })
    </script>
</body>

</html>
View Code

2.5、v-on：绑定事件监听器

使用绑定事件监听器，编写一个加分减分的程序。

程序代码：

技术分享图片 
<!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>v-on 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-on 实例</h1>
    <hr>
    <div id="app">
        本厂比赛得分:{{score}}
        <p>
            <button v-on:click="scoreIncrease">加分</button>
            <button @click="scoreDecrease">减分</button>
            <br />
            <input type="text" v-on:keyup.enter="onEnter" v-model="score2">
        </p>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: ‘#app‘,
            data: {
                score: 0,
                score2: 1
            },
            methods: {
                scoreIncrease: function () {
                    this.score++;
                },
                scoreDecrease: function () {
                    if (this.score > 0) {
                        this.score--;
                    }
                },
                onEnter: function () {
                    this.score +=parseInt(this.score2);
                }
            }

        })
    </script>
</body>

</html>
View Code

我们的v-on 还有一种简单的写法，就是用@代替。

<button @click="jianfen">减分</button>

我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。 绑定事件写法：

<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">

javascript代码：

onEnter:function(){
     this.count=this.count+parseInt(this.secondCount);
}

因为文本框的数字会默认转变成字符串，所以我们需要用 parseInt() 函数进行整数转换。

你也可以根据键值表来定义键盘事件：

技术分享图片

2.6、v-model指令

v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。

2.7、v-bind 指令

v-bind是处理HTML中的标签属性的，例如

就是一个标签，技术分享图片也是一个标签，我们绑定技术分享图片上的src进行动态赋值。

html文件：

<div id="app">
    <img v-bind:src="imgSrc"  width="200px">
</div>

在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。

js文件：

var app = new Vue({
    el: ‘#app‘,
    data: {
        imgSrc: "https://www.baidu.com/img/baidu_jgylogo3.gif",
    }
})

我们在data对象在中增加了imgSrc属性来供html调用。

2.8、其他内部指令(v-pre & v-cloak & v-once)

3、全局API

什么是全局API？

全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如我们今天要学习的指令Vue.directive。说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。

3.1、Vue.directive自定义指令

在自定义指令前我们写一个小功能，在页面上有一个数字为10，数字的下面有一个按钮，我们每点击一次按钮后，数字加1.

我们这里使用 Vue.directive( ) 自己定义一个全局的指令

Vue.directive(‘jsdirective‘,function(el,binding,vnode){
        el.style=‘color:‘+binding.value;
});

3.2、Vue.extend构造器的延伸

Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。

由于我们还没有学习Vue的自定义组件，所以我们先看跟组件无关的用途。

3.3、Vue.set全局操作

 Vue.set  的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到 Vue.set 

3.4、Vue的生命周期（钩子函数）

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。

技术分享图片

3.5、Template 制作模版

3.6、Component 初识组件

3.7、Component 组件props 属性设置

 props选项就是设置和获取标签上的属性值的，例如我们有一个自定义的组件,这时我们想给他加个标签属性写成 意思就是熊猫来自中国，当然这里的China可以换成任何值。定义属性的选项是props。

3.8、Component 父子组件关系

在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件，这就需要一个父子组件关系。

3.9、Component 标签

标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。

4、选项

选项就是在Vue构造器里的配置功能的前缀（Vue已经给我们定义好了），Vue有很多选项，我们将在这一级教程中一一介绍。

4.1、propsData Option 全局扩展的数据传递

propsData 不是和属性有关，他用在全局扩展时进行传递数据。实际我们并不推荐用全局扩展的方式作自定义标签，我们学了组件，完全可以使用组件来做，这里只是为了演示propsData的用法。

总结：propsData在实际开发中我们使用的并不多，我们在后边会学到Vuex的应用，他的作用就是在单页应用中保持状态和数据的。

4.2、computed Option 计算选项

computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号……。

4.2.1、格式化输出结果

我们先来做个读出价格的例子：我们读书的原始数据是price:100 但是我们输出给用户的样子是（￥100元）。

主要的javascript代码：

computed: {
    newPrice:function(){
        return "￥"+this.price+"元";
    }
},

全部代码：

技术分享图片 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>computed option</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>computed option</h1>
    <hr>
    <div id="app">
        {{newPrice}}
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: ‘#app‘,
            data: {
                price:100
            },
            computed: {
                newPrice:function(){
                    return "￥"+this.price+"元";
                }
            },
        })
    </script>
</body>

</html>
View Code

效果展示：

现在输出的结果就是：￥100元。

4.2.2、用计算属性反转数组

例如：我们得到了一个新闻列表的数组，它的顺序是安装新闻时间的顺序正序排列的，也就是早反生的新闻排在前面。这是反人类的，我们需要给他反转。这时我们就可以用到我们的计算属性了。没有排序的新闻列表，是安装日期正序排列的。

var newsList=[
    {title:‘香港或就“装甲车被扣”事件追责 起诉涉事运输公司‘,date:‘2017/3/10‘},
    {title:‘日本第二大准航母服役 外媒：针对中国潜艇‘,date:‘2017/3/12‘},
    {title:‘中国北方将有明显雨雪降温天气 南方阴雨持续‘,date:‘2017/3/13‘},
    {title:‘起底“最短命副市长”：不到40天落马，全家被查‘,date:‘2017/3/23‘},
];

我们希望输出的结果：

computed:{
    reverseNews:function(){
        return this.newsList.reverse();
    }
}

全部代码：

技术分享图片 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>computed option</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>computed option</h1>
    <hr>
    <div id="app">
        <p>{{newPrice}}</p>
        <ol>
            <li v-for="item in reverseNews">{{item.title}}-{{item.date}}</li>
        </ol>
    </div>

    <script type="text/javascript">
        var newsList = [{
                title: ‘香港或就“装甲车被扣”事件追责 起诉涉事运输公司‘,
                date: ‘2017/3/10‘
            },
            {
                title: ‘日本第二大准航母服役 外媒：针对中国潜艇‘,
                date: ‘2017/3/12‘
            },
            {
                title: ‘中国北方将有明显雨雪降温天气 南方阴雨持续‘,
                date: ‘2017/3/13‘
            },
            {
                title: ‘起底“最短命副市长”：不到40天落马，全家被查‘,
                date: ‘2017/3/23‘
            },
        ];

        var app = new Vue({
            el: ‘#app‘,
            data: {
                price: 100,
                newsList: newsList
            },
            computed: {
                newPrice: function () {
                    return "￥" + this.price + "元";
                },
                reverseNews: function () {
                    return this.newsList.reverse();
                }
            },
        })
    </script>
</body>

</html>
View Code

效果展示：

4.3、Methods Option 方法选项

我们还是复习一下最简单的使用方法，一个数字，每点击一下按钮加1.（做过很多次了，你们可以先不看代码和视频自己试着写一下）

技术分享图片 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>methods options</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>methods options</h1>
    <hr>
    <div id="app">
        {{a}}
        <p><button @click="add">add</button></p>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: ‘#app‘,
            data: {
                a: 1
            },
            methods: {
                add:function(){
                    this.a++;
                }
            },
        })
    </script>
</body>

</html>
View Code

4.3.1、methods中参数的传递

使用方法和正常的javascript传递参数的方法一样，分为两部：

现在知道了加参数的方法，看一段完整的代码，代码中给add添加了num参数，并在按钮上调用传递了。

示例代码：

技术分享图片 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>methods options</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>methods options</h1>
    <hr>
    <div id="app">
        {{a}}
        <p><button @click="add(2)">add</button></p>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: ‘#app‘,
            data: {
                a: 1
            },
            methods: {
                add:function(num){
                    if (num!=null) {
                        this.a+=num
                    } else {
                        this.a++;
                    }
                }
            },
        })
    </script>
</body>

</html>
View Code

效果展示：

这时，再点击按钮是每次加2个数字。

4.3.2、methods中的$event参数

传递的$event参数都是关于你点击鼠标的一些事件和属性。我们先看看传递的方法。

传递：

<p><button @click="add(2,$event)">add</button></p>

我们这时候可以打印一下，看看event到底是个怎样的对象。你会发现，它包含了大部分鼠标事件的属性。

4.3.3、native 给组件绑定构造器里的原生事件

在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。

现在我们把我们的add按钮封装成组件：

4.3.4、作用域外部调用构造器里的方法

这种不经常使用，如果你出现了这种情况，说明你的代码组织不够好。

<button onclick="app.add(4)" >外部调用构造器里的方法</button>

4.4、Watch 选项 监控数据

数据变化的监控经常使用，我们可以先来看一个简单的数据变化监控的例子。例如天气预报的穿衣指数，它主要是根据温度来进行提示的，当然还有其它的，咱们就不考虑了。

4.4.1、看一个监控变化的案例

温度大于26度时，我们建议穿T恤短袖，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿棉衣羽绒服。

先来模拟一个温度变化的情况：我们使用按钮来加减温度。

示例代码：

技术分享图片 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>watch Option 监控数据</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>watch Option 监控数据</h1>
    <hr>
    <div id="app">
        <p>温度显示：{{wendu}}°</p>
        <p>穿衣建议：{{chuanyi}}</p>
        <p><button @click="shenggao">升高温度</button><button @click="jiangdi">降低温度</button></p>
    </div>

    <script type="text/javascript">
        var chuanyiarray = ["T恤短袖", "夹克长裙", "棉衣羽绒服"];

        var app = new Vue({
            el: ‘#app‘,
            data: {
                wendu: 14,
                chuanyi: "夹克长裙"
            },
            methods: {
                shenggao: function () {
                    this.wendu += 5;
                },
                jiangdi: function () {
                    this.wendu -= 5;
                }
            },
            watch: {
                wendu: function (newVal, oldVal) { //这里的温度是监控的对象的名称
                    if (newVal > 26) {
                        this.chuanyi = chuanyiarray[0];
                    } else if (newVal >= 0 && newVal <= 26) {
                        this.chuanyi = chuanyiarray[1];
                    } else {
                        this.chuanyi = chuanyiarray[2]
                    }
                }
            },
        })
    </script>
</body>

</html>
View Code

效果展示：

4.4.2、用实例属性写watch监控

有些时候我们会用实例属性的形式来写watch监控。也就是把我们watch卸载构造器的外部，这样的好处就是降低我们程序的耦合度，使程序变的灵活。

app.$watch(‘xxx‘,function(){})

还是上边的案例我们改成实例方法的模式。

//在外部进行watch监控
app.$watch("wendu",function(newVal, oldVal){
    if (newVal > 26) {
                this.chuanyi = chuanyiarray[0];
            } else if (newVal >= 0 && newVal <= 26) {
                this.chuanyi = chuanyiarray[1];
            } else {
                this.chuanyi = chuanyiarray[2]
            }
})

全部代码：

技术分享图片 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>watch Option 监控数据</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>watch Option 监控数据</h1>
    <hr>
    <div id="app">
        <p>温度显示：{{wendu}}°</p>
        <p>穿衣建议：{{chuanyi}}</p>
        <p><button @click="shenggao">升高温度</button><button @click="jiangdi">降低温度</button></p>
    </div>

    <script type="text/javascript">
        var chuanyiarray = ["T恤短袖", "夹克长裙", "棉衣羽绒服"];

        

        var app = new Vue({
            el: ‘#app‘,
            data: {
                wendu: 14,
                chuanyi: "夹克长裙"
            },
            methods: {
                shenggao: function () {
                    this.wendu += 5;
                },
                jiangdi: function () {
                    this.wendu -= 5;
                }
            }
        })


        //在外部进行watch监控
        app.$watch("wendu",function(newVal, oldVal){
            if (newVal > 26) {
                        this.chuanyi = chuanyiarray[0];
                    } else if (newVal >= 0 && newVal <= 26) {
                        this.chuanyi = chuanyiarray[1];
                    } else {
                        this.chuanyi = chuanyiarray[2]
                    }
        })
    </script>
</body>

</html>
View Code

效果展示：

4.5、Mixins 混入选项操作

Mixins一般有两种用途：

  1. 在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
  2. 很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

4.5.1、Mixins的基本用法

我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够提示：“数据发生变化”.

示例代码：

技术分享图片 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Mixins Option 混入</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Mixins Option 混入</h1>
    <hr>
    <div id="app">
        <p>num:{{ num }}</p>
        <P><button @click="add">增加数量</button></P>
    </div>

    <script type="text/javascript">
        //额外临时加入时，用于显示日志
        var addConsole = {
            updated: function () {
                alert("数据放生变化,变化成" + this.num + ".");
            }
        }

        var app = new Vue({
            el: ‘#app‘,
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    this.num++;
                }
            },
            mixins: [addConsole] //混入
        })
    </script>
</body>

</html>
View Code

4.5.2、mixins的调用顺序

从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。

在上边的代码的构造器里我们也加入了updated的钩子函数：

updated: function () {
    alert("我是原生的Update");
},

这时控制台输出的顺序是：

数据放生变化,变化成2.
我是原生的Update

PS：当混入方法和构造器的方法重名时，混入的方法无法展现，也就是不起作用。

4.5.3、全局API混入方式

我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：

Vue.mixin({
    updated() {
        alert("我是全局的混入的Update");
    },
})

代码示例：

技术分享图片 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Mixins Option 混入</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Mixins Option 混入</h1>
    <hr>
    <div id="app">
        <p>num:{{ num }}</p>
        <P><button @click="add">增加数量</button></P>
    </div>

    <script type="text/javascript">
        //额外临时加入时，用于显示日志
        var addConsole = {
            updated: function () {
                alert("数据放生变化,变化成" + this.num + ".");
            }
        }

        Vue.mixin({
            updated() {
                alert("我是全局的混入的Update");
            },
        })

        var app = new Vue({
            el: ‘#app‘,
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    this.num++;
                }
            },
            updated: function () {
                alert("我是原生的Update");
            },
            mixins: [addConsole] //混入
        })
    </script>
</body>

</html>
View Code

效果展示：

PS：全局混入的执行顺序要前于混入和构造器里的方法。

4.6、Extends Option 扩展选项

通过外部增加对象的形式，对构造器进行扩展。它和我们上节课讲的混入非常的类似。

4.6.1、extends我们来看一个扩展的实例

技术分享图片 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>extends Option 扩展选项</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>extends Option 扩展选项</h1>
    <hr>
    <div id="app">
        <p>num:${ num }</p>
        <P><button @click="add">增加数量</button></P>
    </div>

    <script type="text/javascript">
        var extendsObj = {
            updated: function () {
                alert("我是扩展的update");
            },
            methods:{
                add: function () {//扩展的方法重名的话不执行
                    alert("我是扩展的方法");
                    this.num++;
                }
            }
        }

        var app = new Vue({
            el: ‘#app‘,
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    alert("我是原生的方法");
                    this.num++;
                }
            },
            updated: function () {
                alert("我是原生的Update");
            },
            extends:extendsObj,
            delimiters:["${","}"],
        })
    </script>
</body>

</html>
View Code

4.6.2、delimiters 选项

delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式。

delimiters:[‘${‘,‘}‘]

现在我们的插值形式就变成了${}。

效果展示：

5、实例和内置组件

5.1、Vue和Jquery.js一起使用

5.1.1、下载并引入jquery框架

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

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

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

技术分享图片 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>example methods 实例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <script type="text/javascript" src="../assets/js/jquery-3.3.1.min.js"></script>
</head>

<body>
    <h1>example methods 实例</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: ‘#app‘,
            data: {
                message: "hello world!"
            },
            mounted() {
                $("#app").html("我是Jquery~!")
            },
            methods: {
                add: function () {
                    alert("调用了构造器内部的Add方法");
                }
            }
        })
    </script>
</body>

</html>
View Code

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

5.1.2、实例调用自定义方法

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

构造器里的add方法：

methods: {
    add: function () {
        alert("调用了构造器内部的Add方法");
    }
}

实例调用：

app.add();

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

效果展示：

5.2、实例方法

5.3、实例事件

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

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

5.4、内置组件 -slot讲解

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

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

data: {
    jsData: {
        blogUrl: "https://www.cnblogs.com/wyt007/",
        netName: "进击的辣条",
        skill: "web前端"
    }
},

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

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

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

slot的使用需要两步：

本教程整理自：http://www.jspang.com/post/vueNav.html

评论（0）
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码！