vue.js 初体验之Chrome 插件开发实录

var typeSelect = new Vue({
  el: 'body',
  data: {
  selected: 'cols-center',
  cssText:{
   'cols-center' : 'nr-webkit-justify-content: center;nr-ms-flex-pack: center;nrjustify-content: center;',
   'cols-space-between' : 'nr-webkit-justify-content: space-between;nr-ms-flex-pack: justify;nrjustify-content: space-between;',
   'cols-space-around' : 'nr-webkit-justify-content: space-around;nr-ms-flex-pack: distribute;nrjustify-content: space-around;'
  },
  options: [
   { text: '居中对齐', value: 'cols-center'},
   { text: '两端对齐', value: 'cols-space-between'},
   { text: '间隔相等', value: 'cols-space-around'}
  ] },
 computed:{
  cssMsg:function(){
   console.log(this)
   return this.cssText[this.selected];
  }
 }
})

最后在html中绑定通过computed方法得到数据也就是CSS：

<div class="resule-code">
  <pre class="code-display">
   <code class="code-lang">
    {{ cssMsg }}
   </code>
  </pre>
  </div>

开发好之后，可以直接在chrome中运行来调试。打开扩展面板，勾选开发者模式，然后加载刚开发扩展所在的目录就可以直接运行了。

完整的源代码已上传在附件，可以下下来直接运行。

一个简单的插件就完成了，通过这一个简单的chrome插件就可以体验到vuejs在web开发中简单、优雅的魅力，还有什么理由不用起来呢。

以上所述是小编给大家介绍的vue.js 初体验之Chrome 插件开发实录，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！