이 글은 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로 직접 구문 분석합니다(템플릿의 존재를 무시함) DOM 관련 작업은 DOM이 렌더링되었는지 확인하기 위해 이 함수의 콜백에 작성됩니다. nextTick의 출처: nextTick 트리거 타이밍: 응용 시나리오: 데이터 변경 후 작업을 수행해야 하고, 이 작업에 데이터 변경에 따라 변경되는 DOM 구조를 사용해야 하는 경우 이 작업을 Vue.nextTick()의 콜백 함수에 넣어야 합니다. 이벤트 루프에 대한 간략한 요약: 관련 기사: 단위 테스트 및 E2E 테스트에 Angular CLI를 사용하는 방법 빌드 및 서비스에 Angular CLI를 사용하는 방법에 대한 자세한 설명 위 내용은 VUE 핵심 이슈 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!<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>