Home > Article > Web Front-end > Detailed introduction to Vue structure (with examples)
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引入
2.Vue instructions
v-cloak v-bind ==> : v-on ==> @ v-text v-html v-modal :class : 简单值,数组,对象,数组中对象 :style : 数组, 对象 v-for v-if v-show
Customized global directive
Vue.derictive(自定义指令名字, 指令生效周期配置对象{ bind : (被绑定的那个元素的js原生对象el) => {}, ==> 一旦绑上马上调用 inserted : (el同上) => {}, ==> 元素插入到DOM之后再调用 updated : (el同上, binding) => {} }
Customized local directive
var vm2 = new Vue({ el: '#app2', data: {}, methods: {}, directives: { 'fontweight': { bind: function (el, binding) { el.style.fontWeight = binding.value } }, } })
3.Vue event modifier
.stop .prevent .capture .self .once .self和.stop在阻止冒泡行为上的区别
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(第一参数来自于管道符 | 前的数据 , 后面的参数是该过滤器被调用时候传递过来的参数){}
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 = '') {} } }, })
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
Custom global key modifier
Vue.config.keyCodes.自定义按键修饰符名字 = 按键的码值
6.Vue component life cycle
beforeCreated(){} ==> data和methods中数据还没初始化好 created(){} ==> data和methods中的数据已经初始化好 beforeMount(){} ==> 模板已经在内存中编译好了,但是没有被渲染到页面上 mounted(){} ==> 内存中的模板已经渲染到了页面行,用户可以看到页面了 beforeUpdate (){} ==> data中的数据已经更新,但是界面上的数据没有更新 updated (){} ==> 界面上数据更新结束 beforeDestory (){} ==> 此时data和methods中数据还可以使用 destoryed (){} ==> data和methods中数据都不能使用了,Vnode被完全销毁
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) })
8. Vue animation
Class name
v-enter v-enter-active v-enter-to v-leave v-leave-active v-leave-to
Use third-party class name
<transition name='my' enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }"> <h3 v-if="flag" class="animated">这是一个H3</h3> </transition>
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 () {} ==> 动画完全结束回调
9.Vue creates components
(1) Component template object creation
方式1: Vue.extend({ template : '' }) 方式2: 直接一个 Object
(2) Register global component
Vue.component(自定义组件名字, 组件模板)
(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是变量
Animation when component switching
<!-- 通过 mode 属性,设置组件切换时候的 模式 --> <transition mode="out-in"> <component :is="comName"></component> </transition>
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)
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 });
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
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 } } ] })
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('欢迎进入注册页面') } } } });
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!