Vue.config.productionTip=false 处理生产环境的错误提示
{{变量名}}
v-for="(item,index) in arr" :key='index'
{{item}} {{index}}
<p v-if="flag==1">显示1</p>
<p v-else-if="flag==2">显示2</p>
<p v-else>显示其它</p>
去除右键默认事件
<button @contextmenu.prevent="meni">右键点击去除事件默认行为</buton>
<p v-show="show">显示隐藏</p>
Vue生命周期
在实例初始化之前,数据观测和事件配置之前调用,data,methods,computed等无法访问
1 beforeCreate(){
console.log(this,this.数据,this.get,this.方法)
}
在这一步,实现已经完成以下配置:数据的观测,属性和方法的运算,完成了data数据的初始化,这是一个常用的生命组周期,在这里做一些预处理,比如发送ajax,$el不可见
2 created(){
console.log(this,this.数据,this.get,this.方法,);可以获取到
console.log(this.$el) undefined
}
挂在之前,并且对模板的编译以及数据的渲染
3 beforeMount(){
console.log(this.$el,this.$refs.p,this.数据)undefined
}
渲染完成,也就是实例中的数据 方法 全部渲染页面上 类似 onload
4 mounted(){
console.log(this.$el,this.$refs.p)
}
数据改变后渲染DOM之前
5 beforeUpdate(){
console.log('数据更新之前,'this.msg,this.$refs.p.innerHTML)
}
6 updataed (){
console.log('数据更新之后',this.msg,this.$refs.p.innerHTML)
}
自定义模块
第一步创建Loading文件夹
第二步在Loading问价夹中创建index.js
d
第三步在Loading问价夹中创建Load.vue 并创建div 内容为加载中
第四步
在index.js中导入Load.vue
import LoadTem from './Load.vue'
export default{
install :function(Vue){
Vue.component('Load',LoadTem)
let Load=Vue.extend(LoadTem) 创建了一个子键
let load=new Load({
el:document.createElement('div')
})
console.log(load.$el)
load.$el.style.display='none'
全局混入,往Vue内添加一些公共的方法或属性
Vue.mixin({
methods:{
hahaha(){
console.log('哈哈哈')
}
show(){
load.$el.style.display='boack'
}
hide(){
load.$el.style.display='none'
}
},
computed:{
hehe(){
return '你好哈哈哈'
}
}
})
}
}
Vue-X
Vuex是一个专门为Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可测试的方式发生变化,Vuex也集成到Vue的官方调试工具devtools,extension提供了诸如零配置的time-travel调试,状态快照导入导出等高级调试功能