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变量，你可能需要实现一些将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。

中预先声明变量

Answer 2

使用v-for：

，看起来有点看起来很有效但却非常有效的方法

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

Answer 3

对于那些希望具有相同功能但不初始化数据属性的对象，它在Vue实例上调用函数/方法，后者可以依次分配值或调用API，将其检出。

v-init指令

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 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
}

像VueJs一样的Angular ng-init

5 个答案: