Vuejs의 메소드 및 데이터 속성 사용

이 글에서는 Vue JS에서 메소드와 데이터 속성을 사용하는 방법을 소개하겠습니다.

참고로 우리는 Vue cli를 사용하여 프로젝트를 생성합니다.

프로젝트 만들기

다음 명령을 실행하여 vue 프로젝트를 빠르게 만들어 보겠습니다.

vue create vue-app

위 명령은 vue-app 폴더에 필요한 파일을 다운로드합니다.

cd vue-app을 사용하여 작업 디렉터리를 변경한 다음 즐겨 사용하는 코드 편집기를 사용하여 프로젝트 폴더를 엽니다. cd vue-app更改工作目录，然后使用你喜爱的代码编辑器打开项目文件夹。

在src文件夹中导航到App.vue文件并删除所有内容，然后用下面的代码替换。

App.vue

<template>
  <div>
    <h1>Hello Vuejs</h1>
  </div>
</template>

<script>
export default {};
</script>

<strong>data</strong>属性

在上面的代码中，我们将在<script>标签内导出默认的空对象，让我们将data属性添加到该空对象中。</script>

<script>
export default {
   data:function(){
       return {
           title: "Vuejs"
       }
   }
};
</script>

<strong>data</strong>：data属性值是一个返回对象的匿名函数。该对象中的每个属性都被添加到Vue反应系统中，这样，如果我们更改了该属性值，那么vuejs将使用更新的数据重新呈现dom。

让我们使用{{}}双花括号将title属性添加到模板标记中。

App.vue

<template>
  <div>
    <h1>Hello {{title}}</h1>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      title: "Vuejs"
    };
  }
};
</script>

在Vuejs中，我们需要使用双花括号{{js expression}}来传递JavaScript表达式。

让我们使用以下命令启动开发服务器。

npm run serve

你看到我们的{{title}}被Vuejs替换了吗?

methods属性

让我们使用methods属性创建第一个方法。methods属性值也是一个对象。

<script>
export default {
  data: function() {
    return {
      title: "Vuejs"
    };
  },
  methods:{
      welcomeMsg:function(){
          return `Welcome to ${this.title} world`
      }
  }
};
</script>

在上面的代码中，我们添加了一个返回字符串的welcomeMsg方法。

在methods内部，我们可以使用this.propertyname访问数据对象。

让我们在template标签中调用welcomeMsg

src 폴더의 App.vue 파일로 이동하여 모든 내용을 삭제하고 아래 코드로 대체하세요.

App.vue

<template>
  <div>
    <h1>Hello {{title}}</h1>
    <h2>{{welcomeMsg()}}</h2>
  </div>
</template>

data

Properties

위 코드에서는 <script> 태그 내부에 기본 공백을 내보냅니다. , 이 빈 객체에 data 속성을 추가해 보겠습니다. 🎜rrreee🎜🎜data🎜: 데이터 속성 값은 객체를 반환하는 익명 함수입니다. 이 객체의 모든 속성은 Vue 반응 시스템에 추가되므로 속성 값을 변경하면 vuejs는 업데이트된 데이터로 DOM을 다시 렌더링합니다. 🎜🎜<code>{{}} 이중 중괄호를 사용하여 템플릿 태그에 <code>title 특성을 추가해 보겠습니다. 🎜🎜<em>App.vue🎜🎜rrreee🎜Vuejs에서는 JavaScript 표현식을 전달하려면 이중 중괄호 <code>{{js 표현식}}를 사용해야 합니다. 🎜🎜다음 명령을 사용하여 개발 서버를 시작하겠습니다. 🎜rrreee🎜<img src="https://img.php.cn/upload/image/942/509/809/1555554495168130.png" title="1555554495168130.png" alt="Vuejs의 메소드 및 데이터 속성 사용 " />🎜🎜 <code>{{title}}가 Vuejs로 대체된 것을 보셨나요? 🎜🎜🎜<code>methods 속성 🎜🎜🎜 메서드 속성을 사용하여 첫 번째 메서드를 만들어 보겠습니다. 메소드 속성 값도 객체입니다. 🎜rrreee🎜위 코드에서는 문자열을 반환하는 <code>welcomeMsg 메서드를 추가했습니다. 🎜🎜<code>methods 내에서 <code>this.propertyname을 사용하여 데이터 개체에 액세스할 수 있습니다. 🎜🎜템플릿 태그에서 <code>welcomeMsg 메소드를 호출해 보겠습니다. 🎜rrreee🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜 🎜</script>

위 내용은 Vuejs의 메소드 및 데이터 속성 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!