类似 VueJs 的 Angular ng-init

Question

我使用vuejs，有一段时间我需要在模板中创建新变量。

在角度我可以去：

<div ng-app="" ng-init="myText='Hello World!'">
<h1>{{myText}}</h1>

如何在vuejs 中实现？

谢谢！

Answer 1

真的不建议从模板初始化，但可以使用指令来做到这一点：

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
});

您可以像这样使用：

<div v-init:myvar="'foo'"></div>

所做的只是获取binding argument（在 之后的这一位:）并将其值设置binding value为 Vue 实例的数据属性。

这是 JSFiddle：http : //jsfiddle.net/craig_h_411/snpLtt8c/

不过有几个注意事项，首先binding.arg总是以小写形式传递，所以如果你想使用camelCase变量，你可能需要实现一些将kebab-case转换为camelCase的东西：

Vue.directive('init', {
  bind: function(el, binding, vnode) {

    // convert kebab-case to camelCase
    let arg = binding.arg.split('-').map((arg, index) => {
      return (index > 0) ? arg[0].toUpperCase() + arg.substring(1) : arg;
    }).join('');

    vnode.context[arg] = binding.value;
  }
});

标记

<div v-init:my-text="'Hello World'"></div>

这是小提琴：http : //jsfiddle.net/craig_h_411/9xepfpw3/

其次，您仍然需要在data.