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: &＃39;#app2&＃39;,
  data: {},
  methods: {},
  directives: { 
    &＃39;fontweight&＃39;: {
      bind: function (el, binding) {
        el.style.fOntWeight= binding.value
      }
    },
  }
})

3.Vue事件修饰符

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

4.Vue过滤器
全局过滤器的参数传递规则一样；
如果全局过滤器和局部过滤器的名字相同，在组件内部使用过滤器时，优先使用自己的内部过滤器

• 全局过滤器

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

• 局部过滤器

定义在Vue实例中的filter属性中

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

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

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

8.Vue动画

• 类名

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

• 使用第三方类名

  
这是一个H3

• 动画的钩子函数

  



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

9.Vue创建组件

• （1）组件模板对象创建

方式1：
Vue.extend({
    template : &＃39;&＃39;
})

方式2：
直接一个 Object

• （2）注册全局组件

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

• （3）组件data和Vue实例data区别

组件data必须return object

10.组件切换和动画

• 组件切换

comName是变量

• 组件切换时的动画

11.组件父子间传值

• 父组件传值给子组件

传单纯值：


传函数

this.$emit(&＃39;func&＃39;, this.sonmsg)

• 子组件给父组件传值

通过父组件传入函数的参数

• $refs

12.Vue路由

• 和Vue-resource一样，需要引进一个vue-router.js文件

let routeObj = new VueRouter({  
    routes : [
        {path : &＃39;&＃39; , redrect : &＃39;&＃39; , component : null}
    ]
})

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

• 路由参数

login
routes: [
  { path: &＃39;/login/:id/:name&＃39;, component: login , children : [{path , redrect , component , children}] },
]
$route.params.id

• 一个路由对应多个组件

  
  


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

13.watch监视data中数据变化或者路由变化

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

以上就是Vue结构的详细介绍（附示例）的详细内容，更多请关注 第一PHP社区 其它相关文章！