vue.js - 类似于 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 参数(: 之后的这一点)并将它的值设置为 Vue 上的 binding value实例的数据属性。

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

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

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>

这是 fiddle :http://jsfiddle.net/craig_h_411/9xepfpw3/

其次，您仍然需要在data 中预先声明您的变量。