本篇文章给大家带来的内容是关于vue结构的详细介绍（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1.vue的使用场景 ：
* 在html中通过script引入* 在webpack中，由于配置有处理各种文件的loader，所以可以用import引入
2.vue指令
v-cloakv-bind  ==> :v-on ==> @v-textv-htmlv-modal:class : 简单值，数组，对象，数组中对象:style ： 数组， 对象v-forv-ifv-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事件修饰符
.stop.prevent.capture.self.once.self和.stop在阻止冒泡行为上的区别
4.vue过滤器
全局过滤器的参数传递规则一样；
如果全局过滤器和局部过滤器的名字相同，在组件内部使用过滤器时，优先使用自己的内部过滤器
全局过滤器
vue.filter('自定义过滤器名字' , function(第一参数来自于管道符 | 前的数据 ， 后面的参数是该过滤器被调用时候传递过来的参数){}
局部过滤器
定义在vue实例中的filter属性中
var vm2 = new vue({  el: '#app2',  data: {},  methods: {},  filters: {     dateformat: function (datestr, pattern = '') {}    }  },})
5.vue按键修饰符
按键修饰符像.self这样的事件修饰符一样，是用在v-on事件后面的。
.enter.tab.up.down.left.right.delete.esc.space
自定义全局按键修饰符
vue.config.keycodes.自定义按键修饰符名字 = 按键的码值
6.vue组件生命周期
beforecreated(){} ==> data和methods中数据还没初始化好created(){} ==> data和methods中的数据已经初始化好beforemount(){} ==> 模板已经在内存中编译好了，但是没有被渲染到页面上mounted(){} ==> 内存中的模板已经渲染到了页面行，用户可以看到页面了beforeupdate (){} ==> data中的数据已经更新，但是界面上的数据没有更新updated (){} ==> 界面上数据更新结束beforedestory (){} ==> 此时data和methods中数据还可以使用destoryed (){} ==> data和methods中数据都不能使用了，vnode被完全销毁
7.vue-resource
类似于axios，但是依赖于vue.js. 引入后自动给vue实例添加上了$http属性
$http.get()$http.post()$http.jsonp()均返回一个promisethis.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {  console.log(result.body)})
8.vue动画
类名
v-enterv-enter-activev-enter-tov-leavev-leave-activev-leave-to
使用第三方类名
<transitionname='my'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 () {} ==> 动画完全结束回调
9.vue创建组件
（1）组件模板对象创建
方式1：vue.extend({    template : ''})方式2：直接一个 object
（2）注册全局组件
vue.component(自定义组件名字, 组件模板)
（3）组件data和vue实例data区别
组件data必须return object
10.组件切换和动画
组件切换
<component :is="comname"></component>comname是变量
组件切换时的动画
<!-- 通过 mode 属性,设置组件切换时候的 模式 --><transition mode="out-in">  <component :is="comname"></component></transition>
11.组件父子间传值
父组件传值给子组件
传单纯值：<com1 v-bind:parentmsg="msg"></com1>传函数<com2 @func="show"></com2>this.$emit('func', this.sonmsg)
子组件给父组件传值
通过父组件传入函数的参数
$refs
12.vue路由
和vue-resource一样，需要引进一个vue-router.js文件
let routeobj = new vuerouter({      routes : [        {path : '' , redrect : '' , component : null}    ]})var vm = new vue({  el: '#app',  router: routerobj});
路由参数
<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
一个路由对应多个组件
<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监视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('欢迎进入注册页面')      }    }  }});
以上就是vue结构的详细介绍（附示例）的详细内容。