A, 뷰-CLI
(A) 빌드 환경을
설치 노드
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/다른 소스 설치 cnpm에서
npm install -g cnpm --registry=https://registry.npm.taobao.org설치 VUE 프로젝트 비계
cnpm install -g @vue/cli캐시 처리를 비 웁니다
npm cache clean --force # 第2、3步安装失败时，可以清空npm缓存，再重复执行失败的步骤
만들기 (b)는 프로젝트
프로젝트를 생성
# 1. 命令行式创建,自定义方式创建项目（选取Babel、Router、Vuex插件） vue create 项目名 # 2. 命令行键入图形化界面创建 vue ui명령 줄 시작 / 중지 프로젝트
npm run serve / cltr+c # 要提前进入项目根目录프로젝트를 포장
npm run build # 要在项目根目录下进行打包操作종속 파일 다운로드
cnpm install # 当项目移植到其他电脑时,node_moodules需要重新构建,需要通过该指令根据package.json文件下载依赖文件,
(C) 프로젝트 디렉토리 구조
V-PROJ 프로젝트
- node_moodules : 현재 프로젝트의 모든 종속 파일은 다른 컴퓨터에 이식 할 수 없습니다. 재구성
- 공공의
- favicon.ico의 : 페이지 탭 아이콘
- index.html을 : 현재 HTML 페이지 프로젝트
- SRC
- 자산 : 정적 자원 IMG, CSS, JS
- 구성 요소 : 위젯
- 보기 : 페이지 구성 요소
- App.vue : 루트 구성 요소
- main.js : 글로벌 스크립트 파일 (항목 프로젝트)
- 라우터
- 인덱스 : 스크립트 파일을 라우팅 (구성 및 라우팅 연결 URL 페이지 구성 요소 간의 매핑)
- 저장
- 하는 index.js : 창고 스크립트 파일 (vuex 플러그인 구성 파일, 데이터웨어 하우스)
- package.json : 저장 프로젝트 목록 JSON 파일 종속성
- readme.md
포트 프로파일 : vue.config.js
// 修改端口，没有可以自己新建，选做 module.exports={ devServer:{ port:8888 // 端口号 } }
(D) 뷰 조립체 (.vue 파일)
- 템플릿 : 오직 하나 개의 루트 태그가
export default {}: 스크립트 태그에 내보내기 구성 요소 개체scoped속성 : 스타일 속성은 구성 요소 내 스타일 대신 (구성 요소의 스타일을) 태그 추가 만 작업 범위- 라우터보기 태그 : 파일의 App.vue 루트 구성 요소 현재, 자리 표시 자 페이지 구성 요소
<template>
<div class="test">
</div>
</template>
<script>
export default {
name:"Test"
}
</script>
<style scoped>
</style>(E) 글로벌 스크립트 파일 main.js (프로젝트 입구)
import 别名 form '资源'- 필요한 공식 지지자들은 정적 파일의 사용 부하에 필요한
- @ : 절대 경로는 SRC 폴더를 나타냅니다
.$mount('app'): 마운트, 그리고 동등한 엘 회원을 탑재- 렌더링 : 인스턴스가 생성 뷰 때 자동 트리거 기능을 렌더링하는 렌더링 시스템 함수 파라미터의 함수이고, 그래서 DOM 컴포넌트 애플리케이션 루트 노드로 렌더링하도록, 기능 렌더링 렌더링 응용 프로그램을 통해 파라미터를 전달하는 함수 호출의 파라미터, 파라미터의 createElement를 나타낸다
import Vue from 'vue' // 加载vue环境
import App from './App.vue' // 加载根组件
import router from './router' // 加载路由环境
import store from './store' // 加载数据仓库环境
Vue.config.productionTip = false // 定义用户引导功能的开启，需要先定义
// 配置全局样式：@就代表src文件夹的绝对路径，官方提倡require加载静态文件
// import '@/assets/css/global.css'
require('@/assets/css/global.css')
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')다시 작성
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: function (readFn) {
return readFn(App);
},
});(VI) 뷰 요청 기간
- 브라우저 사용자 요청
- 라우터 플러그 매핑 User.vue 페이지 뷰 어셈블리
- 위젯 렌더링 User.vue 페이지 구성 요소 (하위 어셈블리) 좋은 구성 요소 폴더
- 그 다음에 조립체 User.vue App.vue (루트 요소)를 교체
<router-view />자리
둘째, 페이지 및 대량 참여 점프
(A) 점프 페이지
(1) 태그 점프
- 라우터 링크 태그 : 점프 라벨에 태그 대응을 라우팅 완료
- 매개 변수 : 포인터가 경로를 점프
<!-- 该标签完成路由跳转 -->
<router-link to="路由"></router-link>(2) 논리 점프
$router.push('路由')님의$router경로를 추가, 경로는 점프를 완료$router.go(NUM): 역사 기반의 완전한 앞뒤로 점프, NUM 앞으로 정수, NUM 뒤로 부정적이다
구성 및 파라미터 전달을 라우팅 (B)
(1)에는 경로 설정 파라미터 없다
일반 구성
// router/index.js路由配置文件中 const routes = [ { path: '/', name: 'home', component: Home }, ];리디렉션 구성
// router/index.js路由配置文件中 const routes = [ { path: '/home', redirect:"/" }, ];
(2) 라우팅 구성 매개 변수가
스플 라이스 쿼리 매개 변수
// 1.页面跳转 // (1) 标签跳转(router-link标签中) to="/user?pk=1" // (2) 逻辑跳转 this.$router.push('/user?pk=1') // 2. 路由配置 path:'/user' // 3.取值方式 this.$router.query.pk패킷 유형 알려진 매개 변수 PARAMS
// 1. 页面跳转 // (1) 标签跳转(router-link标签中) to='/user/1' // (2) 逻辑跳转 this.$router.push('/user/1') // 2. 路由配置 path:'/user/:pk' // 3. 取值方式 this.$router.params.pk
셋째, 후크의 라이프 사이클
(A) 개념
- 한 번에 노드를 만들 수있는 조립 방법의 파괴를 유발합니다
- 이 방법은 구성 요소 인스턴스 VUE의 구성원
(B) 방법
- beforeCreate () {} : 조립 트리거를 작성하기 전에
- 생성 () {} :이 구성 요소는 성공적으로 트리거 만듭니다,이 과정에서 데이터를 조작 할 수 있습니다, 배경 데이터를 수신, 중요한 방법
- beforeMount () {}로드 종료 트리거 이전 어셈블리
- } {) (장착 : 로딩 완료 트리거 조립, 매우 시간 데이터 요청을 소모하는 중요한 방법
- 파괴 ()는 {} : 성공적으로 파괴 할 때 트리거 어셈블리
네, JS 프로토 타입
(A) 프로토 타입 (객체 속성)
- 생성자 : 인기있는 단어, 그 함수는 함수 선언 A는
- 프로토 타입 객체 : 함수를 선언 한 후, 브라우저가 자동으로 특정 규칙에 따라 객체를 생성합니다는, 오브젝트가 호출됩니다 프로토 타입 객체입니다. 객체의 프로토 타입은 실제로의 메모리에 저장되고, 프로토 타입 객체는이 속성 생성자 ,이 생성자에이 속성 포인트를
- 함수 생성자 (선언 함수)가있을 것이다 선언 한 후에 원형의 속성 이 속성은 프로토 타입 객체 생성자에 대응하는 점은
(ii) 상기 프로토 타입 체인
- A1은 원형 체인이라는 객체의 프로토 타입 객체 인스턴스 사이에 접속되고
- 객체 (A1)를 생성 할 때 JS가 존재하는라는
_proto_기본 속성, 프로토 타입 객체 프로토 타입 함수 객체를 생성 가리키는 데 사용
대 (C) 코드
- 생성자는 prototype 속성을 가지고 있으며, A1 생성자가 존재하지 않습니다 자신의 프로토 타입 속성 밖으로 개체를 만드는 것입니다
- A1하지만은이
__proto__속성을 프로토 타입 객체 생성자 A와 수에 직접 접근이 속성을 호출 STU - 그런 다음, 생성자 생성자 A와 프로토 타입 객체를 통해 액세스 프로토 타입 속성에 대한 액세스 그래서
- 클래스 프로토 타입에 해당하는이 클래스는 속성에 접근 객체 밖으로에 의해 인스턴스화하는 속성을 추가
- 등등, 또한 위젯을 추가 할 수있는 글로벌 방법 Axios의, Axios의에 속성이 예 뷰 뷰 - CLI에 추가 할 수 있습니다
function A() {}
let a1 = new A();
let a2 = new A();
// 为A类添加原型 => 类似于类属性
A.prototype.num = 100;
console.log(a1.num); // 100
// ES6语法下类
class B {
constructor(name) {
this.name = name;
}
}
let b1 = new B('Tom');
let b2 = new B('Ben');
B.prototype.count = 666;
console.log(b1.count);
console.log(b2.count);
// 推导
Vue.prototype.$ajax = axios;