Vue.js learning example sharing

This article shares with you a summary of learning Vuejs and a small example of calling webapi;

» Vuejs - learning hodgepodge

» WebApi + Vue.js example

Let’s share step by step:

» Vuejs - Learning Hodgepodge

First of all, if we want to learn a js framework, we must introduce the basic library of the framework. Here I create A page and a library that references the official website is:

Let's take a look at a basic usage code of Vue:

var app = new Vue({
 el: "#appVue",
 data: {
 msg: "第一个vue",
 }
 });

Analyzing the code, the parameter transfer required by Vue is a {} object; el and data inside are parameter names; el The corresponding is the id of a certain block element on our page (such as the id attribute of div, table); data corresponds to the data source; msg is our customized data source name; OK, let's take a look at the correspondence. The html code and renderings:

<h3>Vue - 学习大杂烩</h3>
<hr />
<div class="container" id="appVue">
<input type="text" v-model="msg" class="form-control" />
</div>

Renderings:

It is obvious that the data we initialized msg("the first vue") is reflected in the input. Take a closer look at the attribute of this input tag. There is a v-model attribute, and its corresponding value is the msg we initialized. It can be seen that v-model plays a role in data binding. Function; Okay, let's make the data value a little more complicated. Add another json format array to the data, such as:

blogs: [
 { title: "webapi" },
 { title: "wcf" },
 { title: "mvc" }
 ]

Then let's add the following html:

<ul>
　　<li class="text-left " v-for="(blog,index) in blogs">{{index}} - {{blog.title}}</li>
</ul>

Refresh the page directly and see the rendering:

From the results, we can see that the data we defined is directly traversed and displayed in page, and then analyze the specific code. Compared with the ordinary li element, there is an additional v-for attribute, and there is such a syntax rule for the value of a (obj, index) in arr, which is similar to a for loop. There is also a traversal number index. If there is a loop, the value must be displayed. At this time, you can see that the writing method in the child level of the li element is {{index}} - {{blog.title}}, let’s analyze it. Writing rules:

1. {{}} is the format of the output text, which contains the object to be output

2. The parameter index corresponds to the index in v-for, corresponding The value is the traversal sequence number, starting from 0

3. blog.title corresponds to the blog in v-for, and its corresponding custom attribute title

is given by {{}} above The writing method of data binding has to arouse our curiosity about it. This writing method is actually the same in many js data binding frameworks (such as: angularjs). Let's do a small example of addition to remember it more deeply. In this way of writing, first add two attributes x and y to the data attribute just now:

data: {
 msg: "第一个vue",
 blogs: [
 { title: "webapi" },
 { title: "wcf" },
  { title: "mvc" }
 ],
 x: 444,
 y: 2
 },

Then add the following html code:

* = {{x * y}}

The effect of executing the property page :

It can be seen that {{x * y}} allows expressions, and when the x or y value in my text box is modified, this {{x *y}} will be automatically recalculated, which is somewhat similar to the concept of reassigning the value to the display box after calculation in js written by ourselves; let's see how to define a method in vue. One of her attributes methods is used here. We define The following code:

var app = new Vue({
 el: "#appVue",
 data: {
 msg: "第一个vue",
 blogs: [
 { title: "webapi" },
 { title: "wcf" },
  { title: "mvc" }
 ],
 x: 444,
 y: 2
 },
 methods: {
 showMsg: function () {17  this.msg = "我是" + this.msg;
 }
 }
}

Add the following html element,

click

Okay, let’s take a look at the running effect and click the button multiple times:

The effect we get is that we have been doing it all the time. v-model="msg" adds "I am" to the text box. The conclusion drawn here is that the button triggers the method showMsg we defined in methods in vue. Let's take a look at the attribute v-on:click on the button. To indicate binding click events, v-on:click here can be abbreviated to @click. Since my mvc view template in vs does not support this writing method, this article still uses v-on for binding. Event; let’s use her filter again. Here we add the following filters code to vue and define a case filter:

filters: {
 toUpper: function (val, isUpper) {
 if (!val) { return ""; }
 return isUpper ? val.toUpperCase() : val.toLowerCase();
 }
 }

In order to facilitate the effect. , we modify the text box code of v-model="msg" above as follows:

<input type="text" v-model="msg" class="form-control" />{{msg|toUpper(true)}}<br />{{msg|toUpper(false)}}

We added a {{msg|toUpper(true)}} writing method in the text box , if you are careful, you can post that the toUpper method behind is the filter method we just defined, passing a parameter true, and then take a look at the rendering:

通过使用不同参数的filter的对比，能看出我们过滤器在此实例中的效果，这里注意的是在msg后面直接使用‘|'隔开就可以增加我们定义的过滤器了，如果多个以此类推使用‘|'追加隔开就行了，还有就是我们定义的 toUpper: function (val, isUpper) 方法中有两个参数，第一个参数就是绑定的msg本身，第二个参数才是我们需要手动传递的，这个一定要分开；时间不多了，这里就不再讲解其他的常用的特性和属性了，直接来看下面vue使用webapi的数据体现的一个例子；

» WebApi + Vue.js 示例

首先，这里用到了Vue提供的组件概念component，她和js变量一样有全局和局部（私有）两种，代码方面差距不是很大效果也一样，这里我们用到的是局部方式来定义一个组件，下面先来看整体代码：

var blogApp = new Vue({
 el: "#divBlogs",
 data: {
 blogs: []
 },
 methods: {
 getBlogs: function () {
 
 var that = this;
 $.getJSON("http://www.lovexins.com:1001/api/values?task=2", function (result) {
  if (!result) { return; }
  that.blogs = result;
 });
 }
 },
 components: {
 "div-blog": {
 props: ["item"],
 template: &#39;<div class=" bs-callout bs-callout-danger">&#39; +
  &#39; <h4>&#39; +
  &#39; <a v-bind:href="item.Url" target="_blank">{{item.Title | toUpperOrLower(false)}}</a>&#39; +
  &#39; </h4>&#39; +
  &#39; <p>&#39; +
  &#39; {{item.Des}}&#39; +
  &#39; </p>&#39; +
  &#39; <hr />&#39; +
  &#39; <h5>&#39; +
  &#39; 作者：<a v-bind:href="item.BlogUrl" target="_blank">{{item.NickName}}</a> 发布时间：<code>{{item.CreateTime}}</code> 推荐：<code>{{item.ZanNum}}</code> 阅读：<code>{{item.ReadNum}}</code> 评论：<code>{{item.CommiteNum}}</code>&#39; +
  &#39; </h5>&#39; +
  &#39; </div>&#39;,
 filters: {
  toUpperOrLower: function (val, isUpper) {
  if (!val) { return ""; }
 
  return isUpper ? val.toUpperCase() : val.toLowerCase();
  }
 }
 }
 }
 });

这里定义的格式和上面第一小节使用到的差不多，只是多了一个components的定义，这个就是组件的关键字，咋们来逐一分析下代码步骤；

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

2. methods属性中getBlogs方法用到了一段 var that = this; 这样的代码，这里的this是上面创建的 var blogApp = new Vue() 对象，她可以直接使用data中定义的博客数据数组blogs，因此有了下面通过jquery的getJSON获取webapi数据后，直接赋值给博客数组bolgs

3. components组件中自定义了一个名为“div-blog”的组件，参数名称是props定义的item；template是对应的模板，里面可以直接使用item来获取对应的参数值；

4. 这里也定义了一个filters，同样是转大小写的，写法可以忽略了，主要注意的地方这里局部的定义的主键里面使用filters的时候也同样是 {{item.Title | toUpperOrLower(false)}} 格式

好了通过上面总结注意点，咋们再来看下怎么在html中使用这个自定义的组件呢，如下整体html代码：

<div class="row" id="divBlogs">
 <div class="col-md-12">
 <button v-on:click="getBlogs" class="btn btn-default">查 询</button>
 <div-blog v-for="blog in blogs" v-bind:item="blog"></div-blog>
 <div style="position:fixed; right:0px; bottom:10px; width:44px; height:40px; background-color:#F8F8F8; font-weight:100; cursor:pointer;" id="toTop" onclick="toTop()">
 <img  title="返 回"   style="max-width:90%" src="http://121.42.208.152/images/top.png" alt="Vue.js learning example sharing" >
 </div>
 </div>
</div>

引用自定义组件的代码就一句：

 

这里的div-blog就是对应上面总结的第3点说的，自定义主键名称，需要注意的是如果自定义组件名称格式如divBlog(驼峰格式)，那么我们在html中使用格式就必须是div-Blog，通过‘-'分割开来，这个细节特别要注意不然页面不会有效果，好了说了这么多来看下运行的效果图：

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网!

更多Vue.js learning example sharing相关文章请关注PHP中文网！