Introduction détaillée à la structure Vue (avec exemples)

Cet article vous apporte une introduction détaillée à la structure de Vue (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Scénarios d'utilisation de Vue  :

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

2. Commandes Vue

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

• Directive globale personnalisée

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

• Directive locale personnalisée

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

3.Modificateurs d'événement Vue

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

4.Filtre Vue
Les règles de passage des paramètres pour les filtres globaux sont les mêmes
Si le nom du filtre global et du filtre local sont les mêmes, lors de l'utilisation du filtre à l'intérieur du composant, le filtre interne sera utilisé en premier

• Filtre global

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

• Le filtre local

est défini dans l'attribut filter dans l'instance Vue

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

5.Modificateurs de touches Vue
Les modificateurs de touches, comme les modificateurs d'événements comme .self, sont utilisés après l'événement v-on.

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

• Modificateur de clé global personnalisé

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

Cycle de vie des composants Vue

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

7.Vue-resource
est similaire à axios, mais dépend de Vue.js Après introduction, l'attribut $http est automatiquement ajouté à l'instance Vue

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

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

Animation 8.Vue

• Nom de la classe

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

• Utiliser No. Nom de la classe à trois

<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>

• Fonction de crochet d'animation

<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 () {} ==> 动画完全结束回调

9 . Composant de création de vue

• (1) Création d'objet de modèle de composant

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

方式2：
直接一个 Object

• (2) Enregistrer le composant global

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

• (3) La différence entre les données du composant et les données de l'instance Vue

Données du composant doit renvoyer l'objet

10. Commutation et animation de composants

• Commutation de composants

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

• Animation lors du changement de composants

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

11.Transmission de valeurs entre les composants parent et enfant

Passer les valeurs du composant parent Transmettre la valeur au composant enfant

传单纯值：
<com1 v-bind:parentmsg="msg"></com1>

传函数
<com2 @func="show"></com2>
this.$emit('func', this.sonmsg)

Le composant enfant transmet la valeur au composant parent
Passez la fonction via les paramètres du composant parent

$refs

12. Vue router

et comme Vue-resource, vous devez introduire un fichier vue-router.js

let routeObj = new VueRouter({  
    routes : [
        {path : '' , redrect : '' , component : null}
    ]
})

var vm = new Vue({
  el: '#app',
  router: routerObj
});

Paramètres de routage

<router-link to="/login?id=10&name=zs">login</router-link>
routes: [
  { path: '/login/:id/:name', component: login , children : [{path , redrect , component , children}] },
]
$route.params.id

Un itinéraire correspond à plusieurs composants

<router-view></router-view>
<p class="container">
  <router-view name="left"></router-view>
  <router-view name="main"></router-view>
</p>

var router = new VueRouter({
  routes: [
    {
      path: '/', components: {
        'default': header,
        'left': leftBox,
        'main': mainBox
      }
    }
  ]
})

13.watch surveille les changements de données ou achemine les changements de données

var vm = new Vue({
  el: '#app',
  data: {firstname: '',},
  watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
    'firstname': function (newVal, oldVal) {
      this.fullname = newVal + '-' + this.lastname
    },
    '$route.path': function (newVal, oldVal) {   ==> 只需要这是一个变量
      if (newVal === '/login') {
        console.log('欢迎进入登录页面')
      } else if (newVal === '/register') {
        console.log('欢迎进入注册页面')
      }
    }
  }
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!