ngVue

<p align="center">:警告: 对于Vue 3支持请使用ngVue3 :警告:</p> <p align="center"><a href="https://github.com/jaredmcateer/ngvue3">Github</a> | <a href="https://www.npmjs.com/package/@jaredmcateer/ngvue3">npm</a></p>

VueJS是一个用于构建具有可组合视图组件和响应式数据绑定的Web界面的库。ngVue受ngReact启发，是一个允许你在AngularJS应用程序中开发/使用Vue组件的Angular模块。ngVue可以在现有的Angular应用程序中使用，并帮助将应用程序的视图部分从Angular 1.x迁移到Vue 2。

这个项目的动机与ngReact类似：

AngularJS应用程序由于页面上大量的作用域观察者而遭受性能瓶颈，但VueJS提供了惊人的响应式数据绑定机制和其他优化
与控制器和视图之间的双向数据流不同，VueJS默认采用单向的父到子数据流，使应用程序更加可预测
VueJS提供了一种更简单的方式来组合Web界面，你可以利用VueJS 2中的函数式响应式编程。Angular指令引入了高学习障碍，如编译和链接函数，而且指令容易与组件混淆
VueJS社区提供了你想尝试的组件或UI框架
已经深入使用AngularJS应用程序无法轻易迁移，但你想尝试VueJS

安装

通过npm安装：

npm install ngVue

使用

ngVue是一个UMD模块（通用模块定义），因此它兼容CommonJS和AMD，同时支持浏览器全局变量定义。

首先，记得加载AngularJS 1.x、VueJS和ngVue：

// 通过`script`标签在页面上加载
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/ngVue/build/index.js"></script>

或者...

// CommonJS风格
const ng = require('angular')
const vue = require('vue')
require('ngVue')

// AMD风格
require(['angular', 'vue', 'ngVue'], function(ng, Vue) {
})

// ECMAScript模块风格
import angular from 'angular'
import vue from 'vue'
import 'ngVue'

然后将ngVue作为Angular应用的依赖项：

angular.module('yourApp', ['ngVue'])

特性

ngVue由指令vue-component、工厂createVueComponent和指令助手v-directives组成。它还提供了一些用于增强功能的插件。

vue-component是一个将数据委托给Vue组件的指令，以便VueJS可以使用相应的节点编译它
createVueComponent是一个将Vue组件转换为vue-component指令的工厂

ngVue确实支持VueJS指令，但目前它们只能在AngularJS模板中的Vue组件中使用。

v-directives是一个将vue指令应用于vue组件的指令

<!-- 这不会生效 -->
<div v-directives="hello"></div>

<!-- 但这样会生效... -->
<vue-component name="HelloComponent" v-directives="hello"></vue-component>
<!-- 或者... -->
<hello-component v-directives="hello"></hello-component>

vue-component指令

vue-component指令将vue组件包装成angular指令，以便在angular编译模板时可以创建和初始化vue组件。

首先需要创建一个Angular控制器来声明视图数据，如下所示：

const app = angular.module('vue.components', ['ngVue'])
  .controller('MainController', function () {
    this.person = {
      firstName: 'The',
      lastName: 'World'
    }
  })

然后声明一个Vue组件，如下所示：

const VComponent = Vue.component('hello-component', {
  props: {
    firstName: String,
    lastName: String
  },
  render (h) {
    return (
      <span>Hi, { this.firstName } { this.lastName }</span>
    )
  }
})

最后，使用value方法将Vue组件注册到Angular模块，如下所示：

app.value('HelloComponent', VComponent);

现在你可以在Angular模板中使用hello-component：

<body ng-app="vue.components">
  <div class="hello-card"
       ng-controller="MainController as ctrl">
    <vue-component name="HelloComponent"
                   v-props="ctrl.person"
                   watch-depth="value" />
  </div>
</body>

vue-component指令提供了三个主要属性：

name属性检查该名称的Angular可注入对象
v-props属性是一个字符串表达式，计算结果为一个对象，作为暴露给Vue组件的数据
v-props-*属性允许你命名从angular作用域提取的部分数据。vue-component将它们包装成一个新对象并传递给Vue组件。例如，props-first-name和props-last-name将在新对象中创建两个属性firstName和lastName作为组件数据

<vue-component v-props="ctrl.person" />
<!-- 等同于 -->
<vue-component v-props-first-name="ctrl.person.firstName" v-props-last-name="ctrl.person.lastName" />

watch-depth属性指示AngularJS将使用哪种监视策略来检测作用域对象的变化。可能的值如下：

值	描述
reference	(默认) 监视对象引用
collection	(很少使用) 与angular的`$watchCollection`相同，浅层监视对象的属性：对于数组，监视数组项；对于对象映射，监视属性
value	(很少使用) 深度监视对象内部的每个属性

注意

由于反应性系统的限制，watch-depth无法将作用域对象的所有变化传播到VueJS，但你可以在注意事项中阅读几种解决方案。
collection策略和value策略很少使用。作用域对象将被VueJS转换为响应式对象，因此对响应式作用域对象的任何更改都会触发视图更新。
不推荐使用value策略，因为它会导致大量计算。为了检测变化，Angular在每个摘要周期中复制整个对象并遍历其中的每个属性。

处理事件

可以通过绑定函数引用作为v-on-*来处理从Vue到AngularJS组件的事件：

app.controller('MainController', function ($scope) {
  this.handleHelloEvent = function (greetings) {
    console.log(greetings); // "Hello, World!"
  }
})

<vue-component v-on-hello-world="ctrl.handleHelloEvent"></vue-component>

const VComponent = Vue.component('hello-component', {
  methods: {
    helloFromVue() {
      this.$emit('hello-world', 'Hello, World!');
    }
  },
  render (h) {
    return (
      <button onClick={this.helloFromVue}></button>
    )
  }
})

$emit函数中的事件名称应使用kebab-case语法。

处理HTML属性

和普通的Vue组件一样，你可以从父级Angular组件向Vue组件传递HTML属性。父组件的class和style属性将与相应的Vue组件属性合并，而其他属性将被传递下去，除非它们与Vue组件自身模板中的属性冲突。请记住，当你传递除class和style属性之外的字面量字符串时，它们必须用引号括起来，例如data-value="'enabled'"。

angular.module("app")
  .directive("myCustomButton", createVueComponent => {
    return createVueComponent(Vue.component("MyCustomButton", MyCustomButton))
  })

<my-custom-button
  disabled="ctrl.isDisabled"
  class="excellent"
  tabindex="3"
  type="'submit'"
  v-props-button-text="'Click me'" />

<template>
<!-- tabindex、type、class和disabled将出现在button元素上 -->
<button>
  {{ buttonText }}
</button>
</template>

<script>
export default {
  name: "my-custom-button",
  props: ["buttonText"],
}
</script>

注意，使用inheritAttrs: false并将$attrs绑定到另一个元素也是支持的：

<template>
<div>
  <!-- tabindex和type应该出现在button元素上而不是父级div上 -->
  <button v-bind="$attrs">
    {{ buttonText }}
  </button>
  <span>其他元素</span>
</div>
</template>

<script>
export default {
  inheritAttrs: false,
  name: "my-custom-button",
  props: ["buttonText"],
}
</script>

createVueComponent工厂函数

createVueComponent工厂函数创建一个可重用的Angular指令，该指令绑定到特定的Vue组件。

例如，使用上面提到的vue-component指令，你必须用字符串名称注册每个Vue组件，然后重复编写<vue-component name="TheRegisteredName"></vue-component>。而使用这个createVueComponent工厂函数，你可以创建<name-of-vue-component></name-of-vue-component>指令，并简单地将导出的Vue组件应用到它们上。

该工厂函数返回一个普通的$compile选项对象，描述了如何使用VueJS编译Angular指令，它接受Vue组件作为第一个参数：

app.directive('helloComponent', function (createVueComponent) {
  return createVueComponent(VComponent)
})

另外，也可以向工厂函数提供由angular.value注册的Vue组件名称：

app.directive('helloComponent', function (createVueComponent) {
  return createVueComponent('HelloComponent')
})

组合式API

支持Vue 2组合式API插件，但有常见的限制，此外组件必须包含一个setup函数，否则无法很好地检测到它。

使用组合式API

export default Vue.component('my-component', {
  setup() {},
  render(h) {
    return (<div></div>)
  }
})

回退到选项式API

export default Vue.component('my-component', {
  render() {
    return (<div></div>);
  }
});

定义组合式API组件时不一定需要使用Vue.component，但如果没有setup方法，ngVue将无法链接它。

这样可以工作

export default {
  setup() {},
  render(h) {
    return (<div></div>)
  }
}

这样会出错

export default {
  render(h) {
    return (<div></div>)
  }
}

注意事项

ngVue将响应式系统引入脏检查机制，因此你应该了解它们如何协同工作，以及如何避免一些常见的陷阱。请在注意事项中阅读更多内容。

插件

ngVue简单但灵活，可以进行增强。请在插件中阅读更多内容。

ngVue

ngVue

目录

安装

使用

特性

vue-component指令

处理事件

处理HTML属性

createVueComponent工厂函数

组合式API

注意事项

插件

待办事项

编辑推荐精选

TRAE编程

商汤小浣熊

imini AI

Keevx

即梦AI

扣子-AI办公

蛙蛙写作

问小白

Transly

讯飞智文

探索AI的无限可能

推荐工具精选

TRAE编程

扣子-AI办公

讯飞文书

商汤小浣熊

讯飞绘文

讯飞绘镜

咔片PPT

AI云服务特惠

火山引擎

阿里云

腾讯云

华为云

百度智能云

AWS

关注微信公众号