vue总结
MVC Model View Controller
MVVM Model View ViweMode
ES6常用语法
1.1 变量的提升
1.2 模板字符串 ``${}
1.3 数据的解构
1.4 类 class extends constructor super
1.5 函数
1.5.1 注意this和普通函数的区别
1.6 箭头函数
1.7 单体模式
1.8 import export export default
Vue常用指令
2.1 v-text innerText
2.2 v-html innerHtml
2.3 v-for :key
2.4 v-if v-else-if v-else appendChild
2.5 v-show display
2.6 v-on @xxxx="自己处理的方法"
2.7 v-bind :属性名称=“属性的值”
2.8 v-model
2.8.1 input
2.8.2 textarea
2.8.3 select
2.9 指令修饰符
2.9.1 .lazy
2.9.2 .number
2.9.3 .trim
2.10 计算属性
2.10.1 放入缓存
2.10.2 只有数据改变的时候才会重新计算
2.11 数据监听
2.11.1 注意可变类型和不可变
2.11.2 深监听 deep=true
2.12 获取DOM
2.12.1 给便签绑定ref属性 ref=“属性值”
2.12.2 this.$refs.属性值
2.13 自定义指令
2.13.1 vue.directive(“指令名称”, function(el, binding){
el 绑定指令的便签元素
binding 指令的所有信息
})
注意事项
3.1 数据监听
3.1.1 改变数据
直接赋值
3.1.2 改变数组长度
能够被监听到，新值和旧值一样
3.1.3 改变数组内的值
app = new vue({})
app.$set(this.hobby, 0, '抽烟')
$set()修改数组中的值可以监听
$delete()
Vue的组件
组件的注册
全局注册
Vue.compontent(“组件名称”, {})
局部注册
const = app = new Vue({
el: '#app',
components: {
组件的名称: 组件的配置信息
}
})
子组件的注册
在父组件中注册components
## 注意写组件标签
## 每个组件的template只识别一个作用域块
通信
父子的通信
在父组件中给子组件绑定属性
子组件通过props=["属性名称"]
子父的通信
子组件先提交事件
this.$emit("事件名称", 值)
在父组件中给子组件绑定事件
<child @事件名称="父亲处理的方法"></child>
非父子的通信
其中一个组件向中间调度器提交事件
另一个组件监听中间调度器的事件
注意this的问题
中间调度器 let temp = new Vue();
temp.$emit("say", value) // 事件名称和值
mounted(){
that = this
// 监听中间调度器中的方法
temp.$on("say", function(data){
// 这里的this是temp的this
that.xxx = data // 这样改值
})
}
插槽
<slot></slot>
命名的插槽
混合
代码重用的
mixins = [base]
Vue的生命周期
vue生命周期之beforeCreate
实例创建之前除标签外，所有的vue需要的数据，事件都不存在
vue生命周期之created
实例创建之后，data和事件已经被解析到，el还没有找到
vue生命周期之beforeMount
开始找标签，数据还没有被渲染，事件也没有被监听
vue生命周期之mounted
开始渲染数据，开始监听事件
vue生命周期之beforeUpdata
数据已经被修改在虚拟DOM，但没有被渲染到页面上
vue生命周期之updata
开始使用Diff算法，将虚拟DOM中的修改应用大页面上，此时真实DOM中数据被修改
vue生命周期之beforeDestory
所有的数据都存在
vue生命周期之destoryed
所有的数据都有(虚拟DOM中找数据)展示的真实DOM已经是静态页面了
<keep-alive></keep-alive>vue提供的用来缓存被消除的标签
用activated和deactivated取代了beforeUpdate和destory的执行
最常用的钩子
beforeMount
mounted
路由
注册
let url = [
{
path: '/',
name: "home",
component: {
template: ``,
}
}
]
let router = nwe VueRouter({
routes: url
})
const app = new Vue({
el: 'app',
router: router,
})
<router-link to='/'>首页</router-link>
<router-link :to='{name: "home"}'>首页</router-link>
<router-view></router-view>
子路由
children: [
{}
]
append
在父路由对应的组件的template里面写router-link router-view
路由的命名
name
注意to加冒号动态绑定
路由的参数
{
path: "/course/:id",
}
this.$route.params.id
this.$route.query.xxx
$route 是一个对象 存放当前路由的所有信息
$router VueRouter实例化对象
手动路由
this.$router.push('/')
this.$router.push({name:"home"})
重定向
redirect: {name: 'xxx', params: {key: value}}
路由的钩子
router.beforeEach(function(to, from next){
// to 你要去哪
// from 你要从哪里来
// next() 你要去做什么 参数可以给路径 必须有，没有就不走
})
router.afterEach(function(to, from){
// to 你要去哪
// from 你从哪里来
})
to和from都是$route对象 路由的所有信息
node.js + npm + webpack + vue-cli(自带webpack)
node.js / npm
- npm 管理工作目录
npm init -y
- 下载包
npm i xxx@0.0.0
- 卸载
npm uninstall xxx
- 更新
npm updata xxx
webpack 4
- 下载
npm i webpack webpack-cli
- 打包
webpack --mode development/production
- 打包默认的入口文件
src目录下的index.js
- 出口文件
dist目录的main.js
wue-cli 2
- 帮助我们快速搭建项目的脚手架工具
- 下载
npm i vue-cli
- 用vue-cli帮助我们创建项目
vue init webpack xxxx(项目名称)
- 启动项目
cd xxxx(项目名称)
npm run dev
- 打吧包
npm run build
Vuex和axios
Vuex
存放一些公共的东西,是一个仓库
安装
npm i vuex
配置
导入
import vuex from "vuex"
vue使用vuex
vue.use(vuex)
实例化仓库
new vuex.Store({
state: {},
getters: {},
mutations: {}
})
new Vue({
el: '#app',
store,
})
获取残仓库数据
this.$store.state.xxx
this.$store.getters.xxx
改变仓库中的数据
组件向仓库提交修改事件
this.$store.commit("事件名称", data)
在仓库中的mutations中
mutations: {
"事件名称": function(state, data){
修改state中的数据
}
}
注意计算属性
仓库中的数据建议都放在计算属性中
axios
向后端服务器发送请求
实现ajax技术的工具
配置
下载
npm i axios
导入
import axios from “axios”
在vue的原型链中加入方法
Vue.prototype.#axios = axios
发送请求
this.$axios.request({
url: '',
method: '',
}).then(function(){
}).catch(function(){
})
前后端的接通
后端设计一个接口
前端通过axios发送请求拿到数据
跨域问题
element-ui
按照文档安装，并研究如何使用
