Home > Web Front-end > JS Tutorial > Detailed introduction to Vue structure (with examples)

Detailed introduction to Vue structure (with examples)

不言
Release: 2019-02-20 14:11:07
forward
3469 people have browsed it

This article brings you a detailed introduction to the Vue structure (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1.Vue usage scenarios:

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

2.Vue instructions

v-cloak
v-bind  ==> :
v-on ==> @
v-text
v-html
v-modal
:class : 简单值,数组,对象,数组中对象
:style : 数组, 对象
v-for
v-if
v-show
Copy after login
  • Customized global directive

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

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

3.Vue event modifier

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

4.Vue filter
The parameter passing rules of global filter are the same;
If global filter and local filter The name of the filter is the same. When using a filter inside a component, its own internal filter will be used first

  • Global filter

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

is defined in the filter attribute in the Vue instance

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

5.Vue key modifier
Key modifiers, like event modifiers like .self, are used after v-on events.

.enter
.tab
.up
.down
.left
.right
.delete
.esc
.space
Copy after login
  • Custom global key modifier

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

6.Vue component life cycle

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

7.Vue-resource
Similar to axios, but depends on Vue.js. After introduction, the $http attribute is automatically added to the Vue instance

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

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

8. Vue animation

  • Class name

v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to
Copy after login
  • Use third-party class name

<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>
Copy after login
  • Animation hook function

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

9.Vue creates components

  • (1) Component template object creation

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

方式2:
直接一个 Object
Copy after login
  • (2) Register global component

Vue.component(自定义组件名字, 组件模板)
Copy after login
  • (3) The difference between component data and Vue instance data

Component data must return object

10. Component switching and animation

  • Component switching

<component :is="comName"></component>
comName是变量
Copy after login
  • Animation when component switching

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

11. Passing values ​​between parent and child components

  • Passing values ​​from parent components to child components

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

传函数
<com2 @func="show"></com2>
this.$emit('func', this.sonmsg)
Copy after login
  • The child component passes the value to the parent component

Pass the parameters of the function through the parent component

  • $refs

12.Vue routing

  • Same as Vue-resource, you need to introduce a vue-router.js file

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

var vm = new Vue({
  el: '#app',
  router: routerObj
});
Copy after login
  • Routing parameters

<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
Copy after login
  • One route corresponds to multiple components

<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
      }
    }
  ]
})
Copy after login

13.watch monitors data changes or routing changes in data

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('欢迎进入注册页面')
      }
    }
  }
});
Copy after login

The above is the detailed content of Detailed introduction to Vue structure (with examples). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template