다음으로 시작되는 Vue.js

11195 단어 Vue.js

개시하다


Vue.js는 오픈 소스의 JavaScript 프레임워크입니다.
Vue.공식 사이트
일본어는 참고가 매우 풍부하기 때문에 이상하게 구글로 찾아보기보다는 이 방법으로 공부하는 것이 낫다고 생각합니다.

특징.


데이터 귀속은 분리된 데이터 원본과 사용자 인터페이스 사이에 교량 역할을 하지만 사용자 인터페이스의 변경이나 조작에 따라 데이터를 바꾸는 것을 양방향 데이터 귀속이라고 한다.
이러한 양방향 데이터를 위해 특별히 바인딩된 것은 Vue입니다.제이스입니다.
즉, >와 js 사이에서 데이터를 간단하게 진행할 수 있는 다리라는 인상을 준다.

지금 가져오기

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
이거!!!파일로 복사하기만 하면 됩니다!!!간단하다!!!
npm에 설치하는 방법도 있지만, CDN을 가볍게 만지기만 하면 된다고 생각해서 사랑을 끊었다.

시험해 보다

<div id="app"></div>
우선div 탭을 적당히 써서 id를 지정합니다.

Vue 인스턴스 생성

var vm = new Vue({
  // プロパティ
    el: '#app',
});
모든 Vue 응용 프로그램은 Vue 함수를 사용하여 새 Vue 인스턴스를 생성하여 시작합니다.
상기 코드는 다음과 같은 속성이 응용 프로그램에서 통용되는 것을 나타낸다.
그나저나 여기서 반을 지정하면 그 반 이름이 독특한 상황에서만 움직인다.여러 개의 지정된 반에는 적용되지 않도록 주의해라.

옵션/데이터


index.html
<html>
    <head>
        <link rel="stylesheet" href="css/index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            こんにちは、{{ name }}さん！
            <p>所持品</p>
            <li v-for="item in items">
                {{ item.name }}
            </li>
        </div>
        <script src="js/index.js"></script>
    </body>
</html>
js/index.js
var app = new Vue({
    el: '#app',
    data: {
        name: '勇者',
        items: [
            { name: 'ポーション' },
            { name: 'どくけし' },
            { name: 'エーテル' },
        ]
    }
});
【출력 결과】

...이런 느낌으로 데이터를 js에서 wo로 전달할 수 있다.

지시성


위 > 파일의 4<li>꼬리표에 v-for라고 쓰여 있는데 이것은 Vue입니다.js의 디렉터리나 '탭에 삽입해서 더 편리한 기능을 사용할 수 있습니다.다음은 제가 주요한 지도를 소개하고 싶습니다.

요소 컨텐트를 덮어쓰는 텍스트

<div id="sample">
    <div v-text="hoge"></div>
    <div>HOGEHOGE</div>
</div>

<script>
  var vm = new Vue({
    el: '#sample',
    data: {
      hoge: 'HOGEHOGE',
    }
  });
</script>
결실
HOGEHOGE
HOGEHOGE

v-for: 원소를 그룹에 비추기


<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
</script>
결실
・Foo
・Bar

v-show: 전환 트리거 보이기

<div v-show="foo">表示されます</div>
<div v-show="bar">表示されません</div>

<script>
var vm = new Vue({
    el: '#sample',
    data: {
      foo: true,
      bar: false,
    }
  });
</script>
결실
나타내다

귀속값의 진위값에 따라 요소를 삽입하거나 삭제합니다

<div v-if="foo">表示されます</div>
<div v-if="bar">表示されません</div>

<script>
var vm = new Vue({
    el: '#sample',
    data: {
      foo: true,
      bar: false,
    }
  });
</script>
결실
나타내다

DOM 이벤트에 가입하여 이벤트 발생 시 JavaScript 실행

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
   <p>このボタンは {{ counter }} 回クリックされました。</p>
</div>

<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
</script>
결실

클릭 횟수를 간단하게 기록하는 기능을 실현할 수 있다.
이번엔 여기까지.
목록에 관해서는 정말 많으니 공식 참고를 참고할 수 있습니다.
다음에 더 깊이 있는 내용을 쓰겠습니다.
Python, Azure IoT 및 Power 애플리케이션을 사용하여 명절 조명 제어
보잘것없는 브라우저 오류?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage