vue--实例与组件

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

一、Vue和Jquery.js一起使用

1、下载并引入jquery框架

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

1

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

lang="en">     charset="UTF-8">                     Early Examples Demo           id="app">         {{message}}

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

二、实例调用自定义方法

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

构造器里的add方法：

1 2 3 4 5

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

实例调用：

1	app.add();

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

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

第2节：实例方法

一、$mount方法

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

lang="en">     charset="UTF-8">                Examples Method Demo           id="app">         {{message}}                          Slot content extend Demo           id="app">              slot="bolgUrl">{{jspangData.bolgUrl}}             slot="netName">{{jspangData.netName}}             slot="skill">{{jspangData.skill}}