Vue.js有什么用-创新互联
这篇文章主要介绍Vue.js有什么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联建站 是由多位在大型网络公司、
广告设计公司 的优秀设计人员和策划人员组成的一个具有丰富经验的团队，其中包括网站策划、网页美工、网站程序员、网页设计师、平面广告设计师、网络营销人员及形象策划。承接：
成都网站设计 、网站制作、网站改版、网页设计制作、网站建设与维护、网络推广、数据库开发,以高性价比制作企业网站、行业门户平台等全方位的服务。
首先，咋们要学习一个js框架，那么肯定要引入该框架的基础库，这里我创建一个页面并且引用官网的库是：
下面我们来看一段Vue的基础使用代码：
var app = new Vue({
el: "#appVue",
data: {
msg: "第一个vue",
}
}); 分析下代码，这个Vue需要的参数传递是一个{}对象；里面的el和data是参数名称；el对应的是咋们的页面上某个块元素的id（比如div，table的id属性）；data对应的是数据源；msg是咋们自定义的数据源名称；好了咋们再来看一下对应的html代码和效果图：
Vue - 学习大杂烩
效果图：
很明显我们初始化的数据msg(“第一个vue”)在input中体现出来了，细看一下这个input标签的属性多了一个v-model属性，并且她对应的值是咋们初始化定义的msg，由此可见v-model起到了数据绑定作用；好咋们再来吧数据值弄复杂点，在data中再增加一个json格式的数组如：
blogs: [
{ title: "webapi" },
{ title: "wcf" },
{ title: "mvc" }
] 然后咋们增加如下的html：
{{index}} - {{blog.title}}
直接刷新页面，看下效果图：
从结果能够看出咋们定义的数据，直接被遍历展示在了页面，再来分析下具体的代码，相比较普通的li元素，此时多了一个v-for属性，并且对一个的值有一个这样的语法规则 (obj,index) in arr ，就类似于for循环的写法并且还有一个遍历编号index，有了循环那肯定需要把值展示出来，这个时候可以看到li元素子级里面的写法是 {{index}} - {{blog.title}} ，来分析下写法规则：
1. {{}}是输出文本的格式，其中包含了要输出的对象
2. 参数index对应就是v-for里面的index，对应的值是遍历的序号，从0开始
3. blog.title对应的是v-for里面的blog，和她对应的自定义属性title
由上面{{}}数据绑定写法，不得不引出我们对她的好奇心，这种写法其实在很多js数据绑定框架中都相同（比如：angularjs），下面我们来做一个相加的小例子来更深刻记住这种写法，首先在刚才的data属性中增加两个属性x和y：
data: {
msg: "第一个vue",
blogs: [
{ title: "webapi" },
{ title: "wcf" },
{ title: "mvc" }
],
x: 444,
y: 2
}, 然后增加如下html代码：
属性页面执行下效果：
由此能够看出 {{x * y}} 允许表达式，并且当我文本框中的x或y值修改后，此{{x*y}}会自动重新计算，有点类似于我们自己写的js计算后重新赋值到显示框中的概念；下面我们来看vue中怎么定义一个方法，这里用到她的一个属性methods，我们定义如下的代码：
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;
}
}
} 再来增加如下的html元素，
点击
好了再来看下运行的效果图并且多次点击按钮：
得到的效果是，一直在咋们 v-model="msg" 文本框中增加“我是”，这里得到的结论是按钮出发了我们定义在vue中methods中的方法showMsg，再来看下按钮上的这个属性 v-on:click 就是用来表示绑定点击事件的，这里的v-on:click可以缩写成@click，由于我在vs中的mvc试图模板不支持这种写法，所以本篇还是使用v-on这种写法来绑定事件；我们再来用一用她的过滤器，这里咋们还是在vue中增加如下filters的代码，定义一个大小写的过滤器：
filters: {
toUpper: function (val, isUpper) {
if (!val) { return ""; }
return isUpper ? val.toUpperCase() : val.toLowerCase();
}
} 为了方便看效果，我们修改上面的v-model="msg"的文本框代码如下：
我们在文本框中增加了一个 {{msg|toUpper(true)}} 写法，细心朋友能发下后面的toUpper就是我们刚才定义的过滤器的方法，传递了一个参数true，然后看下效果图：
通过使用不同参数的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: '' +
' ' +
' {{item.Title | toUpperOrLower(false)}}' +
' ' +
' ' +
' {{item.Des}}' +
'
' +
' ' +
' 作者：{{item.NickName}} 发布时间：{{item.CreateTime}} 推荐：{{item.ZanNum}} 阅读：{{item.ReadNum}} 评论：{{item.CommiteNum}}' +
' ' +
' ',
filters: {
toUpperOrLower: function (val, isUpper) {
if (!val) { return ""; }
return isUpper ? val.toUpperCase() : val.toLowerCase();
}
}
}
}
});
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)}} 格式
