这篇文章给大家分享的是有关Vue的使用场景的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
成都创新互联主营太平网站建设的网络公司,主营网站建设方案,成都app软件开发公司,太平h5重庆小程序开发公司搭建,太平网站营销推广欢迎太平等地区企业咨询
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: '#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()
均返回一个promise
this.$http.get('http://vue.studyit.io/api/getlunbo').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 : ''
})
方式2：
直接一个 Object（2）注册全局组件
Vue.component(自定义组件名字, 组件模板)
（3）组件data和Vue实例data区别
组件data必须return object
10.组件切换和动画
组件切换
comName是变量
组件切换时的动画
11.组件父子间传值
父组件传值给子组件
传单纯值：传函数 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
});路由参数
login routes: [ { path: '/login/:id/:name', component: login , children : [{path , redrect , component , children}] }, ] $route.params.id
一个路由对应多个组件
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的使用场景就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！