집 >웹 프론트엔드 >JS 튜토리얼 >vue.js 프로그레시브 프레임워크 사용에 대한 자세한 설명

vue.js 프로그레시브 프레임워크 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-17 14:51:272401검색

이번에는 vue.js 프로그레시브 프레임워크 사용에 대한 자세한 설명을 가져왔습니다. vue.js 프로그레시브 프레임워크 사용에 대한 자세한 설명에서 주의사항은 무엇인가요?

Vue.js는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 다른 헤비급 프레임워크와 달리 Vue는 최소 비용을 기본적으로 채택하고 점진적으로 채택 가능한 디자인을 채택합니다. 뷰 핵심 라이브러리는 뷰 레이어에만 중점을 두고 있으며 다른 타사 라이브러리 또는 기존 프로젝트와 쉽게 통합됩니다. 반면 Vue 생태계에서 지원하는 단일 파일 구성 요소 및 라이브러리와 결합하면 Vue 또한 복잡한 단일 페이지 애플리케이션을 위한 강력한 드라이버를 완벽하게 제공할 수 있습니다.

Vue.js는 기능과 구문이 일부 업그레이드되고 수정되어 2.x로 업데이트되었습니다. 이 문서에서는 먼저 기본 내용을 소개합니다.

1, 초보자 가이드

vue의 사용은 매우 간단합니다. vue.js 또는 vue.min.js를 다운로드하여 직접 가져옵니다.

2. vue 시작하기

2.1 선언적 렌더링

Vue.js의 핵심은 간결한 템플릿 구문을 사용하여 선언적으로 데이터를 DOM으로 렌더링할 수 있다는 것입니다.

<p id="app">
 {{ message }}
</p>
var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

이렇게 입력됩니다: Hello Vue!

첫 번째 Vue 애플리케이션을 생성했습니다! 이는 문자열 템플릿을 렌더링하는 것과 매우 유사해 보이지만 Vue는 뒤에서 많은 작업을 수행합니다. 이제 데이터와 DOM 이미 서로 연결되어 있으므로 모든 데이터와 DOM은 반응적입니다. 이 모든 것을 어떻게 명확하게 이해할 수 있습니까? 브라우저에서 JavaScript를 켜기만 하면 됩니다. 콘솔(이제 현재 페이지에서 열림)을 열고 app.message 값을 설정하면 위 예제에서 렌더링된 DOM 요소가 그에 따라 업데이트되는 것을 볼 수 있습니다.

텍스트 보간 외에도 다음과 같은 방식으로 DOM 요소 속성을 바인딩할 수도 있습니다.

<p id="app-2">
 <span v-bind:title="message">
 鼠标悬停此处几秒，
 可以看到此处动态绑定的 title！
 </span>
</p>
var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '页面加载于 ' + new Date().toLocaleString()  }
})

몇 초 동안 마우스를 움직이면 동적 프롬프트를 볼 수 있습니다.

여기서 우리는 새로운 것을 만난다. 표시되는 v-bind 속성을 지시어라고 합니다. 지시문에는 Vue에 의해 생성되었음을 나타내기 위해 v- 접두사가 붙습니다. 특별한 속성이 제공됩니다. 짐작할 수 있듯이 렌더링된 DOM에서 특수한 반응 동작을 생성합니다. 간단히 말해서, 이 지시문이 하는 일은 다음과 같습니다: "이 요소의 제목 속성을 다음과 일치시킵니다. Vue 인스턴스의 메시지 속성은 관련성을 유지하고 업데이트됩니다."

브라우저의 JavaScript 콘솔을 다시 열고 app2.message = 'Some new message'를 입력하면 제목 속성에 바인딩된 HTML이 업데이트된 것을 다시 볼 수 있습니다.

2.1 조건 및 루프

요소 표시를 제어하는 것도 매우 간단합니다.

<p id="app-3">
 <p v-if="seen">现在你可以看到我</p>
</p>
var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

ˆ콘솔에 app3.seen = false를 계속 입력하면 범위가 사라지는 것을 볼 수 있습니다.

이 예에서는 data를 텍스트 및 속성뿐만 아니라 DOM 구조에도 바인딩할 수 있음을 보여줍니다. 또한 Vue는 Vue가 요소를 삽입/업데이트/삭제할 때 자동으로 전환 효과를 사용할 수 있는 강력한 전환 효과 시스템을 제공합니다.

각각 고유한 특수 기능을 가진 다른 명령이 있습니다. 예를 들어, v-for 지시문은 배열의 데이터를 사용하여 항목 목록을 표시할 수 있습니다:

<p id="app-4">
 <ol>
 <li v-for="todo in todos">
  {{ todo.text }}
 </li>
 </ol>
</p>
var app4 = new Vue({
 el: '#app-4',
 data: {
 todos: [
  { text: '学习 JavaScript' },
  { text: '学习 Vue' },
  { text: '创建激动人心的代码' }
 ]
 }
})

3, vue 인스턴스

모든 Vue 애플리케이션은 Vue 함수를 통해 새로운 Vue 인스턴스를 생성하는 것으로 시작됩니다:

var vm = new Vue({
 // 选项
})

MVVM 패턴을 완전히 따르지는 않지만 Vue의 디자인은 여전히 MVVM 패턴에서 영감을 받았습니다. 관례적으로 Vue 인스턴스를 나타내기 위해 일반적으로 변수 vm(ViewModel의 약어)을 사용합니다.

3.1데이터 및 방법

Vue 인스턴스를 생성하면 데이터 객체에서 발견된 모든 속성이 Vue의 반응형 시스템에 추가됩니다. 이러한 속성의 값이 변경될 때마다 뷰는 "반응"하고 해당하는 새 값으로 업데이트됩니다.

rreee

데이터 개체가 변경될 때마다 뷰가 다시 렌더링되도록 트리거됩니다. 인스턴스가 생성된 경우 데이터에 이미 존재하는 속성만 반응적이라는 점은 주목할 가치가 있습니다. 즉, 인스턴스가 생성된 후 새 속성을 추가하는 경우입니다. 예:

vm.b = 'hi'

然后，修改 b 不会触发任何视图更新。如果你已经提前知道，之后将会用到一个开始是空的或不存在的属性，你就需要预先设置一些初始值。例如：

data: {
 newTodoText: '',
 visitCount: 0,
 hideCompletedTodos: false,
 todos: [],
 error: null
}

除了 data 属性， Vue 实例还暴露了一些有用的实例属性和方法。这些属性与方法都具有前缀 $，以便与用户定义(user-defined)的属性有所区分。例如：

var data = { a: 1 }
var vm = new Vue({
 el: '#example',
 data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
 // 此回调函数将在 `vm.a` 改变后调用
})

3.2vue实例的声明周期

vue实例的声明周期是一个很重要的概念，理解之后可以通过它实现很多功能。

看下这段代码。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <p id="container">我的声明周期，大家看吧！</p>
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
  //以下代码时显示vm整个生命周期的流程
  var vm = new Vue({
   el: "#container",
   data: {
    test : 'hello world'
   },
   beforeCreate: function(){
    console.log(this);
    showData('创建vue实例前',this);
   },
   created: function(){
    showData('创建vue实例后',this);
   },
   beforeMount:function(){
    showData('挂载到dom前',this);
   },
   mounted: function(){
    showData('挂载到dom后',this);
   },
   beforeUpdate:function(){
    showData('数据变化更新前',this);
   },
   updated:function(){
    showData('数据变化更新后',this);
   },
   beforeDestroy:function(){
    vm.test ="3333";
    showData('vue实例销毁前',this);
   },
   destroyed:function(){
    showData('vue实例销毁后',this);
   }
  });
  function realDom(){
   console.log('真实dom结构：' + document.getElementById('container').innerHTML);
  }
  function showData(process,obj){
   console.log(process);
   console.log('data 数据：' + obj.test)
   console.log('挂载的对象：')
   console.log(obj.$el)
   realDom();
   console.log('------------------')
   console.log('------------------')
  }
 </script>
</html>

通过控制台的打印效果可以看出来，实例化 vue 对象大致分为创建vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段，，注意每个阶段都有对应的钩子，我们可以通过对这些钩子进行操作，达成一些功能。虽然初学者用不太上，但是提前了解一下还是好的，到时候碰到实际功能要能想得到生命周期的钩子。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

vue.js 프로그레시브 프레임워크 사용에 대한 자세한 설명

관련 기사