Vue.js学习示例分享

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

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

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

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

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

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;
 }
 }
}

filters: {
 toUpper: function (val, isUpper) {
 if (!val) { return ""; }
 return isUpper "msg"的文本框代码如下：



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


我们在文本框中增加了一个 {{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", function (result) {
  if (!result) { return; }
  that.blogs = result;
 });
 }
 },
 components: {
 "div-blog": {
 props: ["item"],
 template: '<div class=" bs-callout bs-callout-danger">' +
  ' <h4>' +
  ' <a v-bind:href="item.Url" target="_blank">{{item.Title | toUpperOrLower(false)}}</a>' +
  ' </h4>' +
  ' <p>' +
  ' {{item.Des}}' +
  ' </p>' +
  ' <hr />' +
  ' <h5>' +
  ' 作者：<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>' +
  ' </h5>' +
  ' </div>',
 filters: {
  toUpperOrLower: function (val, isUpper) {
  if (!val) { return ""; }

  return isUpper "htmlcode">

<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="width:38px;height:38px;border:1px solid #ccc" src="/UploadFiles/2021-04-02/top.png">

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

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

                                
                                

                                    Vue.js 
                                

                                    标签：
                                        
Vue.js