Jquery Vue.js使用xml提要

我开始使用Vue.js在我的个人网站上工作。现在我突然被卡住了。我想在我的杰基尔博客的页面上拍摄五篇最新文章

这就是为什么我要查看

http://todayilearned.dk/feed.xml

feed

但是我不知道如何在

console.log

中打印这三个变量

我该怎么做？（标题、链接和说明。）

我一直在犯这个错误

数据函数应该返回一个对象。（在组件中找到：）

var$=require（'jquery'）；
导出默认值{
数据：函数（）{
$（文档）.ready（函数（）{
变量饲料http://todayilearned.dk/feed.xml';
$.ajax（提要{
接受：{
xml:“应用程序/rss+xml”
},
数据类型：“xml”，
成功：功能（数据）{
$（数据）。查找（'item'）。每个（函数（）{
var el=$（本）；
console.log（'title:'+el.find（'title'）.text（））；
console.log（'link:'+el.find（'link'）.text（））；
console.log（'description:'+el.find（'description'）.text（））；
});
}
});
});
}
};;

---

整个代码

您会得到错误，因为无论您在做什么处理，您都应该在中进行，如下面所示

  <script>
  var $ = require('jquery');

  export default {
      data () {
        return {
          title: ''
        }
      },
      beforeMount () {
        var self = this
        $(document).ready(function () {
         var feed = 'http://todayilearned.dk/feed.xml';
         $.ajax(feed, {
           accepts: {
             xml: 'application/rss+xml'
           },
           dataType: 'xml',
           success: function (data) {
             $(data).find('item').each(function () {
               var el = $(this);
               self.title = el.find('title').text()
               console.log('title      : ' + el.find('title').text());
               console.log('link       : ' + el.find('link').text());
               console.log('description: ' + el.find('description').text());
             });
           }
         });
       });
     }
 };

var$=require（'jquery'）；
导出默认值{
数据（）{
返回{
标题：“”
}
},
安装前（）{
var self=这个
$（文档）.ready（函数（）{
变量饲料http://todayilearned.dk/feed.xml';
$.ajax（提要{
接受：{
xml:“应用程序/rss+xml”
},
数据类型：“xml”，
成功：功能（数据）{
$（数据）。查找（'item'）。每个（函数（）{
var el=$（本）；
self.title=el.find（'title'）.text（）
console.log（'title:'+el.find（'title'）.text（））；
console.log（'link:'+el.find（'link'）.text（））；
console.log（'description:'+el.find（'description'）.text（））；
});
}
});
});
}
};

是vue提供的众多功能之一，您可以在其中访问数据、计算属性和方法。您也可以根据需要选择其他挂钩

---

是定义vue实例变量的地方，该变量可在模板中反应性地使用。

您会收到错误，因为无论您在做什么处理，您都应该在中执行，如下所示

  <script>
  var $ = require('jquery');

  export default {
      data () {
        return {
          title: ''
        }
      },
      beforeMount () {
        var self = this
        $(document).ready(function () {
         var feed = 'http://todayilearned.dk/feed.xml';
         $.ajax(feed, {
           accepts: {
             xml: 'application/rss+xml'
           },
           dataType: 'xml',
           success: function (data) {
             $(data).find('item').each(function () {
               var el = $(this);
               self.title = el.find('title').text()
               console.log('title      : ' + el.find('title').text());
               console.log('link       : ' + el.find('link').text());
               console.log('description: ' + el.find('description').text());
             });
           }
         });
       });
     }
 };

var$=require（'jquery'）；
导出默认值{
数据（）{
返回{
标题：“”
}
},
安装前（）{
var self=这个
$（文档）.ready（函数（）{
变量饲料http://todayilearned.dk/feed.xml';
$.ajax（提要{
接受：{
xml:“应用程序/rss+xml”
},
数据类型：“xml”，
成功：功能（数据）{
$（数据）。查找（'item'）。每个（函数（）{
var el=$（本）；
self.title=el.find（'title'）.text（）
console.log（'title:'+el.find（'title'）.text（））；
console.log（'link:'+el.find（'link'）.text（））；
console.log（'description:'+el.find（'description'）.text（））；
});
}
});
});
}
};

是vue提供的众多功能之一，您可以在其中访问数据、计算属性和方法。您也可以根据需要选择其他挂钩

---

是定义vue实例变量的地方，该变量可在模板中反应使用。

谢谢！但是如何将数据从beforeMount钩子传输到视图？视图是否在同一文件中@MikeJakobsen我已经用一个样本更新了答案，请检查。谢谢！但是如何将数据从beforeMount钩子传输到视图？视图是否在同一文件中@MikeJakobsen我已经用一个样本更新了答案，请检查。