本文与大家分享一个学习Vuejs的总结和一个调用webapi的小例子；

vuejs-学习大杂烩

webapivue.js示例

让我们一步步分享：

vuejs-学习大杂烩

首先，如果你想学习一个js框架，你必须介绍框架的基本库。在这里我创建了一个页面，并参考了如下官方网站的库：

脚本src=' http :https://unpkg.com/vue/dist/vue . js '/脚本

让我们看看Vue的一个基本用法代码：

Varapp=newvue ({el:' # appvue '，data: {msg: '第一个vue '，})；分析代码后，这个Vue需要传递的参数是一个{}对象；里面的El和数据是参数名；El对应页面上一个块元素的id(如div，表的id属性)；数据对应于数据源；Msg是用户定义的数据源名称；好了，让我们来看看相应的html代码和渲染：

H3 vue-学习大杂烩/h3hr/div class=' container ' id=' appvue '输入类型=' text ' v-model=' msg ' class=' form-control '/div渲染：

显然，我们的初始化数据msg(“第一个vue”)反映在输入中。仔细观察这个输入标签的属性，它有一个v-model属性，她的对应值是初始化定义的msg。可见，v-model在数据绑定中起作用；好了，让我们将数据值变得更加复杂，并在data中添加另一个json格式数组，例如：

blogs :[{ title : ' web API ' }，{title :' wcf'}，{title :' MVC'}]然后添加以下html:

ul Li class=' text-left ' v-for='(blog，index)在blog“{ index } }-{ { blog。title}}/Li/ul直接刷新页面，查看渲染图：

从结果中我们可以看到Zha定义的数据是通过遍历直接显示在页面上，然后分析具体的代码。与普通的li元素相比，此时多了一个v-for属性，arr中对于一个值有这样的语法规则(obj，index)，类似于for循环的编写，也有遍历数索引。如果存在循环，则必须显示该值。这时我们可以看到li元素子的写法是{{index}}-{{blog.title}}，所以我们可以分析一下写法规则：

1.{{}}是输出文本的格式，其中包含要输出的对象

2.参数索引对应于v-for中的索引，对应的值是遍历的序列号，从0开始

3.blog.title对应于v-for中的博客，以及她对应的自定义属性title

从上面{{}}的数据绑定写作，我们不得不引起大家对她的好奇。这种写法在许多js数据绑定框架中实际上是一样的(例如angularjs)。让我们举一个加法的小例子来更深刻地记住这篇文章。首先，在刚才的数据属性中添加两个属性X和Y:

Data: {msg: '第一个vue '，blogs :[{ title : ' web API ' }，{title :' wcf'}，{title :' MVC'}]，x: 444，y: 2}，然后添加以下内容

输入类型='text' v-model='x'/*输入类型='text' v-model='y'/={{x * y}}

属性页执行效果：

由此可以看出{{x * y}}允许表达式，而这个{{x*y}}在我的文本框中的x或y值修改后会自动重新计算，这与我们自己编写的js在计算后重新分配给显示框的概念有些类似；让我们看看如何在vue中定义一个方法。这里，我们使用她的一个属性方法。我们定义以下代码：

Varapp=newvue ({el:' # appvue '，data: {msg:' first vue '，blogs 3360 [{title :' webapi'}，{title :' wcf'}，{title :' MVC'}]，x: 444，y: 2}，methods 3360 { showmsg 3360 function(){ 17this . msg=' I am '}}}添加以下html元素，

按钮v-: click=' showmsg ' class=' BTN ' click/button

好了，让我们来看看运行的渲染，并点击按钮几次：

效果是“我是”被添加到v-model=“msg”文本框中。这里的cv-onclusion是按钮从vue中的方法中定义的方法showMsg开始。让我们看看这个属性on:click on按钮，它用来表示绑定click事件。这里的on3360Click可以缩写为@click，因为我在vs中的mvc尝试模板不支持它。让我们再次使用她的过滤器。我们为什么不在vue中添加以下过滤器代码来定义案例过滤器：

filters: { toUpper:函数(val，IsOpper){ if(！val){ return“”；}返回isUpper？val . touppercase(): val . tolowercase()；}}为了方便查看效果，我们将上面v-model='msg '的文本框代码修改如下：

输入类型=' text ' v-model=' msg ' class=' form-control '/{{msg|toUpper(true)}} br/{ { msg | toUpper(false)} }我们在文本框中添加了{ { msg | toUpper(true)} }文字，细心的朋友可以发送

通过比较不同参数的滤波器，我们可以看到我们的滤波器在这个例子中的效果。这里需要注意的是，我们定义的过滤器可以通过在msg之后直接使用“|”来增加。如果类比使用“|”分隔多个过滤器，那么我们定义的Toupper 3360函数(val，upper)的方法中有两个参数。第一个参数是绑定的msg本身，第二个参数是Time即将耗尽，这里就不解释其他常用的特性和属性了。让我们直接看一个vue使用webapi数据的例子；

webapivue.js示例

首先，这里使用了Vue提供的组件的概念。像js变量一样，有两种：全局和局部(私有)。代码上的差别不是很大，效果是一样的。在这里，我们使用本地方式来定义组件。让我们首先看一下整体代码：

var blogApp=new Vue({ El : ' # div blogs '，data: { blogs: [] }，methods : { getblogs : function(){ var那=this$.getJSON(' http://www . love xins.com :1001/API/values？task=2 '，函数(结果){ if(！结果){ return} that.blogs=result});}，components : { ' div-blog ' : { prop s :[' item ']，template : ' div class=' bs-callout bs-callout-danger ' ' ' H4 ' ' a v-bind : href=' item。URL“target=”_ blank“{ item。title | ToupPerRollow(false)} }/a ' '/H4 ' ' p ' ' { { item。des } } ' '/p ' ' HR/H5 ' by:av-bind : href=' item . blogurl ' target=' _ blank ' { item .昵称} }/a Published:code { { item }。CreateTime}}/code推荐：code { { item }。ZanNum}}/代码读取：代码{ { item }。ReadNum}}/code注释：code { { item }。comminum } }/code ' '/H5 ' '/div '，筛选： { toupperorlower 3360函数(val，upper) {if(！val){ return“”；}返回isUpper？val . touppercase(): val . tolowercase()；} } } } });这里定义的格式类似于上面第一节中使用的格式，只是多了一个组件的定义，即components的关键字。让我们逐一分析代码步骤；

1.blogs: []是我们定义的博客信息数组

2.methods属性中的getBlogs方法使用了一个=this的var在这段代码中，这是上面创建的var blogApp=new Vue()对象，她可以直接使用数据中定义的blog数据数组blogs，所以在通过jquery的getJSON获得webapi数据后，她直接将其分配给blog数组blogs。

3.在组件组件中定义了一个名为“div-blog”的组件，参数名为item由道具定义；模板是对应的模板，其中项可以直接用来获取对应的参数值；

4.这里还定义了一个过滤器，也是转换成大写和小写的，写的方法可以忽略。主要注意的是，当在本地定义的主键中使用过滤器时，它也是以{ { item }的格式。title | toupperorlow(false)} }

好了，通过上面的总结点，让我们来看看如何在html中使用这个自定义组件，如下所示：

div class=' row ' id=' div blogs ' div class=' col-MD-12 '按钮v-: click=' getblogs ' class=' btnbtn-default ' inquiry/button div-blog v-for=' blogs中的blog ' v-bind : item=' blog '/div-blog div style=' position : fixed；right:0pxbottom:10px宽度：44 px；高度：40 px；背景-color : # F8F 8；font-weight :100；cursor:pointer'id=' totop ' onclick=' totop()' img title=' return ' style=' width :38 px；高度：38 px；border :1 pxsolid # CCC ' src=' http :3358121 . 42 . 208 . 152/images/top . png '/div/div/div只需引用自定义组件的代码：

div-blog v-for=' blogs中的blog ' v-bind : item=' blog '/div-blog

Div-blog这里对应的是上面总结的第三点。自定义主键名。需要注意的是，如果自定义组件名称格式，比如divBlog(驼峰格式)，那么我们在html中使用的格式必须是div-Blog，中间用“-”隔开。这个细节要特别注意，不然页面就没效果了。嗯，说了这么多，看看运行效果图：

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！