Vue.js의 상태 비저장 구성 요소 사용 소개

이 기사에서는 기능적 구성 요소에 대해 배우고 Vue의 워크플로에서 상태 비저장 구성 요소를 사용하는 방법을 배웁니다. Vue 애플리케이션 상태는 구성 요소의 동작을 결정하는 객체입니다. Vue 애플리케이션 상태는 구성 요소가 렌더링되는 방식이나 동적 상태를 나타냅니다.

시작하기 전에

다음이 필요합니다:

node.js 10.x 이상이 컴퓨터에 설치되어 있습니다. 터미널/명령 프롬프트에서 다음 명령을 실행하여 이 버전의 node.js가 있는지 확인할 수 있습니다.

node -v

• Visual Studio Code Editor(또는 유사한 코드 편집기)

• 컴퓨터에 최신 버전 설치

• 컴퓨터에 Vue CLI 3.0을 설치합니다.

이렇게 하려면 먼저 이전 CLI 버전을 제거합니다.

npm uninstall -g vue-cli

다음으로 새 버전을 설치합니다.

npm install -g @vue/cli

• Vue 시작 프로젝트 다운로드 여기서

• 다운로드한 프로젝트의 압축을 풉니다.

• 압축을 푼 파일로 이동하고 명령을 실행하여 모든 종속성을 최신 상태로 유지합니다.

npm install

소개: 상태와 인스턴스란 무엇입니까? Vue 애플리케이션 상태는 구성 요소의 동작을 결정하는 객체입니다. Vue 애플리케이션 상태는 구성 요소가 렌더링되는 방식이나 동적 상태를 나타냅니다. 동시에 vue 인스턴스는 요소를 나타내는 템플릿, 로드할 요소, 메서드 및 초기화 중 수명 주기 후크를 포함한 일부 옵션을 포함하는 뷰 모델입니다.

Vue 구성 요소

js의 구성 요소는 일반적으로 수동적입니다. vue.js에서 데이터 객체는 개념, 계산된 속성, 메서드 및 관찰자에 대한 다양한 옵션을 가질 수 있습니다. 또한 데이터 값이 변경되면 데이터 개체가 다시 렌더링됩니다. 반대로 기능적 구성 요소는 상태를 유지하지 않습니다.

기능적 구성요소

기본적으로 기능적 구성요소는 자체 구성요소를 갖는 기능입니다. 기능 구성 요소는 상태를 저장하거나 추적하지 않기 때문에 상태나 인스턴스가 없습니다. 또한 기능적 구성요소의 구성에 액세스할 수 없습니다. 기능적 구성 요소는 프레젠테이션을 위해 생성됩니다. Vue.js의 기능적 구성 요소는 React.js의 기능 구성 요소와 유사합니다. Vue에서 개발자는 컨텍스트를 전달하여 기능적 구성 요소를 사용하여 직접 깔끔한 구성 요소를 쉽게 구축할 수 있습니다.

구문 기능 구성 요소

공식 문서에 따르면 기능 구성 요소는 다음과 같습니다.

Vue.component('my-component', {
  functional: true,
  // Props are optional
  props: {
    // ...
  },
  // To compensate for the lack of an instance,
  // we are now provided a 2nd context argument.
  render: function (createElement, context) {
    // ...
  }
})

기능 구성 요소 만들기

기능 구성 요소를 만들 때 기억해야 할 주요 지침은 기능 속성입니다. 함수 속성은 구성 요소의 템플릿 섹션이나 스크립트 섹션에 지정됩니다. 템플릿 섹션 구문은 다음과 같습니다.

<template functional>
  <div> <h1 id="nbsp-hello-nbsp-world"> hello world</h1>
  </div>
</template>

스크립트의 속성을 다음과 같이 지정할 수 있습니다.

export default {
  functional: true,
  render(createElement) {
    return createElement(
      "button", 'Click me'
    );
  }
};

기능적 구성 요소가 중요한 이유는 무엇입니까?

기능적 구성 요소는 상태가 없고 발생하기 때문에 빠르게 실행될 수 있습니다. 데이터 값이 변경되면 동일한 초기화 및 재렌더링 과정을 거치지 않습니다. 대부분의 기능적 구성 요소는 루프 항목을 표시하거나 표시하는 데 유용합니다.

Demo

이 소개 데모에서는 Vue 템플릿이 포함된 단일 페이지 구성 요소 유형 데모와 기능 구성 요소에 대한 렌더링 기능 유형 데모를 볼 수 있습니다.

단일 페이지 기능 구성 요소

test.vue 파일을 열고 다음 코드 블록을 파일에 복사합니다.

<template functional>
  <div>
    <p v-for="brand in props.brands" :key="brand">{{brand}} </p>
  </div>
</template>
<script> 
export default {
  functional: true,
  name: &#39;Test&#39;,
  props: {
    brands: Array
  }
}
</script>

스크립트와 템플릿의 기능 표시기에 다음이 표시됩니다. 기능 구성 요소 . props는 여전히 전달될 수 있습니다. 이는 기능적 구성요소에서 전달될 수 있는 유일한 데이터 값입니다.

임시 데이터 소품도 재활용 가능합니다. test.vue文件并将下面的代码块复制到该文件中：

<template>
  <div id="app">
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <Test 
     :brands ="[&#39;Tesla&#39;, &#39;Bentley&#39;, &#39;Ferrari&#39;, &#39;Ford&#39;]">
    </Test>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test
  }
}
</script>
<style>
#app {
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

脚本和模板中的功能指示器显示这是一个功能组件。注意，仍然可以传递道具——它们是在功能组件中可以传递的惟一数据值。

暂时的数据道具持有也可以循环通过。

打开您的app.vue文件，将下面的代码块复制到其中:

npm run serve

这里，您将看到props引用与冒号一起使用。

使用以下命令在dev服务器中运行应用程序:

export default {
    functional: true,
    render(createElement, { children }) {
      return createElement("button", children);
    }
  };

你的浏览器的结果应该是这样的:

呈现函数方法

功能组件也可以包含呈现函数。

开发人员使用呈现函数来创建他们自己的虚拟DOM，而不使用Vue模板。

使用渲染函数在cars列表下创建一个新按钮。在你的项目文件夹中创建一个名为example.js

app.vue 파일을 열고 다음 코드 블록을 파일에 복사하세요.

<template>
  <div id="app">
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <Test 
     :brands ="[&#39;Tesla&#39;, &#39;Bentley&#39;, &#39;Ferrari&#39;, &#39;Ford&#39;]">
    </Test>
    <Example>
     Find More Cars
    </Example>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Example from &#39;./Example&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Example
  }
}
</script>
<style>
#app {
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

여기서 콜론과 함께 사용된 props 참조를 볼 수 있습니다.

다음 명령을 사용하여 개발 서버에서 애플리케이션을 실행하세요: 🎜

export default {
    functional: true,
    render(createElement, { data, children }) {
      return createElement("button", data, children);
    }
  };

🎜브라우저 결과는 다음과 같아야 합니다: 🎜🎜🎜🎜🎜🎜렌더링 함수 방법🎜🎜🎜🎜기능적 구성 요소에는 렌더링 기능도 포함될 수 있습니다. 🎜🎜개발자는 Vue 템플릿을 사용하지 않고도 렌더링 기능을 사용하여 자신만의 가상 DOM을 생성합니다. 🎜🎜렌더링 기능을 사용하여 자동차 목록 아래에 새 버튼을 만듭니다. 프로젝트 폴더에 example.js라는 새 파일을 만들고 다음 코드 블록을 파일에 복사합니다. 🎜

<template>
  <div id="app">
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <Test 
     :brands ="[&#39;Tesla&#39;, &#39;Bentley&#39;, &#39;Ferrari&#39;, &#39;Ford&#39;]">
    </Test>
    <Example @click="callingFunction">
     Find More Cars
    </Example>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Example from &#39;./Example&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Example
  },
  methods: {
    callingFunction() {
      console.log("clicked");
    }
  }
}
</script>

🎜이렇게 하면 기능 구성 요소에 렌더링 기능이 생성되어 버튼을 표시하고 하위 항목을 사용합니다. 요소의 노드를 버튼 텍스트로 사용합니다. 🎜🎜app.vue 파일을 열고 다음 코드 블록을 파일에 복사하세요.🎜

<template>
  <div id="app">
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <Test 
     :brands ="[&#39;Tesla&#39;, &#39;Bentley&#39;, &#39;Ferrari&#39;, &#39;Ford&#39;]">
    </Test>
    <Example>
     Find More Cars
    </Example>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Example from &#39;./Example&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Example
  }
}
</script>
<style>
#app {
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

如果再次运行该应用程序，您将看到find more cars（查找更多汽车）子节点现在是按钮的文本。示例组件在检查时显示为功能组件。

添加点击事件

您可以在组件上添加单击事件，并在根组件中包含该方法。但是，您需要render函数中的数据对象参数来访问它。

复制这个在你的example.js文件:

export default {
    functional: true,
    render(createElement, { data, children }) {
      return createElement("button", data, children);
    }
  };

现在，将单击事件添加到根组件中，Vue将识别它。将以下内容复制到您的app.vue文件:

<template>
  <div id="app">
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <Test 
     :brands ="[&#39;Tesla&#39;, &#39;Bentley&#39;, &#39;Ferrari&#39;, &#39;Ford&#39;]">
    </Test>
    <Example @click="callingFunction">
     Find More Cars
    </Example>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Example from &#39;./Example&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Example
  },
  methods: {
    callingFunction() {
      console.log("clicked");
    }
  }
}
</script>

除了上面的示例之外，您还可以在官方文档中列出的功能组件中使用其他参数。

结论

这个功能组件的初学者指南可以帮助您实现快速的表示，显示项目的循环，或者显示不需要状态的工作流的简单部分。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

위 내용은 Vue.js의 상태 비저장 구성 요소 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!