Vue基础
-
常用指令
循环v-for
数组v-for="name in arr" , json格式v-for="name in jason", v-for="(k,v) in json"； {{$index}} , {{$key}}事件v-on:click/mouseout/mouseover/...,如： v-on:click="函数"，该指令可以简写为@click="函数"
显示隐藏： v-show="true|false"
事件对象 @click="func($event)", 参数$event相当于js中的event
-
事件冒泡，阻止冒泡：
- js的方式：event.cancleBubble = true
- @click.stop
-
事件默认行为，阻止默认行为：
- js的方式： event.preventDefault()
- contextmenu.prevent
键盘事件：@keydown ，@keyup等等
属性v-bind，如v-bind:src="", 简写:src=""
-
样式clsaa和style
- :class="" 或 v-bind:class=""
- :style="" 或 v-bind:style=""
-
模板
- 文本{{msg}}}，指令v-text=""
- 只输出一次 {{*msg}}
- html转义输出 {{{msg}}}，指令v-html=""
过滤器：{{msg | filterA}} ，{{msg | filterA, filterB}}
计算属性computed：里面可以放置一些复杂的业务逻辑代码
动画效果transitions：可以结合第三方 CSS 动画库，如 Animate.css 结合使用十分有用
-
Vue生命周期
- beforeCreate：实例刚刚被创建，属性还没有
- created：vue实例已经创建，有属性了
- beforeCompile：编译之前，如编译{{msg}}里面的内容
- compiled：编译之后
- ready：将结点插入到document文档中 （2.0后变为mounted）
- beforeDestroy：在vue实例销毁之前
- destroyed： vue实例销毁之后
lifecycle.png -
vue实例简单方法（var vm = new Vue(...)）
- vm.$el：vue实例挂载的结点元素
- vm.$data：就是data
- vm.$mount：手动挂载vue
- vm.$options：获取自定义属性
- vm.destroy：销毁vue实例
- vm.$log：查看vue实例现在数据的状态
- vm.$watch：数据监听
-
webpack配置认识
- entry：配置入口js：main.js
- output：配置打包后的信息
- path：输出文件的路径(_dirname：文件当前所在目录地址)
- filename：输出的文件名称：build.js
- loaders：下载编译相关文件的loader，如：vue-loader、css-loader、vue-style-loader，vue-html-loader、vue-hot-reload-api等
-
vue-cli 脚手架
安装：npm install vue-cli -g
-
父子组件通信
- 子组件获取父组件数据：props
- 父组件获取子组件的数据：父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件
- 使用 $on(eventName) 监听事件
- 使用 $emit(eventName) 触发事件
-
支持Vue的UI组件
- ElementUI（PC端）
- MintUI（移动端）
-
Vue自定义组件的写法
自定义组件可以使用Vue.use(componentName)方法引用，如编写loading.vue组件：
目录结构：
|- components/
|- loading/
|- loading.vue
|- index.js
在loading.vue中按照一般组件的方式定义组件功能及样式模板，然后在index.js中导出组件:-
index.js
1.png - 最后在main.js中使用Vue.use
-
-
监听路由变化 (使用vue-router)
watch(){ $route(to, from){ ... } } -
axios发送http请求
