Vue 구조에 대한 자세한 소개(예제 포함)

이 글은 Vue의 구조에 대한 자세한 소개를 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1.Vue 사용 시나리오:

* 在html中通过script引入
* 在webpack中，由于配置有处理各种文件的loader，所以可以用import引入

2.Vue 지침

v-cloak
v-bind  ==> :
v-on ==> @
v-text
v-html
v-modal
:class : 简单值，数组，对象，数组中对象
:style ： 数组， 对象
v-for
v-if
v-show

• 맞춤형 전역 지침

Vue.derictive(自定义指令名字, 指令生效周期配置对象{
    bind : (被绑定的那个元素的js原生对象el) => {},   ==> 一旦绑上马上调用
    inserted : (el同上) => {},  ==> 元素插入到DOM之后再调用
    updated : (el同上, binding) => {}
}

• 맞춤형 로컬 지침

var vm2 = new Vue({
  el: '#app2',
  data: {},
  methods: {},
  directives: { 
    'fontweight': {
      bind: function (el, binding) {
        el.style.fontWeight = binding.value
      }
    },
  }
})

3 .Vue 이벤트 modifier

.stop
.prevent
.capture
.self
.once
.self和.stop在阻止冒泡行为上的区别

4.Vue filter
글로벌 필터의 매개변수 전달 규칙은 동일합니다.
글로벌 필터 이름과 로컬 필터 이름이 같은 경우 컴포넌트 내부에서 필터를 사용할 때 먼저 내부 필터

• 전역 필터

Vue.filter('自定义过滤器名字' , function(第一参数来自于管道符 | 前的数据 ， 后面的参数是该过滤器被调用时候传递过来的参数){}

• 로컬 필터

는 Vue 인스턴스

var vm2 = new Vue({
  el: '#app2',
  data: {},
  methods: {},
  filters: { 
    dateFormat: function (dateStr, pattern = '') {}
    }
  },
})

의 필터 속성에 정의됩니다. 5. Vue 키 수정자
Like 이벤트와 같은 키 수정자 .self와 같은 수정자는 v-on 이벤트 뒤에 사용됩니다. $ http 속성이 Vue 인스턴스

.enter
.tab
.up
.down
.left
.right
.delete
.esc
.space

• 8에 추가되었습니다. Vue animation

클래스 이름

Vue.config.keyCodes.自定义按键修饰符名字 = 按键的码值

타사 클래스 이름 사용

beforeCreated(){} ==> data和methods中数据还没初始化好
created(){} ==> data和methods中的数据已经初始化好
beforeMount(){} ==> 模板已经在内存中编译好了，但是没有被渲染到页面上
mounted(){} ==> 内存中的模板已经渲染到了页面行，用户可以看到页面了
beforeUpdate (){} ==> data中的数据已经更新，但是界面上的数据没有更新
updated (){} ==> 界面上数据更新结束
beforeDestory (){} ==> 此时data和methods中数据还可以使用
destoryed (){} ==> data和methods中数据都不能使用了，Vnode被完全销毁

애니메이션 후크 기능

• 아아아아

9.Vue는 컴포넌트를 생성합니다

• (1) 컴포넌트 템플릿 객체 생성

$http.get()
$http.post()
$http.jsonp()

均返回一个promise
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
  console.log(result.body)
})

(2) 전역 컴포넌트 등록

v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to

(3) 컴포넌트 데이터와 Vue 인스턴스의 차이점 data

• 구성 요소 데이터는 객체

10을 반환해야 합니다. 구성 요소 전환 및 애니메이션

구성 요소 전환

• <transition
  name=&#39;my&#39;
  enter-active-class="bounceIn"
  leave-active-class="bounceOut"
  :duration="{ enter: 200, leave: 400 }">
    <h3 v-if="flag" class="animated">这是一个H3</h3>
  </transition>

구성 요소 전환 시 애니메이션

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
  <p class="ball" v-show="flag"></p>
</transition>

beforeEnter (要执行动画的那个对象的原生DOM对象el) {} ==> 动画入场之前，设置动画的起始样式
enter (el , done) {done()} ==> 动画开始后样式，设置动画结束样式
afterEnter () {} ==> 动画完全结束回调

11. 구성 요소 상위-하위 전송 값

• 상위 구성 요소가 하위 구성 요소에 값을 전달합니다

方式1：
Vue.extend({
    template : ''
})

方式2：
直接一个 Object

하위 구성 요소가 상위 구성 요소에 값을 전달합니다

상위 구성 요소를 통해 함수의 매개 변수를 전달합니다

• $refs

1 2. Vue 라우팅

은 Vue-router.js 파일

Vue.component(自定义组件名字, 组件模板)

라우팅 매개변수

rrre를 가져와야 합니다. 에

하나의 경로는 여러 구성 요소에 해당합니다

• <component :is="comName"></component>
  comName是变量

13.watch는 데이터 변경 또는 데이터의 라우팅 변경을 모니터링합니다

<!-- 通过 mode 属性,设置组件切换时候的 模式 -->
<transition mode="out-in">
  <component :is="comName"></component>
</transition>

위 내용은 Vue 구조에 대한 자세한 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!