Angular ng-init like for VueJs

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（:之后的位）并将其值设置为 Vue 实例的数据属性上的binding value值。

以下是 JSFiddle：http://jsfiddle.net/craig_h_411/snpLtt8c/

不过，有几个

注意事项，首先binding.arg总是以小写形式传递，所以如果你想使用 camelCase 变量，你可能需要实现一些将烤肉串转换为 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 中预先声明您的变量。

Answer 2

对于那些想要相同功能但不初始化数据属性的人，它会在你的 Vue 实例上调用一个函数/方法，而该函数/方法反过来可以分配值或调用 API，请查看此内容。

V-初始化指令

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

示例 Vue 实例

new Vue({
    el: '#some-element',
    methods: {
        callApi: function () {
            // add your http api call here --.
       }
    }
});

在 HTML 中的用法

<div id="some-element" v-init="callApi"></div>

Answer 3

获得这种效果的略显笨拙但完全有效的方法是使用v-for：

<div v-for="myText in ['Hello World!']">
<h1>{{myText}}</h1>

Answer 4

这

适用于我复制ng-init的用例。此指令eval binding.value为期望值：

Vue.directive('init', {
    bind: function(el, binding /*, vnode*/) {
        console.log(binding.value); //# This line is optional, of course.
    }
});

例如：

<div v-init="somevar = 'someval'"></div>

感谢@craig_h因为他的代码是这个的基础

Answer 5

我通常通过在页面的HTML代码中添加脚本标签（在应用程序div之外）来做到这一点。

<script>
    var somevar = "somevalue";
    // or
    var someobj = {somekey1: "some value 1", somekey2: "some value 2};
</script>

然后在 Vue 应用的"挂载"回调中：

mounted() {
    this.somevar = window.somevar;
    // or:
    this.someobj = Vue.util.extend(this.someobj , window.someobj);
    // etc, you get the idea
}