프론트엔드 Js 프레임워크 Vue

모바일 개발 2023-07-01 09:50:32 독서 시간: null

1. Vue 소개

Vue는 jQuery와 같은 프런트 엔드 프레임워크이며 중심 아이디어는 데이터를 사용하여 UI를 구동하는 것입니다. jQuery를 사용하는 시대에 특정 DOM 요소의 값을 변경하려면 jQuery는 먼저 dom 객체를 얻은 다음 dom 객체의 값을 수정하는 등의 작업을 수행해야 하지만 Vue.js는 ViewModel에 집중합니다. MVVM 모델의 계층에서 Vue는 먼저 ViewModel 객체에 값을 바인딩한 다음 ViewModel 객체의 값을 수정합니다.Vue 프레임워크는 Dom 관련 작업을 자동으로 수행합니다.이런 종류의 dom 요소는 ViewModel의 값으로 변경됩니다 단방향 데이터 바인딩이라고 하는 객체, ViewModel 객체의 값도 dom 요소의 값으로 변경되는 경우 양방향 데이터 바인딩이라고 합니다.

2. vue.js 소개

Vue.js를 사용하기 전에 먼저 Vue.js를 도입해야 하는데 Vue.js를 도입하는 방법은 크게 local import, CDN import, Npm scaffold import 3가지가 있습니다.

1. vue.js를 로컬 가져오기로 다운로드

Vue.js 공식 홈페이지에서 직접 vue.js를 다운받을 수 있으며, <script>.html의 태그에 vue.js를 인용하여 사용할 수 있습니다.

개발 환경에서 가장 작은 압축 버전을 사용하지 마십시오. 그렇지 않으면 오류 프롬프트 및 경고가 표시되지 않습니다!

2. CDN 방식을 사용하여 vue.js 도입

예는 다음과 같습니다.

<!DOCTYPE html>
<html>
	<head>
		<title>Vue学习</title>
		<meta charset="utf-8">
		<script type="text/javascript" src="https://cn.vuejs.org/js/vue.js"></script>
	</head>
	<body>
		...
	</body>
</html>

3. 고궁 비계 설치 방법(권장)

이 방법을 사용하는 것이 좋습니다. 자세한 내용은 나중에 설명하고 이 문서에서는 건너뜁니다.

3. Vue 진입 사례

1. Vue의 작업 영역을 정의합니다.
2. 함수 클래스 라이브러리를 가져옵니다.
3. Vue 객체를 인스턴스화합니다.
4. 데이터 참조 - 보간 표현식을 사용합니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
	</head>
	<body>
		<!-- 1.定义vue工作的区域 -->
		<div id="app">
			<h1>vue的入门案例</h1>
			<!-- 4数据的引用 插值表达式-->
			{
   
   {hello}}
		</div>

		<!-- 2.导入函数类库 -->
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

		<!-- 3.实列化vue对象 -->
		<script>
			const app=new Vue({
				//关键字el：标识vue对哪个元素有效
				el: "#app",
				data: {
					hello:"你好Vue"
				}
			});
		</script>
	</body>
</html>

4. Vue 템플릿 구문

Vue.js는 개발자가 기본 Vue 인스턴스의 데이터에 DOM을 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용합니다. 본질적으로 Vue.js는 간결한 템플릿 구문을 사용하여 데이터를 선언적으로 DOM으로 렌더링할 수 있는 시스템입니다. 응답 시스템과 결합하여 애플리케이션 상태가 변경되면 Vue는 구성 요소를 다시 렌더링하는 최소 비용을 지능적으로 계산하여 DOM 작업에 적용할 수 있습니다.
Html에 포함된 구문 코드 Vue.js는 두 가지 유형으로 나뉩니다.

  • 보간 구문(이중 중괄호 표현식).
  • 지시어(v-로 시작).

1. Vue 보간 구문

  1. 기능: 태그 본문 콘텐츠를 구문 분석하는 데 사용됩니다.
  2. 구문: { {xxx}} , xxxx는 js 표현식으로 Html로 구문 분석됩니다.
<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>Vue插值语法</title>
		<!--1.引入vue.js-->
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<!--view视图-->
		<div id="app">
			{
   
   {message}}
		</div>
		<script>
			var vue=new Vue({
			        <!--关联id为app的元素-->
			        el:"#app",
			         /*model数据*/
			         data:{
			             message:"hello,vue"
			         }
			     });
		</script>
	</body>
</html>

2. Vue 명령 구문

  1. 기능: 태그 속성 구문 분석, 태그 본문 내용 구문 분석, 이벤트 바인딩.
  2. 예: v-bind:href = 'xxxx' , xxxx는 js 표현식으로 구문 분석됩니다.
<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>Vue指令语法</title>
		<!--1.引入vue.js-->
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<!--view视图-->
		<div id="app">
			<a v-bind:href="url">点我</a>
		</div>
		<script>
			var vue=new Vue({
			        el:"#app",
			         /*model数据*/
			         data:{
			           url: "http://www.baidu.com",
			         }
			     });
		</script>
	</body>
</html>

Vue에서 일반적으로 사용되는 내장 명령어:

지침 설명하다
v-텍스트 보간과 마찬가지로 원래 내용을 덮어쓰는 vue의 변수도 사용하며 보간은
v-html HTML 내용 표시
v-if true인 경우 현재 레이블이 페이지에 출력됩니다.
v-else false인 경우 현재 태그는 페이지에만 출력됩니다.
브이쇼 표시 스타일을 제어하여 표시/숨기기 제어
v-for 배열/객체에 대해 반복
브이온 Vue에서 제공하는 이벤트 바인딩 메커니즘, 약어: '@'
v-바인드 Vue에서 제공하는 속성 바인딩 메커니즘, 약어는 ':'입니다.
v-모델 양방향 데이터 바인딩
v-망토 깜박이는 보간식 문제 해결
v-바인드

v-bind는 바인딩 데이터 및 요소 특성에 대한
완전한 예 입니다.

<body>
    <div class="app">
        <a v-bind:href="url">点击</a>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
         }
     });
 </script>
</body>

참고: v-bind 다음에는 속성 이름=이 속성을 바인딩한다는 의미입니다 바인딩 후 해당 값은 vue의 데이터에서 찾아야 합니다. 콘솔에서 URL을 변경하면 해당 URL도 변경됩니다.
마찬가지로 이미지 src 특성과 하이퍼링크 클래스를 바인딩할 수도 있습니다.

<body>
    <div class="app">
        <a v-bind:href="url">点击</a>
        <img v-bind:src="imgsrc" width="200px"/>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
             imgsrc:"https://cn.vuejs.org/images/logo.png"
         }
     });
 </script>
</body>

알아채다:

<div class="app">
	  <a v-bind:href="url">点击</a>
</div>

일반적으로 우리는 v-bind를 다음과 같이 축약할 수 있습니다.

<div class="app">
  <a :href="url">点击</a>
</div>
v-if, v-else
<body>
    <div id="app">
        <div v-if="ok">YES</div>
        <div v-else>NO</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 ok:true,
             }
         });
     </script>
</body>
v-for
  1. 일반 배열에 대한 v-for 루프
    <body>
    <div id="app">
        <p v-for="(item,index) in list">{
     
     {item}}----索引:{
     
     {index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[1,2,3,4,5],
             }
         });
     </script>
</body>
  2. 객체 배열에 대한 v-for 루프
    <body>
    <div id="app">
        <p v-for="(user,index) in list">{
     
     {user.id}}---{
     
     {user.name}}-----索引:{
     
     {index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[
                    {id:1,name:'张三'},
                    {id:2,name:'李四'},
                    {id:3,name:'王五'}
                ],
             }
         });
     </script>
</body>
  3. v-for 루프 객체
    <body>
    <div id="app">
        <p v-for="(val,key,index) in user">值：{
     
     {val}}---键：{
     
     {key}}-----索引:{
     
     {index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                user:{
                    name:"张三",
                    age:"18",
                    sex:"男"
                }
             }
         });
     </script>
</body>

3. Vue 데이터 바인딩

단방향 데이터 바인딩

구문: v-bind:href ="xxx"또는 :href
기능으로 약칭: 데이터는 데이터에서 보기 페이지로만 흐를 수 있습니다.

양방향 데이터 바인딩

구문: v-mode:value="xxx" 또는 v-model="xxx"의 약어
기능: 데이터는 데이터에서 보기 페이지로 흐를 수 있을 뿐만 아니라 보기 페이지에서 데이터로 흐를 수 있습니다.
참고: v-model은 모든 form 요소의 value, checked, selected 속성의 초기 값을 무시하고 항상 Vue 인스턴스의 데이터를 데이터 소스로 사용합니다. 초기 값은 JavaScript를 통해 구성 요소의 데이터 옵션에 선언해야 합니다!
예:

<body>
    <div id="app">
        <input type="text"  v-model="message"/>{
   
   {message}}
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{message:'' }
         });
     </script>
</body>

4. Vue 이벤트 처리

v-on 지시문을 사용하여 DOM 이벤트를 수신하고 트리거될 때 일부 JavaScript 코드를 실행할 수 있습니다. v-on은 호출할 메서드 이름도 받을 수 있습니다.
전체 예:

<!DOCTYPE html>
<html xmlns:v-on="https://cn.vuejs.org/">
<head lang="en">
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       {
   
   {count}}
        <!--触发时运行一些 JavaScript 代码--> 
        <button v-on:click="count+=1">点我加1</button>
        <!--触发时调用js方法--> 
        <button v-on:click="sub">点我减1</button>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{count:1 },
             methods:{
                 sub:function(){
                    this.count-=1;
                 }
             }
         });
     </script>
</body>
</html>

알아채다:

  • v-bind는 다음과 같이 축약될 수 있습니다.
  • v-on: @로 축약할 수 있습니다.

5. 엘을 쓰는 두 가지 방법

첫 번째 작성 방법:

<script type="text/javascript">
    new Vue({
        el: '#root', //绑定id为root的容器
        data: {
       		//定义数据 
    	}
    })
</script>

두 번째 작성 방법:

<script type="text/javascript">
    const vm = new Vue({
        data: {
       		//定义数据 
    	}
    })
    vm.$mount('#root') //绑定id为root的容器
</script>

두 방법의 차이점은 첫 번째 방법은 Vue 객체를 생성할 때 컨테이너를 바인딩해야 하고, 두 번째 방법은 Vue 객체를 먼저 생성한 후 다른 작업을 수행한 후 컨테이너를 바인딩한다는 것입니다.

6. 데이터를 쓰는 두 가지 방법

데이터 개체는 개체 스타일 및 기능 스타일로 작성할 수 있습니다.
개체 스타일 쓰기:

<script type="text/javascript">
    new Vue({
        el: '#root',
        //定义data对象，然后在其中定义属性
        data: {
       		name:'Nicki Minaj' 
    	}
    })
</script>

기능적 글쓰기:

<script type="text/javascript">
    new Vue({
        el: '#root',
        //定义data函数，然后在返回值中定义属性
        data(){
            return{
                //返回值是定义的数据
                name:'Nicki Minaj' 
            }
        }
    })
</script>

알아채다:

  1. 컴포넌트를 사용할 때 데이터는 기능적으로 정의되어야 합니다.
  2. Vue에서 관리하는 함수는 화살표 함수로 작성할 수 없으며, 화살표 함수를 사용하면 함수 안의 가 윈도우를 의미 this하고 일반 함수 형식을 사용하면 thisVue 객체를 의미합니다.

5. Vue 컴포넌트 개발

1. Vue 컴포넌트화의 개념

컴포넌트(Component)는 재사용 가능한 Vue 인스턴스로 일부 공개 모듈을 추출하여 재사용을 위한 컴포넌트로 추출합니다(부분적(특정한) 기능적 효과를 달성하기 위해 사용되는 코드 모음(html/css/js/image) ...) ) 그런 다음 별도의 도구 구성 요소 또는 페이지로 작성하고 필요한 페이지에서 직접 가져오기만 하면 됩니다.

예를 들어 여러 페이지에서 동일한 것을 사용해야 하는 경우 페이지 머리글, 측면, 콘텐츠 영역, 바닥글, 업로드된 사진 등을 구성 요소로 만들어 코드 재사용률을 높일 수 있습니다. 구성 요소를 사용하려면 구성 요소 정의(구성 요소 생성) => 구성 요소 등록 => 구성 요소 사용(구성 요소 태그 작성)의 세 가지 주요 단계가 있습니다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 导入Vue包 -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>

<body>
  <class class="app">
    <!-- 3、使用组件 -->
    <my-com></my-com>
  </class>
  <script>
    // 1、创建组件构造器
    const myComponent = Vue.extend({
        template: `
          <div>
            <h2>组件标题</h2>
            <p>我是组件中的一个段落内容</p>
          </div>
        `,
      })
      // 2、注册组件，并且定义组件标签的名称
      Vue.component("my-com", myComponent)
      
      //创建vm....
  </script>
</body>
</html>

2. Vue는 구성 요소를 정의합니다(구성 요소 생성).

Vue.extend(options)를 사용하여 생성되었습니다. 옵션은 new Vue(options)가 전달될 때 전달된 옵션과 거의 동일하지만 몇 가지 차이점이 있습니다.

  1. 결국에는 모든 구성 요소가 vm에 의해 관리되고 vm의 el이 서비스할 컨테이너를 결정하므로 el을 작성하지 마십시오.
  2. 데이터는 함수로 작성해야 하며 함수는 구성 요소를 재사용할 때 데이터 참조 관계를 피하기 위해 매번 새 개체를 반환합니다.

구성 요소 속기를 정의합니다.

const book = Vue.extend(options)

다음과 같이 축약할 수 있습니다.

const book = options

3. Vue 등록 컴포넌트

구성 요소를 사용하려면 먼저 등록해야 합니다. 등록 방법에는 전역 등록과 로컬 등록이 있습니다.
1. 로컬 등록: 새로운 Vue에 의존할 때 구성 요소 옵션을 전달합니다.
2. 전역 등록: Vue.component('구성 요소 이름', 구성 요소)에 의존합니다.

글로벌 부품 등록

Vue.component() 등록
Vue.component()에 직접 등록된 구성 요소는 Vue의 모든 인스턴스에서 사용할 수 있는 전역 구성 요소입니다. Vue.component()를 호출하는 것은 이제 막 구성 요소 생성자를 구성 요소로 등록하고 구성 요소 레이블 이름을 지정하는 것입니다. 따라서 등록된 구성 요소의 레이블 이름과 구성 요소 생성자의 두 가지 매개 변수를 전달해야 합니다.

<!DOCTYPE html>
<html>
	<head>
		<title>vue组件测试</title>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 组件复用如下 -->
			<button-counter></button-counter>
			<br />
			<br />
			<button-counter></button-counter>
			<br />
			<br />
			<button-counter></button-counter>
		</div>
		<script type="text/javascript">
			// button-counter是组件名，
			    Vue.component('button-counter', {
			       // 和实例对象不一样，这里data不再返回对象，必须要是个函数，而且必须return
			      data: function() {
			        return {
			          count: 0
			        }
			      },
			      template: '<button @click="count++">You clicked me {
   
   { count }} times.</button>'
			    });
			    new Vue({
			      el: '#app'
			    });
		</script>
	</body>
</html>

참고: 버튼 카운터 구성 요소를 정의할 때 데이터는 다음 개체와 같이 개체가 아니라 함수여야 합니다.

data: {
  count: 0
};

각 인스턴스는 반환된 개체의 독립적인 복사본을 유지할 수 있기 때문입니다. 객체라면 매번 공유된 실제 열을 호출하므로 변경될 때 동시에 값이 변경됩니다. 공식 문서에는 이렇게 나와 있습니다. 구성 요소가 정의되면 구성 요소가 여러 개의 실제 열을 만드는 데 사용될 수 있기 때문에 데이터는 초기 데이터 개체를 반환하는 함수로 선언되어야 합니다. 데이터가 여전히 순수 개체인 경우 모든 실제 열은 동일한 데이터 개체에 대한 참조를 공유합니다. 데이터 함수를 제공함으로써 새 인스턴스가 생성될 때마다 데이터 함수를 호출할 수 있으므로 원본 데이터의 새 복사본인 데이터 객체를 반환할 수 있습니다.

Vue.extend의 ​​구성 객체
에 Vue.extend(options)를 등록합니다 . Vue.extend가 반환하는 것은 특정 구성 요소 인스턴스가 아닌 "확장 인스턴스 생성자"이며 일반적으로 Vue.component를 통해 구성 요소를 생성합니다.

  • Vue.extend()를 호출하면 구성 요소 생성자가 생성됩니다.
  • 일반적으로 구성 요소 생성자를 만들 때 들어오는 템플릿은 사용자 지정 구성 요소의 템플릿을 나타냅니다.
  • 템플릿은 구성 요소가 사용되는 위치에 표시되는 HTML 코드입니다.
<!DOCTYPE html>
<html>
	<head>
		<title>vue组件测试</title>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 组件复用如下 -->
			<button-counter></button-counter>
			<br />
			<br />
			<button-counter></button-counter>
			<br />
			<br />
			<button-counter></button-counter>
		</div>
		<!-- 全局组件在 id为app2下也能使用的 -->
		<div id="app2">
			<button-counter></button-counter>
		</div>
		<script type="text/javascript">
			var buttonCounter = Vue.extend({
			      name: 'button-counter',
			      data: function() {
			        return {
			          count: 0
			        }
			      },
			      template: '<button @click="count++">You clicked me {
   
   { count }} times.</button>'
			    });
			    /*
			      Vue.component 是用来全局注册组件的方法, 其作用是将通过 Vue.extend 生成的扩展实列构造器注册为一个组件 
			    */
			    Vue.component('button-counter', buttonCounter);
			    // 初始化实列app
			    new Vue({
			      el: '#app'
			    });
			    // 初始化实列app2
			    new Vue({
			      el: '#app2'
			    });
		</script>
	</body>
</html>

효과는 위와 동일합니다. 위에서 볼 수 있듯이 전역 컴포넌트는 '#app' 도메인뿐만 아니라 '#app2' 도메인에서도 사용할 수 있습니다. 이것이 글로벌 구성 요소와 로컬 구성 요소의 차이점입니다.

4. 일부 부품 등록

로컬 컴포넌트는 특정 VUE 객체 내부에서만 사용할 수 있는 컴포넌트로, 정의할 때는 객체 형태로만 정의하지만 VUE 객체의 컴포넌트에 통합하면 Vue 인스턴스가 되고, 가져온 Vue 인스턴스 내에서만 사용할 수 있습니다.
예를 들어:

import HelloWorld from './components/HelloWorld'
export default {
  components: {
      HelloWorld
  }
}

차이점: 전역 컴포넌트는 Vue.options.components에 마운트되고, 로컬 컴포넌트는 vm.$options.components에 마운트되므로 전역으로 등록된 컴포넌트를 임의로 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<my-button></my-button>
			<my-button></my-button>
			<my-button2></my-button2>
		</div>
		<div id="app1">
			<my-button></my-button>
			<!--在这里不能用 <my-button2></my-button2>-->
		</div>
		<script type="text/javascript">
			const temp = Vue.extend({
				template: `
			                <h2>Welcome to Vue</h2>
			            `
			})
			//全局组件
			Vue.component('myButton', temp);
			const app = new Vue({
				el: "#app",
				data: {},
				//局部组件
				components: {
					myButton2: temp
				}
			})
			const app1 = new Vue({
				el: "#app1",
			})
		</script>
	</body>
</html>

부분적으로 등록된 구성 요소

<div id="app">
	<child-component></child-component>
</div>
<script type="text/javascript">
	var child = {
	    template: "<h1>我是局部组件</h1>"
	  };
	  new Vue({
	    el: '#app',
	    components: {
	      "child-component": child
	    }
	  })
</script>

브라우저에서 다음과 같이 html 코드로 렌더링됩니다.

<div id='app'><h1>我是局部组件</h1></div>

위 코드는 부분 컴포넌트의 예시로, 부분 컴포넌트는 id가 'app'인 도메인에서만 사용할 수 있으며, 다른 id로는 접근할 수 없습니다. 다음 코드는 다음과 같습니다.

<div id="app">
	<child-component></child-component>
</div>
<div id="app2">
	<child-component></child-component>
</div>
<script type="text/javascript">
	var child = {
	    template: "<h1>我是局部组件</h1>"
	  };
	  new Vue({
	    el: '#app',
	    components: {
	      "child-component": child
	    }
	  });
	  new Vue({
	    el: '#app2'
	  })
</script>

위의 코드에서는 id가 '#app2'인 도메인에서 하위 구성 요소 구성 요소를 사용할 수 없으며 콘솔에 오류가 보고됩니다. 이 컴포넌트는 로컬 컴포넌트이기 때문에 '#app' 범위에서만 사용할 수 있습니다.

5. 컴포넌트 소개 및 사용(컴포넌트 태그 작성)

구성 요소 태그 정보:
첫 번째 작성 방법: <book></book>
두 번째 작성 방법:<book/>

비고: 스캐폴딩을 사용하지 않으면 후속 구성 요소를 렌더링할 수 없습니다. (다중 사용은 첫 번째만 렌더링할 수 있습니다)

구성 요소 이름 정보:
한 단어는 다음으로 구성됩니다.

  • 첫 번째 표기법(이니셜 소문자): book
  • 두 번째 쓰기(첫 글자 대문자): 책

여러 단어로 구성:

  • 첫 번째 글쓰기 방법(케밥 케이스 네이밍): my-book
  • 두 번째 작성 방법(CamelCase 명명): MyBook(Vue 스캐폴딩 지원 필요)

비고:
(1) 컴포넌트 이름은 가능한 한 HTML의 기존 요소 이름을 피합니다(예: h2 및 H2는 허용되지 않음).
(2) 이름 구성 항목을 사용하여 개발자 도구에 표시되는 구성 요소의 이름을 지정할 수 있습니다.

6. 단일 파일이 아닌 구성 요소 및 단일 파일 구성 요소

단일 파일 구성 요소(.vue) 대 단일 파일이 아닌 구성 요소(.html).

단일 파일이 아닌 구성 요소
  1. 템플릿은 힌트 없이 작성됩니다.
  2. 빌드 프로세스 없이 ES6를 ES5로 변환하는 방법은 없습니다.
  3. 구성요소용 CSS는 지원되지 않습니다.
  4. 실제 개발에서는 거의 사용되지 않습니다.
단일 파일 구성 요소

.vue 파일의 구성(3부분)

  1. 템플릿 페이지
<template>
    页面模板
</template>
  1. JS 모듈 객체
<script>
export default {
    data() {return {}}, methods: {}, computed: {}, components: {}
}
</script>
  1. 스타일
<style>
    样式定义
</style>

App.vue 파일, Vue에서는 공식 사이트에서 컴포넌트라고 부르는데, 단일 페이지는 구조, 스타일, 논리 코드가 모두 같은 파일에 쓰여져 있다는 것을 의미합니다. 이 파일을 가져올 때 해당 파일을 도입하는 것과 같습니다. 구조와 스타일 그리고 JS 코드,

<template>
	<div id="app">
		<img src="./assets/logo.png">
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
	  name: 'app'
	}
</script>

<style>
	#app {
	  font-family: 'Avenir', Helvetica, Arial, sans-serif;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  text-align: center;
	  color: #2c3e50;
	  margin-top: 60px;
	}
</style>

노드 측에서 .vue 파일을 인식할 수 있는 이유는 앞서 언급한 웹팩이 컴파일 과정에서 .vue 파일에서 html, js, css를 추출하여 새로운 별도의 파일을 합성하기 때문입니다.

6. Vue 컴포넌트의 가치 전달

구성 요소 간의 값 전달은 다음과 같은 상황으로 나뉩니다.

  1. 부모-자식 구성 요소의 값을 전달합니다.
  2. 형제 구성 요소 간에 값을 전달합니다.
  3. 조상 요소와 자손 요소 간에 값을 전달합니다.
    위의 상황에 대해 다음 표와 같이 해당 솔루션이 있습니다.
값을 전달해야 하는 구성 요소 관계 해결책
부모 -> 자식(조상 -> 후손) props, 消息总线, 发布订阅,provide/inject
자식 -> 부모(자손 -> 조상) 消息总线, 发布订阅, $refs,事件绑定($on/$emit)
형제 구성 요소 消息总线、发布订阅

1. 소품을 사용하여 값 전달

  1. 역할: 상위 구성 요소가 하위 구성 요소에 데이터를 전달하는 데 사용됩니다.
  2. 읽기 방법 1: 이름만 지정
    props: ['name', 'age', 'setName']

형식에는 다음 기본 생성자 중 하나가 있을 수 있습니다.

  • 끈
  • 숫자
  • 부울
  • 정렬
  • 물체
  • 날짜
  • 기능
  • 상징
  1. 읽기 방법 2: 이름 및 유형 지정
    props: {
 name: String, age: Number, setNmae: Function
}
  2. 읽기 방법 3: 이름/유형/필요성/기본값 지정
    props: {
name: {type: String, required: true, default:xxx}, }
예
<body>
    <div id="app">
        <!--组件：使用props把值传递给组件-->
        <blog-post v-for="item in items" v-bind:value="item"></blog-post>
    </div>
     <script>
         Vue.component("blog-post",{
             props:['value'],
             template:'<li>{
   
   {value}}</li>'
         });
         var app = new Vue({
             el:"#app",
             data:{
                 items:['张三','李四','王五']
             }
         });
     </script>
</body>

설명:
v-for="item in items": Vue 인스턴스에 정의된 items라는 이름의 배열을 순회하고 같은 수의 구성 요소를 만듭니다.
v-bind:value="item": 탐색된 항목을 구성 요소의 props에서 정의한 value 속성에 바인딩; = 기호 왼쪽의 값은 props에서 정의한 속성 이름이고 오른쪽 값은 통과된 값 항목 항목 항목 항목의 값입니다.

기본 원리

  1. 자식 구성 요소에서 부모 구성 요소의 상태 데이터를 직접 수정하지 마십시오.
  2. 데이터가 있는 곳에 데이터를 업데이트하는 동작(기능)이 정의되어야 합니다.

2. 컴포넌트 간 통신을 위한 Vue 커스텀 이벤트

바인딩 이벤트 모니터링
방법 1: v-on을 통한 바인딩:

@click="deleteTodo"

방법 2: $on()을 통해 사용자 정의 이벤트(delete_todo) 리스너 바인딩:

<TodoHeader ref="xxx"/>
this.$refs.xxx.$on('delete_todo', function (todo) {
this.deleteTodo(todo)
})

트리거 이벤트:

// 触发事件(只能在父组件中接收)
this.$emit(eventName, data)

참고: 이 방법은 자식 구성 요소가 부모 구성 요소에 메시지(데이터)를 보내는 경우에만 사용되며 세대 구성 요소 또는 형제 구성 요소 간의 통신에는 적합하지 않습니다.

3. 구성 요소 간 통신을 위한 메시지 구독 및 게시

  1. 뉴스 구독:
    PubSub.subscribe('msg', function(msg, data){})
  2. 발표하다:
    PubSub.publish('msg', data)

참고: 이 방법은 모든 관계 구성 요소 간의 통신(데이터)을 실현할 수 있습니다. 예를 들어 메시지를 구독하면 배열을 삭제할 수 있습니다.

예
mounted () {
   // 订阅消息(deleteTodo)
   PubSub.subscribe('deleteTodo', (msg, index) => {
      this.deleteTodo(index)
   })
}

methods: {
   deleteTodo (index) {
      this.todos.splice(index, 1)
   },
}

<button class="btn btn-danger" v-show="isShow" @click="deleteItem">删除</button>
deleteItem () {
   // 发布消息(deleteTodo)
   PubSub.publish('deleteTodo', this.index)
}

7. Vue 네트워크 통신 - Axios

1. 축 소개

  • npm을 사용하여 가져오기:
    npm install axios
  • cdn을 사용하여 가져오기:
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. 액시오스 소개

Axios는 데이터를 가져오기 위해 비동기 요청을 보내는 데 주로 사용되는 약속 기반 HTTP 라이브러리입니다 .

일반적인 방법:

  • 액시오스(구성)
  • axios.get(URL, [구성])
  • axios.post(URL, [데이터])
데이터 구성 공통 매개변수 보내기:
{
    url: '请求的服务器',
	method: '请求方式', // 默认是 get
    // GET请求参数
    params: {
    	参数名: 参数值
    },
	// POST请求参数, 如果使用axios.post,则参数在url之后直接书写,不需要该位置传递参数
    data: {
    	参数名: 参数值
    },
	// 响应数据格式,默认json
	responseType: 'json'
}
응답 데이터 공통 매개변수:
{
    data: {},		//真正的响应数据(响应体)
    status: 200,	//响应状态码
    statusText: 'OK',	 //响应状态描述
    headers: {},	//响应头
    config: {}		//其他配置信息
}

3. Axios는 Get 요청을 보냅니다.

var app = new Vue({
    el: "#app",
    data: {
        user: {}
    },
    //当页面加载完毕后
    created() { 
        //发送GET请求axios.get("请求路径",{ config });
       axios.get("请求路径",{
            //get请求参数
            params: {
                name:"zhangsan",
                age:23
            },
            //响应数据格式为"json"
            responseType: 'json'
        }).then(res => {
            //打印响应数据
            console.log(res);
            //把响应数据赋值给Vue中的user属性
            app.user = res.data;
        }).catch(err => {
            //打印响应数据(错误信息)
            console.log(err);
        });
    }
});

4. Axios가 Post 요청을 보냅니다.

var app = new Vue({
    el: "#app",
    data: {
        user: {}
    },
    //当页面加载完毕后
    created() { 
        //发送POST请求axios.post("请求路径",{ 参数 });
        axios.post("请求路径",{
                name:"zhangsan",
                age:23
            }).then(res => {
                console.log(res);
                app.user = res.data;
            }).catch(err => {
                console.log(err);
            });
    }
});

5.Vue 도메인 간 문제

도메인 간 문제의 원인

도메인 간 문제의 출현은 브라우저의 동일 출처 정책 문제로 인해 소위 동일 출처: 즉, 두 페이지가 동일한 프로토콜(프로토콜: http, https), 호스트(호스트) 및 포트를 갖습니다. (포트) 코어도 가장 기본적인 기능인데 동일출처 정책이 없으면 브라우저가 매우 위험하고
언제라도 공격을 받을 수 있습니다. 데이터를 얻기 위해 인터페이스를 요청할 때 "Access-Control-Allow-Origin"과 같은 오류 메시지가 나타나면 요청이 도메인 간임을 의미합니다. 일반적으로 도메인 간 문제는 백엔드에서 해결하며 물론 프런트엔드에서도 해결할 수 있습니다.

Vue에서 도메인 간 문제를 해결하는 방법
  1. vue.config.js에서 다음 코드 조각을 설정합니다.
module.exports = {
		dev: {
			// Paths    
			assetsSubDirectory: 'static',
			assetsPublicPath: '/',
			proxyTable: {
				// 配置跨域   
				'/api': {
					target: `http://www.baidu.com`,
					//请求后台接口        
					changeOrigin: true,
					// 允许跨域        
					pathRewrite: {
						'^/api': ''
						// 重写请求       
					}
				}
			},
		}

2. axioss 인스턴스 생성 시 baseUrl을 '/api'로 설정

const http = axios.create({
	timeout: 1000 * 1000000,
	withCredentials: true,
	BASE_URL: '/api'
	headers: {
		'Content-Type': 'application/json; charset=utf-8'
	}
})

8. Vue 라이프 사이클

일반적으로 사용되는 수명 주기 방법

  • beforeCreate: 현재 데이터, 메소드 및 $el은 초기화되지 않습니다.
  • 생성됨: 이 시점에서 데이터 및 메서드의 초기화는 완료되지만 DOM 노드는 마운트되지 않습니다.
  • beforeMount: 이때 템플릿을 컴파일하고 가상 DOM 노드를 el에 마운트합니다.
  • Mounted: 템플릿을 컴파일하고 데이터 요청에 사용할 수 있는 실제 DOM 노드를 el에 마운트합니다.
  • beforeUpdate: 데이터가 업데이트될 때 이 후크 기능을 입력하면 가상 DOM이 다시 생성됩니다.
  • 업데이트됨: 데이터 업데이트가 완료되면 이 후크 기능을 입력합니다.
  • beforeDestory: 구성 요소가 파괴되기 전에 호출되며 감시자, 하위 구성 요소 및 이벤트 등을 제거합니다.
  • 파괴됨: 구성 요소가 파괴된 후 호출됩니다.
<template>
  <div>
    <div class="label-head">
      <label>生命周期详解</label>
    </div>
    <div :data="count">{
   
   {count}}</div>
    <p>
      <button @click="add">添加</button>
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: "",
      filter: "all",
      states: ["all", "active", "completed"]
    };
  },
  methods: {
    add() {
      this.count++;
    }
  },
  beforeCreate() {
    console.log("=========" + "beforeCreated:初始化之前" + "======");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  created() {
    console.log("==========" + "created：创建完成" + "===========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  beforeMount() {
    console.log("==========" + "beforeMount：挂载之前" + "=======");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  mounted() {
    console.log("==========" + "mounted：被挂载之后" + "==========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  beforeUpdate() {
    console.log("========" + "beforeUpdate：数据更新前" + "========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  updated() {
    console.log("========" + "updated：被更新之后" + "============");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  beforeDestroy() {
    console.log("=========" + "beforeDestroy：销毁之前" + "========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  destroyed() {
    console.log("==========" + "destroyed：销毁之后" + "===========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  activated() {
    console.log("");
  },
  deactivated() {
    console.log("");
  }
};
</script>
<style scoped>
.label-head {
  text-align: center;
  font-size: 40px;
}
</style>

9. Vue 프로젝트 엔지니어링

1. 단일 페이지 적용 및 다중 페이지 적용

SPA 단일 페이지 응용 프로그램(SinglePage Web Application)은 기본 페이지가 하나(하나의 html 페이지)만 있는 응용 프로그램을 말하며 처음에 js 및 css 관련 리소스를 한 번만 로드하면 됩니다. 모든 콘텐츠는 기본 페이지에 포함되며 각 기능 모듈은 구성 요소화됩니다. 단일 페이지 애플리케이션 점프는 관련 구성 요소를 전환하고 로컬 리소스만 새로 고치는 것입니다.
MPA 다중 페이지 응용 프로그램(MultiPage Application)은 여러 개의 독립 페이지(여러 html 페이지)가 있는 응용 프로그램을 말하며 각 페이지는 js, css 및 기타 관련 리소스를 반복적으로 로드해야 합니다. 다중 페이지 응용 프로그램 점프에는 전체 페이지 리소스 새로 고침이 필요합니다.

- 스파 신청 MPA 신청
새로 고침 방법 관련 구성 요소 전환, 페이지 부분 새로 고침 또는 변경 전체 페이지 새로 고침
라우팅 패턴 해시 또는 히스토리를 사용할 수 있습니다. 일반 링크 점프
사용자 경험 페이지 조각 간 전환 시간이 빠르고 사용자 경험이 좋습니다.처음 로드된 파일이 너무 많을 때 관련 조정이 필요합니다. 페이지 전환 로딩이 느리고 유창성이 충분하지 않으며 특히 네트워크 속도가 느릴 때 사용자 경험이 상대적으로 좋지 않습니다.
전환 애니메이션 구현하기 쉬운 전환 애니메이션 MPA: 전환 애니메이션을 달성할 수 없습니다.
데이터 전송 데이터 전송을 구현하기 쉽고 많은 방법이 있습니다 (파라미터를 이용한 라우팅을 통한 값 전달, Vuex 값 전달 등) URL을 사용하여 매개변수, 쿠키, 로컬 저장소를 전달합니다.
검색 엔진 최적화(SEO) 별도의 솔루션이 필요하여 구현이 어렵고 SEO 검색에 도움이 되지 않으며 SSR(Server-Side Rendering)을 이용하여 최적화 가능 구현하기 쉬움
사용 범위 매우 까다로운 경험, 원활한 인터페이스 애플리케이션 추구 고도로 지원되는 검색 엔진을 추구하는 애플리케이션에 적합
개발 비용 키가 크고 길수록 전문적인 프레임이 필요합니다. 낮지만 페이지 코드가 더 반복적입니다.
유지 보수 비용 상대적으로 쉬움 비교적 복잡한
구조 하나의 기본 페이지 + 여러 모듈에 대한 구성 요소 많은 전체 페이지
자원 구성 요소 공통 리소스는 한 번만 로드하면 됩니다. 각 페이지는 자체적으로 공통 리소스를 로드해야 합니다.

2. Vue 스캐폴딩을 사용하여 프로젝트 생성(권장)

Vue 스캐폴딩은 단일 페이지 애플리케이션을 위한 빠르고 복잡한 스캐폴딩인 vue-cli를 의미하며, 새로운 애플리케이션을 쉽게 생성할 수 있으며 vue 및 webpack용 프로젝트 템플릿을 자동으로 생성하는 데 사용할 수 있습니다. vue-cli 스캐폴딩을 사용하여 Vue 프로젝트를 빌드하려면 먼저 Node.js 및 NPM 환경을 설치해야 합니다.

vue-cli 설치

Vue-cli는 프로젝트 구축 및 기타 작업에 사용되는 공식 프로젝트 비계입니다.
설치 명령

cnpm install -g @vue/cli

설치 확인

vue --version
@vue/cli 4.5.8
Vue 프로젝트 프로젝트 만들기
vue create hello-world


그런 다음 교수가 기본적으로 호출하는 App.vue 및 main.js와 같은 일부 구성 및 프로그램 파일이 포함된 hello-world 폴더를 보았습니다.

Vue 프로젝트 프로젝트 실행

hello-world 폴더로 cd하고 다음 명령을 실행하여 로컬 노드 서버를 시작하여 Vue 프로젝트를 실행합니다.

npm run serve

이후 해당 서비스가 시작되며, 주소와 포트에 접속하여 기본 페이지를 확인할 수 있습니다.

Vue 프로젝트 배포 지원

이제 배포가 언급되었으므로 기본 배포는 다음 명령인 npm/cnpm을 사용하며 출력 콘텐츠는 /dist 디렉터리에 있습니다.

npm run build

매개 변수를 사용하여 다양한 요구 사항을 충족하는 컴파일 결과를 얻도록 설정할 수 있습니다. 그런 다음 패키징된 파일을 서버에 배포할 수 있습니다.

3. Vue 프로젝트 디렉토리 구조

템플릿 프로젝트 구조
├── node_modules
├── public
│ ├── favicon.ico: 탭 아이콘
│ └── index.html: 메인 페이지
├── src
│ ├── 자산: 정적 리소스 저장
│ │ └─ ─ 로고 .png
│ │── component: store components
│ │ └── HelloWorld.vue
│ │── App.vue: 전체 구성 요소 요약
│ │── main.js: 항목 파일
├── .gitignore: git 버전 관리 무시된 구성
├── babel.config.js: babel 설정 파일
├── package.json: 어플리케이션 패키지 설정 파일
├── README.md: 어플리케이션 설명 파일
├── package-lock.json: 패키지 버전 제어 파일

  • .eslintrc.js: 유효성 검사 규칙을 관리할 수 있는 eslint 구성 파일입니다.
  • babel.config.js: Babel의 구성 파일로, 개발 시 JavaScript의 새로운 기능을 사용할 수 있고 이를 프로덕션 환경의 브라우저에서 실행할 수 있는 이전 구문 코드로 변환할 수 있습니다. 여기에서 추가 babel 플러그인을 구성할 수도 있습니다.
  • .browserslistrc: Browserslist의 구성 파일로, 지원 및 최적화가 필요한 브라우저를 제어하는 ​​데 사용할 수 있습니다.
  • public: 이 디렉토리에는 Webpack 컴파일 중에 처리되지 않는 일부 파일이 포함되어 있습니다(한 가지 예외: index.html에는 일부 처리가 있음).
    • favicon.ico: 현재 Vue 로고인 프로젝트의 아이콘입니다.
    • index.html: 애플리케이션의 템플릿 파일로, Vue 애플리케이션은 이 HTML 페이지를 통해 실행되며 lodash의 템플릿 구문을 통해 이 파일에서 보간될 수도 있습니다.
      참고: 이것은 페이지의 최종 표시를 관리하는 템플릿이 아니라 Vue 애플리케이션 외부의 정적 HTML 파일입니다.일반적으로 이 파일은 일부 고급 기능을 사용할 때만 수정됩니다.
  • src: Vue 애플리케이션의 핵심 코드 디렉토리입니다.
    • main.js: 애플리케이션의 엔트리 파일입니다. 현재 Vue 애플리케이션을 초기화하고 애플리케이션이 마운트되어야 하는 index.html 파일의 HTML 요소를 지정합니다. 일반적으로 전역 구성 요소를 등록하거나 추가 Vue 라이브러리를 추가하는 일부 작업도 수행됩니다.
    • App.vue: Vue 애플리케이션의 루트 노드 구성 요소입니다. Vue 구성 요소에 대해 자세히 알아보려면 계속 읽어보세요.
    • 구성 요소: 사용자 정의 구성 요소를 저장하는 데 사용되는 디렉토리이며 현재 샘플 구성 요소가 있습니다.
    • assets: 이 디렉토리는 CSS, 그림과 같은 정적 리소스를 저장하는 데 사용되지만 코드 디렉토리에 속하기 때문에 webpack에서 운영 및 처리할 수 있습니다. Sass/SCSS 또는 Stylus와 같은 일부 전처리를 사용할 수 있음을 의미합니다.

4. 성분의 분류

일반적으로 구성 요소는 크게 세 가지 범주로 나눌 수 있습니다.

  • 페이지 수준의 구성 요소.
  • 재사용 가능한 비즈니스 기본 구성 요소.
  • 비즈니스와 관련이 없는 독립적인 구성 요소입니다.
페이지 수준 구성요소

일반적으로 페이지 디렉토리의 .vue 구성 요소인 페이지 수준 구성 요소는 전체 프로젝트를 구성하는 큰 페이지입니다. 일반적으로 외부 인터페이스는 없습니다. 우리는 보통 개발할 때 이런 종류의 컴포넌트를 주로 씁니다. 아래와 같이 페이지 아래의 Home.vue(홈페이지) 및 About.vue(회사 정보)는 모두 독립적인 페이지 및 구성 요소입니다.

pages
├─ About.vue
└─ Home.vue
재사용 가능한 비즈니스 기본 구성 요소

이러한 유형의 컴포넌트는 일반적으로 비즈니스의 다양한 페이지에서 재사용되는 컴포넌트이며 일반적으로 컴포넌트 디렉토리에 작성된 후 가져오기를 통해 각 페이지에서 사용됩니다. 이러한 유형의 구성 요소는 일반적으로 테이크아웃의 각 페이지에서 사용되는 점수 시스템과 같은 특정 기능을 구현합니다. 이 부분은 스코어링 기능을 구현할 수 있으며 독립적인 비즈니스 구성 요소로 작성할 수 있습니다. 예를 들어 다음 구성 요소의 Star.vue는 비즈니스 구성 요소입니다. 이러한 유형의 구성 요소 작성에는 일반적으로 구성 요소에서 일반적으로 사용되는 소품, 슬롯 및 사용자 지정 이벤트가 포함됩니다.

components
└─ Star.vue
비즈니스와 관련 없는 독립 구성 요소

이러한 구성 요소는 일반적으로 비즈니스 기능과 관련이 없는 독립적인 구성 요소입니다. 이러한 구성 요소는 일반적으로 다양한 비즈니스 구성 요소 또는 페이지 구성 요소에서 기본 구성 요소로 사용됩니다. 시장에서 인기 있는 ElementUI 및 iview에 포함된 구성 요소는 모두 독립적인 구성 요소입니다. 리치 텍스트 편집기 등과 같이 자신이 정의한 독립 구성 요소인 경우 일반적으로 utils 디렉토리에 작성됩니다.

10. 뷰 라우팅

1. Vue 라우팅 시작하기

Vue 라우터는 Vue.js 의 공식 라우팅 관리자 입니다. Vue.js의 핵심과 긴밀하게 통합되어 있어 단일 페이지 애플리케이션을 쉽게 구축할 수 있습니다.

프로젝트에서 사용할 수 있는 네 가지 단계가 있습니다 vue-router.

  1. vue-router플러그인을 가져옵니다 .
  2. 플러그인을 사용하십시오.
  3. 라우팅 인스턴스를 생성하고 라우팅 정보를 구성합니다.
  4. Vue의 인스턴스에 경로 인스턴스를 추가합니다.

main.js

// 引入 vue-router
import VueRouter from 'vue-router'
import Home from './views/Home'
import About from './views/About'

// 使用 VueRouter 插件
Vue.use(VueRouter)

// 添加路由信息
const router = new VueRouter({
    routes: [
        { path: '/', redirect: '/home', },
        { path: '/home', component: Home },
        { path: '/about', component: About },
    ]
})

new Vue({
    router,  // 纳入到 Vue 的实例中
    render: h => h(App),
}).$mount('#app')

app.vue

<template>
    <div>
        <ul>
            <li>
                <router-link to="/home">Home</router-link>
            </li>
            <li>
                <router-link to="/about">About</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

2. 라우터 링크의 매개변수

<router-link>몇 가지 중요한 매개변수가 있습니다.

  • active-class현재 활성 경로의 스타일입니다.
  • tag기본 a 태그를 지정된 태그로 바꿉니다.
  • exact-active-class정확한 일치 경로.
  • replace현재 라우팅 정보를 기록에 저장하지 마십시오.
  • event경로를 트리거하는 이벤트, 기본값은 클릭 이벤트입니다.

3. 프로그래밍 방식의 라우팅

<router-link>내비게이션 링크를 정의하기 위해 태그 생성을 사용하는 것 외에도 라우터의 인스턴스 메소드를 사용하여 코드를 작성하여 구현할 수도 있습니다.Vue 인스턴스 내에서 라우팅 인스턴스를 호출하여 액세스 할 $router수 this.$router.push있습니다 <router-link to="" />. 다음 프로그래밍 방식 라우팅 방법:

  • 특정 경로에 대한 push() 요청
  • replace() 특정 경로에 대한 요청이며 기록과 같은 새 레코드를 추가하지 않습니다.
  • go(n) 앞으로 또는 뒤로, 일반적으로 사용되지 않음
goto(p, n) {
    /**
    * 通过路径的方式实现路由的跳转，catch(() => {}) 主要的目的是为了不出现当
    * 用户点击重复的路由而在浏览器端出现的错误
    */
    // this.$router.push(p).catch(() => { })

    // 也可以通过组件的名字实现跳转
    // this.$router.push({name: n}).catch(() => { })

    // 通过组件的名字实现页面的跳转，但是不保存历史记录
    this.$router.replace({ name: n }).catch(() => { })
}

4. 라우팅 중첩

실생활의 애플리케이션 인터페이스는 일반적으로 다층 중첩 구성 요소로 구성되며 특정 상위 수준 경로 아래에 속성을 추가하여 children여러 하위 라우팅 정보가 포함됩니다 .

const router = new VueRouter({
    routes: [
        { path: '/', component: Index, name: 'index' },
        {
            path: '/home',
            component: Home,
            name: 'home',
            // 添加子路由信息
            children: [
                { path: '', redirect: 'user' },
                { path: 'student', component: Student },
                { path: 'user', component: User }
            ]
        },
        { path: '/about', component: About, name: 'about' },
    ]
})

5. 매개변수 전달

한 경로에서 다른 경로로 이동할 때 사용자 세부 정보를 쿼리하는 것과 같은 매개 변수를 전달해야 하는 경우가 많습니다.

동적 라우팅 매개변수

라우터 설정에서 우리는 path고정된 값을 쓰고 하드코딩하고 어떤 시나리오에서는 경로가 다양화될 수 있습니다. 필요 동적 라우팅을 사용하면 아래와 같이 구문이 매우 간단합니다.

// ---------------------------路由配置-------------------------------
{ path: 'detail/:id', component: Detail, name: 'about-detail' }

// ---------------------------路由跳转-------------------------------
goto(n) {
    // 如下两行代码，意思是一样的，如果不写，默认就是path
    // this.$router.push(`/about/detail/${n}`).catch(() => { })
    // this.$router.push({ path: `/about/detail/${n}` }).catch(() => { })

    // 使用params参数的方式，必须使用组件名
    this.$router.push({ name: 'about-detail', params: { id: n } })
}

// ----------------------------页面取值-------------------------------
data() {
    return {
    	id: ''
    }
},
created() {
	this.id = this.$route.params.id
}

위의 방법에 대해 공식은 값을 가져오는 방법을 사용하여 props값을 가져오는 방법이 실현되고 $route와의 디커플링이 실현되도록 권장합니다.

// ---------------------------路由配置-------------------------------
{ path: 'detail/:id', component: Detail, name: 'about-detail',props: true }

// ---------------------------路由跳转-------------------------------
goto(n) {
    // 如下两行代码，意思是一样的，如果不写，默认就是path
    // this.$router.push(`/about/detail/${n}`).catch(() => { })
    // this.$router.push({ path: `/about/detail/${n}` }).catch(() => { })

    // 使用params参数的方式，必须使用组件名
    this.$router.push({ name: 'about-detail', params: { id: n } })
}

// ----------------------------页面取值-------------------------------
export default {
	// props中的值要与路由配置中的id对应
	props: ['id']
}
쿼리 매개변수

쿼리 매개변수는 실제로 URL 주소에 매개변수를 전달하는 것입니다.

// ---------------------------路由配置-------------------------------
{ path: 'detail', component: Detail, name: 'about-detail'}

// ---------------------------路由跳转-------------------------------
goto(n) {
    // 可以在路径中直接携带
    // this.$router.push({ path: `/about/detail?id=${n}` })

    this.$router.push({
        //path: '/about/detail',  
        // 可以为路径也可以是名字
        name: 'about-detail',
        query: { id: n }
    })
}

// ----------------------------组件中取值-------------------------------
created() {
    this.id = this.$route.query.id
}
매개변수 정의

정의 매개변수 는 라우팅 구성 파일에 기록된 고정 데이터이며 meta및props

우리가 직면한 문제

사용자가 데이터를 전환하면 구성 요소의 재사용으로 인해 사용자가 전달한 값을 얻을 수 없습니다(즉, 동일한 경로에서 구성 요소가 파괴되지 않음). 당신은 데이터 수집을 달성하기 위해 사용할 수 watch있습니다 beforeRouterUpdate.

// watch 的方式实现数据切换的时候，参数的获取
watch: {
    // 获取直接监听 $route 也可以
    '$route.params': function (newVal) {
    	this.id = newVal.id
    }
}

// ----------------------使用beforeRouterUpdate的方式获取----------------
// to表示到哪里去，from从哪里来，next是个函数，表示接着往下走
beforeRouteUpdate(to, from, next) {
    this.id = to.params.id
    next()  // 一定要调用 next() 方法
}

6. 라우팅 가드

라우팅 가드는 라우팅 변경을 위한 콜백 후크 기능으로, 프로세스 제어, 권한 확인 등과 같은 일부 작업을 수행하기 위해 이러한 기능에서 판단할 수 있습니다. 라우팅 가드에는 구성 요소 라우팅 가드와 글로벌 라우팅 가드가 포함됩니다.

컴포넌트 라우팅 가드

구성 요소 경로 보호는 여러 구성 요소 수명 주기 기능에 매핑됩니다.

  • beforeRouteEnter경로가 구성 요소에 진입할 준비가 되면 此时组件还没有被创建(实例的生命周期还没有开始)이 메서드가 실행됩니다. 여기에서 사용자가 페이지에 들어갈 수 있는지 여부를 결정할 수 있습니다.
  • beforeRouteUpdate, 페이지에서 경로가 업데이트되면 이 메서드가 호출됩니다. 이 메서드의 제한 사항은 동일한 구성 요소에서 경로 전환을 실현할 수 있다는 것입니다.
  • beforeRouteLeave, 페이지가 다음 경로로 들어가려고 할 때 이 메서드가 호출됩니다.

注意上面三个方法都需要调用 next() 方法实现流程的继续

// 进入到对应的路由还没到达组件
beforeRouteEnter(to, from, next) {
    console.log('进入路由');
    next()
},
// 路由更新
beforeRouteUpdate(to, from, next) {
    console.log('更新路由');
    next()
},
// 路由退出
beforeRouteLeave(to, from, next) {
    console.log('退出');
    next()
}
글로벌 라우팅 가드(키)

전역 경로 가드는 모든 경로가 실행되는 후크 기능으로 VueRouter 인스턴스에 추가되며 가장 일반적으로 사용되는 방법은 다음과 같습니다.

beforeEach: 라우팅 인스턴스에서 해당 라우트를 찾았을 때 실행한다.

router.beforeEach((to, from, next) => {
    console.log('全局路由守卫');
    next()
})

11. 상태 관리를 위해 Vuex 사용

Vuex는 구성 요소 간의 데이터 공유를 용이하게 할 수 있는 구성 요소의 전역 상태(데이터) 관리를 실현하는 메커니즘입니다.

1. Vuex를 사용하여 상태를 균일하게 관리할 때의 이점

Vuex는 Vuex에서 공유 데이터를 중앙에서 관리할 수 있어 추후 개발 및 유지 관리가 용이 ​​Vuex는 구성 요소 간 데이터 공유를 효율적으로 구현하여 개발 효율성을 향상시킬 수 있습니다. 일반적으로 Vuex에는 구성 요소 간에 공유되는 데이터만 저장하면 되며, 구성 요소의 비공개 데이터는 여전히 구성 요소 자체의 데이터에 저장됩니다.

2. Vuex 사용

Vuex 의존성 설치
npm install vuex --save
Vuex 패키지 가져오기
import Vuex from 'vuex'
Vue.use(Vuex)
저장소 객체 생성
const store = new Vuex.store({
// state 中存放的就是全局共享的数据
    state: {
        count: 0
    }
})
vue 인스턴스에서 저장소 객체를 끊습니다.
new Vue({
	el: '#app',
	render: h => h(app),
	router,
	// 将创建的共享数据对象，挂在到 Vue 全局实例中
	// 所有的组件，就可以直接从 store 中获取全局的数据了
	store,
})

3. Vuex의 핵심 개념


  • 인스턴스의 데이터 속성과 유사한 상태 개체 유형은 데이터를 저장합니다.

  • 인스턴스의 computed 속성과 유사한 getters 객체 유형.

  • 인스턴스 메서드와 유사하지만 비동기 메서드를 처리할 수 없는 돌연변이 객체 유형

  • 인스턴스의 메서드와 유사한 작업 개체 유형은 비동기 메서드를 처리할 수 있습니다.
  • 모듈
    객체 유형은 상태 콘텐츠가 많을 때 이 속성을 통해 작은 모듈로 나뉘며 각 모듈에는 자체 상태, 돌연변이, 작업, getter가 있습니다.
상태

State는 유일한 공용 데이터 소스를 제공하며 모든 공유 데이터는 State of the Store에 공통적으로 저장되어야 합니다.

// 스토어 데이터 소스 생성 및 고유한 퍼블릭 데이터 제공

const store = new Vuex.Store({
	state: {
		count: 0
	}
})

4.게터

Vuex를 사용하면 스토어에서 "게터"(스토어의 계산된 속성으로 생각할 수 있음)를 정의할 수 있습니다. 계산된 속성과 마찬가지로 getter의 반환 값은 종속성에 따라 캐시되며 종속 값이 변경될 때만 다시 계산됩니다.
즉, 상태의 값에 대해 복잡한 계산을 수행할 때 이 속성을 호출하고 getter에서 계산을 수행하고 계산된 값을 반환할 수 있습니다.
예를 들어:

getters: {
  doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }

이 계산은 필터링된 토큰 값을 반환합니다.

게터는 store.getters 객체로 노출되며 속성으로 값에 액세스할 수 있습니다.

이는 vuex를 등록할 때 구성 요소의 getter에 액세스하여 계산된 상태 값을 가져올 수 있음을 의미합니다. 예를 들어:

store.getters.doneTodos // [{ id: 1, text: '...', done: true }]

5.돌연변이

Vuex 스토어에서 상태를 변경하는 유일한 방법은 변형을 제출하는 것입니다. Vuex의 변형은 이벤트와 매우 유사합니다. 각 변형에는 문자열 이벤트 유형(유형)과 콜백 함수(핸들러)가 있습니다.

***참고: ***상태 관리자에서 값을 변경하는 유일한 방법은 다음과 같은 변형을 사용하는 것입니다.

mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }

그런 다음 구성 요소에서 이 메서드를 호출합니다.

store.commit('increment')

이때 카운트에 1을 더하는 증가 방식을 실행하는 것과 같습니다.

6.액션

동작은 돌연변이와 비슷하지만 차이점은 다음과 같습니다.

  • 작업은 상태를 직접 변경하는 대신 변형을 제출합니다.
  • 작업에는 임의의 비동기 작업이 포함될 수 있습니다.

다음은 간단한 예입니다.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
	    incrementAsync ({ commit }) {
	    setTimeout(() => {
	      commit('increment')
	    }, 1000)
	  }
  }
})

작업은 store.dispatch 메서드에 의해 트리거됩니다 .

구성 요소에서 다음을 사용합니다.

store.dispatch('incrementAsync', {
  amount: 10
})

작업 내에서 비동기 작업을 수행할 수 있습니다.

7. 모듈

단일 상태 트리를 사용하기 때문에 애플리케이션의 모든 상태는 상대적으로 큰 개체에 집중됩니다. 응용 프로그램이 매우 복잡해지면 저장소 개체가 상당히 커질 수 있습니다.
위의 문제를 해결하기 위해 Vuex를 사용하면 저장소를 모듈로 분할할 수 있습니다. 각 모듈에는 고유한 상태, 변형, 작업, getter 및 중첩된 하위 모듈이 있으며 동일한 방식으로 위에서 아래로 구분됩니다.

이와 같이:

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

12. Vue 확장

  • vue-cli: vue 다리 손가락
  • vue-resource(axios): ajax 요청
  • vue-router: 라우팅
  • vuex: 상태 관리
  • vue-lazyload: 이미지 지연 로딩
  • vue-scroller: 페이지 슬라이딩 관련
  • mint-ui: Vue 기반 UI 컴포넌트 라이브러리(모바일 터미널)
  • element-ui: Vue 기반 UI 구성요소 라이브러리(PC 측)

참조:
Vue 자습서 Yuque
Vue 자습서 Youdao Cloud
Vue 자습서 Github
Vue 구성 요소 개발
Vue 시리즈—Vue 구성 요소 구현 원칙(8) Vue
전체 자습서(연습)
Vue 매우 상세한 자습서, Vue
프로젝트 완료 방법 Vue 구성 요소
Vue(9) — 모듈 및 구성 요소, 단일 파일이 아닌 구성 요소, 단일 파일 구성 요소
vue 구성 요소 프로그래밍은
원숭이가 이해할 수 있는 자습서인 Vuex 사용 방법을 알려줍니다.

추천

출처blog.csdn.net/unreliable_narrator/article/details/125194046
추천
행
.netcoreapi 컨테이너와 컨테이너의 MySQL을 고정 표시기-구성
com.google.firebase.database.DatabaseException는 : 롱 타입 java.lang.String의 값을 변환하는 데 실패
국내 휴대전화 왕이 미국 통신사 시장 1위를 차지했지만 국내 휴대전화 4위는 아니다.
트랜잭션 격리 수준의 네 가지
오늘 chatgpt 시도
부하 분산
【FFMpeg】源码编译
우분투 sudo를 무료로 접착
자바 8 스트림 API - 어떤 상태 중간 동작을 보증 새로운 소스 수집합니까?
CF161BDiscounts
아카이브
기타
2020-04-08(1460)
2020-04-07(1517)
2020-04-06(1499)
2020-04-05(1440)
2020-04-04(1629)
2020-04-03(1644)
2020-04-02(1572)
2020-04-01(1665)
2020-03-31(1639)
2020-03-30(1334)

코드 세계

© 2018 codetd.com