이 글에서는 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属性添加到该空对象中。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script>
export default {
data:function(){
return {
title: "Vuejs"
}
}
};
</script></pre><div class="contentsignin">로그인 후 복사</div></div><p><strong>data</strong>：data属性值是一个返回对象的匿名函数。该对象中的每个属性都被添加到Vue反应系统中，这样，如果我们更改了该属性值，那么vuejs将使用更新的数据重新呈现dom。</p><p>让我们使用<code>{{}}</code>双花括号将<code>title</code>属性添加到模板标记中。</p><p><em>App.vue</em><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><template>
<div>
<h1>Hello {{title}}</h1>
</div>
</template>
<script>
export default {
data: function() {
return {
title: "Vuejs"
};
}
};
</script></pre><div class="contentsignin">로그인 후 복사</div></div><p>在Vuejs中，我们需要使用双花括号<code>{{js expression}}</code>来传递JavaScript表达式。</p><p>让我们使用以下命令启动开发服务器。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">npm run serve</pre><div class="contentsignin">로그인 후 복사</div></div><p><img src="https://img.php.cn/upload/image/942/509/809/1555554495168130.png" title="1555554495168130.png" alt="Vuejs의 메소드 및 데이터 속성 사용"/></p><p>你看到我们的<code>{{title}}</code>被Vuejs替换了吗?</p><p><strong><code>methods</code>属性</strong></p><p>让我们使用methods属性创建第一个方法。methods属性值也是一个对象。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script>
export default {
data: function() {
return {
title: "Vuejs"
};
},
methods:{
welcomeMsg:function(){
return `Welcome to ${this.title} world`
}
}
};
</script></pre><div class="contentsignin">로그인 후 복사</div></div><p>在上面的代码中，我们添加了一个返回字符串的<code>welcomeMsg</code>方法。</p><p>在<code>methods</code>内部，我们可以使用<code>this.propertyname</code>访问数据对象。</p><p>让我们在template标签中调用<code>welcomeMsg</code></p> <code>src</code> 폴더의 <code>App.vue</code> 파일로 이동하여 모든 내용을 삭제하고 아래 코드로 대체하세요. <p><img src="https://img.php.cn/upload/image/704/657/842/1555554791623899.png" title="1555554791623899.png" alt="Vuejs의 메소드 및 데이터 속성 사용"/><em>App.vue</em></p><p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><template>
<div>
<h1>Hello {{title}}</h1>
<h2>{{welcomeMsg()}}</h2>
</div>
</template></pre><div class="contentsignin">로그인 후 복사</div></div><br><code>data<p></p></code><br>Properties<p></p>위 코드에서는 <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
