Vue 项目运行 cmd
1. cd 到项目目录 cd /myvue
2. npm run serve 启动项目
3. http://localhost:8080/地址
Vscode
1. 打开我们的项目文件夹
2. ctrl+~ 打开终端
3. npm run serve 启动项目
3. http://localhost:8080/ 地址
Vscode 插件
Vetur 语法提示
Vue2 Snippets 快捷键
Vue 组件传参
父传子：
父亲通过属性传递
子元素通过props接受
Vue 指令
v-for="(item,index) in list"
循环
v-bind:属性
:属性
属性绑定
Vue 内置指令
v-on:事件名
@事件名
事件名
:class="{'active':表达式}"
类绑定
vue 样式隔离
<style scoped>
样式只在当前组件启用
vue 方法
methods:{}
方法
vue 组件中的属性
data(){
return {current:0}
}
JS DOM操作
offsetLeft 左侧偏移值
offsetWidth 元素的宽
scrollLeft 左侧滚动值
Vue中获取Dom
<h1 ref="scroll">
script中获取
this.$refs.scroll
vue 组件的生命周期钩子函数
当vue实例创建时候我们会经历很多过程
每个过程都会有一个回调函数，
我们把这些回调函数称为 生命周期钩子函数
生命周期钩子函数作用
比如我进入组件要发起ajax？
组件渲染好了我要调用dom操作？
进入组件要加入定时器？
离开组件要销毁定时器？
要知道组件视图发生改变？
生命周期钩子函数
创建 渲染 更新 销毁 前后8个
beforeCreate 创建前
created 创建完成（可以使用this）
beforeMount 渲染前
mounted 渲染后（可以操作dom）
beforeUpdate 更新前（执行多次）
updated 更新后（执行多次）
beforeDestroy 销毁前
destroyed 销毁后
子组件向父亲组件传参
1. 子组件通过 $.emit(“事件名”，事件参数)
发送数据个父组件
2. 父组件通过v-on:事件名="$event事件参数”
安装插件
在项目目录
npm install swiper -S
封装swiper为一个组件
.swiper-container
---.swiper-wraper
------.swiper-slide
import Swiper from 'swiper';
import "swiper/css/swiper.css"
mounted(){
this.sw = new Swiper(".swiper-container")
}
