이번에는 Vue 구성 및 라우팅 사용에 대한 요약을 가져오겠습니다. Vue 구성 및 라우팅 사용에 대한 주의사항은 무엇인가요?
1. 구성요소의 세 가지 장착 방법
자동 장착
var app3 = new Vue({ el: '#app-3', data: { seen: true } })
수동 장착
// 可以实现延迟按需挂载 <p id="app"> {{name}} </p> <button onclick="test()">挂载</button> <script> var obj= {name: '张三'} var vm = new Vue({ data: obj }) function test() { vm.$mount("#app"); }
// Vue.extend()创建没有挂载的的子类,可以使用该子累创建多个实例 var app= Vue.extend({ template: '<p>{{message}}</p>', data: function () { return { message: 'message' } } }) new app().$mount('#app') // 创建 app实例,并挂载到一个元素上
2. 라우팅을 통해 매개변수를 전달하는 방법: h =>
render:h=>h(App)는 ES6의 화살표 함수 작성 방법으로, render:function(h){return h(App);}과 동일합니다.1. this는 이것을 래핑하는 함수 외부의 객체를 가리킵니다.
2.h는 vue 생태계의 일반 관리인 creatElement의 별칭입니다.
3.template:'
전자는 태그를 식별하고, 후자는 템플릿 아래의 ID를 앱의 p로 직접 구문 분석합니다(템플릿의 존재를 무시함)
<p> <!-- query要用path来引入,params要用name来引入,故不能写为 :to="{path:'/login',params: {isLogin: true}} --> <!-- 跳转路由时用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: '/login', query: {isLogin : true}}); --> <!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; --> <router-link :to="{name:'login',params: {isLogin: true}}">亲,请登录</router-link> <router-link :to="{name:'login',params: {isLogin: false}}">免费注册</router-link> </p> <!-- 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view>4. of Vue.nextTick()
DOM 관련 작업은 DOM이 렌더링되었는지 확인하기 위해 이 함수의 콜백에 작성됩니다. nextTick의 출처:
VUE의 데이터 기반 뷰 업데이트로 인해 비동기식입니다. 즉, 데이터가 수정되면 뷰가 즉시 업데이트되지 않지만 뷰를 균일하게 업데이트하기 전에 동일한 이벤트 루프의 모든 데이터 변경이 완료될 때까지 기다립니다.nextTick 트리거 타이밍:
동일한 이벤트 루프에서 데이터가 변경된 후 DOM은 업데이트를 완료하고 nextTick(콜백)의 콜백이 즉시 실행됩니다.응용 시나리오:
뷰가 업데이트된 후 새 뷰를 기반으로 작동해야 합니다. Vue생명주기
의 Created() 후크 함수에서 수행되는DOM 작업은 Vue.nextTick()의
콜백 함수에 배치되어야 합니다. 그 이유는 create() Hook 함수가 실행될 때 실제로 DOM이 전혀 렌더링되지 않고, 이때의 DOM 작업이 헛되기 때문에 DOM 작업을 위한 js 코드를 Vue에 넣어야 하기 때문입니다. nextTick()의 콜백 함수에서. 이에 대응하는 것이 탑재된 Hook 함수인데, 이 Hook 함수가 실행되면 모든 DOM 탑재 및 렌더링이 완료되므로 이 Hook 함수에서 DOM 작업을 수행하는 데에는 문제가 없습니다.
데이터 변경 후 작업을 수행해야 하고, 이 작업에 데이터 변경에 따라 변경되는 DOM 구조를 사용해야 하는 경우 이 작업을 Vue.nextTick()의 콜백 함수에 넣어야 합니다. 이벤트 루프에 대한 간략한 요약: 동기 코드 실행 -> 비동기
queue를 찾아 실행 스택으로 푸시하고 콜백1을 실행합니다. [이벤트 루프 1] -> 실행 스택에 넣고 callback2[이벤트 루프 2]를 실행합니다. 즉, 각 비동기 콜백은 결국 자체적인 독립 이벤트 루프를 형성합니다. nextTick의 기원과 결합하여 각 이벤트 루프에서 nextTick이 트리거되는 타이밍을 추론할 수 있습니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다음 페이지의 다른 관련 기사에 주목하세요. PHP 중국어 웹사이트! 추천 자료:
Vue-cli+webpack은 프로젝트 오류 보고를 생성합니다.
jquery fullpage 플러그인이 헤더와 테일을 작동하는 방법
위 내용은 Vue 구성 및 라우팅 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!