vue
2019-01-02 20:59:42 0 举报AI智能生成
vue vuex
作者其他创作
大纲/内容
网址
es6常用语法
变量的定义
var变量的提升
const常量的定义
let块级作用域
模板字符串
变量 ${}
箭头函数
类比python的匿名函数lamda let fun2 = x => x+1;
console.log(fun2(5))
console.log(fun2(5))
this
普通函数取决于函数最近的调用者
箭头函数取决于当前上下文的环境
数据的解构
对象
let{key,key}=obj
数组
let [x,y,z]=array
定义类
class
构造方法 constuctor
继承 extends
子类没有this 需要用super方法找到父类的this
vue的常用指令 都是等于一个变量
声明一个Vue对象 在data中写变量
声明一个Vue对象 在data中写变量
v-text
innerText
v-html
innerHtml
v-for
v-if v-else-if v-else appendChild
v-show
display
v-bind
绑定属性 简写：
v-on methods
绑定事件 简写@
v-model
数据的双向绑定
vue指令修饰符
.lazy 懒加载
.number
自定义指令
Vue.dirctive("指令名称", function(el, binding){
el 绑定指令的标签元素
binding 指令的所有信息组成的对象
value 指令绑定数据的值
modifires 指令修饰符
})
el 绑定指令的标签元素
binding 指令的所有信息组成的对象
value 指令绑定数据的值
modifires 指令修饰符
})
.trim
获取DOM
给标签加ref属性 ref=‘xxxx’
this.$refs.xxxx
this.$refs.xxxx
计算属性
computed
放入缓存 当数据改变的时候才会重新执行计算
跟data中数据的区别
放入缓存 当数据改变的时候才会重新执行计算
跟data中数据的区别
数据的监听 watch去监听
字符串
监听到改变新的值和旧的值不同的
数组
-- 只能监听到长度的变化 新旧值相同的
-- 改变数组值的时候监听不到
必须用$set(array, index, value)
新旧值相同的
-- 改变数组值的时候监听不到
必须用$set(array, index, value)
新旧值相同的
对象
vue组件
全局注册
任何Vue实例里用
<组件名称></组件名称>
任何Vue实例里用
<组件名称></组件名称>
-- Vue.component("组件名称", {
template: `只识别一个块级作用域`,
data(){
return{
name: xxxx
}
},
methods: {},
})
template: `只识别一个块级作用域`,
data(){
return{
name: xxxx
}
},
methods: {},
})
局部注册
<div><组件名称></组件名称></div>
<div><组件名称></组件名称></div>
-- let com_config = {.....}
-- const app = new Vue({
el: "#app",
components: {
组件名称： com_config
}
})
-- const app = new Vue({
el: "#app",
components: {
组件名称： com_config
}
})
子组件的注册
-- 在父组件的template里展示子组件
<child></child>
-- 在父组件的template里展示子组件
<child></child>
在父组件里 components: {
子组件的名称： 子组件的配置信息
}
子组件的名称： 子组件的配置信息
}
通信
父子通信
先给子组件绑定属性
在子组件通过props:["属性名称"]
在子组件通过props:["属性名称"]
子父通信
-- 子组件先提交事件
this.$emit("事件名称"， data)
-- 父组件 给子组件绑定事件
自己处理这个事件
this.$emit("事件名称"， data)
-- 父组件 给子组件绑定事件
自己处理这个事件
非父子通信
-- 定义一个中间调度器
let Event = new Vue();
-- 其中一个组件向中间调度器提交事件
Event.$emit("事件名称", data)
-- 另一个组件要监听中间调度器里的事件
Event.$on("事件的名称", function(data){
注意this的问题
})
let Event = new Vue();
-- 其中一个组件向中间调度器提交事件
Event.$emit("事件名称", data)
-- 另一个组件要监听中间调度器里的事件
Event.$on("事件的名称", function(data){
注意this的问题
})
混合
-- 复用共用的代码块
-- mixins: [base]
-- mixins: [base]
插槽
-- 实现组件内容的分发
-- slot
-- 直接用slot标签
-- 命名的slot
-- 先给slot加name属性
-- 给标签元素添加slot属性= name属性值
-- slot
-- 直接用slot标签
-- 命名的slot
-- 先给slot加name属性
-- 给标签元素添加slot属性= name属性值
vue的路由
$route 路由的所有信息组成的对象
$route 路由的所有信息组成的对象
注册
- 定义一个匹配规则对象
let url = [
{
path: "/",
component: {
}
}
]
2.实例化VueRouter对象 并把匹配规则注册进去
let router = new VueRouter({
routes: url
})
let router = new VueRouter({
routes: url
})
3. 把VueRouter实例化对象注册Vue的根实例
const app = new Vue({
el: "#app",
router: router
})
const app = new Vue({
el: "#app",
router: router
})
router-link
router-view
router-view
子路由的注册
在父路由里注册children: [{},{}]
在父路由对应的组件里的template里
写router-link router-view
写router-link router-view
路由的命名
name
-- 注意to一定动态绑定 :to="{name: ''}"
-- 注意to一定动态绑定 :to="{name: ''}"
路由的参数
this.$route.params.xxxx
this.$route.query.xxxx
this.$route.query.xxxx
手动路由
this.$router.push("/course")
this.$router.push({name:'', params:{},query: {})
this.$router.push({name:'', params:{},query: {})
钩子函数
router.beforeEach(function(to, from, next){
to 你去哪里
from 你从哪里来
next 你接下来要做什么
})
路由的重定向
to 你去哪里
from 你从哪里来
next 你接下来要做什么
})
路由的重定向
router.afterEach(function(to, from){})
Vue的生命周期
子主题
Vue的生命周期
beforecreated ：el 和 data 并未初始化
created：完成了data数据的初始化 el 没有
beforeMount：完成了el 和 data的初始化
mounted：完成了挂载
beforeupdate
updated
beforedestroy
触发了destroy相关的钩子函数，也就是说组件被销毁~
更改message的值~DOM中的值不变~也就是说DOM元素依然存在只是不受vue控制了~~
触发了destroy相关的钩子函数，也就是说组件被销毁~
更改message的值~DOM中的值不变~也就是说DOM元素依然存在只是不受vue控制了~~
destroyed
npm,webpack,vue-cli
node.js npm
Node.js
就是运行在服务端的JavaScript，
基于Chrome V8 引擎的。
就是运行在服务端的JavaScript，
基于Chrome V8 引擎的。
node -v查看node的版本
npm
npm 是Node.js 的包管理工具。
npm init -y
输入-y使用默认配置项 生成package.json文件
安装npm install xxxx@0.0.0
卸载 npm uninstall
列出已安装的依赖 npm list
npm -v 查看npm版本信息
模块打包器webpack
默认的入口文件
手动创建的src/index.js
手动创建的src/index.js
默认的出口文件
dist/main.js
dist/main.js
全局安装 npm install webpack webpack-cli -g -D
模式区分·
webpack --mode development/
production
webpack --mode development/
production
development 开发者模式 打包默认不压缩代码
production 生产者模式 上线时使用，压缩代码。 默认是这个模式
vue-cli
脚手架帮助我们搭建Vue项目的
下载
npm i vue-cli -g
搭建项目
vue init webpack 项目名称
项目的启动
cd 项目目录下
npm run dev
npm run dev
vue-cli项目目录
build 打包后存放的所有文件包括配置文件
config 配置文件
node_models 依赖包
src 工作目录
static 静态文件
index.html 单页面应用
package.json 存放所有项目信息
config 配置文件
node_models 依赖包
src 工作目录
static 静态文件
index.html 单页面应用
package.json 存放所有项目信息
路由的解耦
下载 npm i vue-router
-- 导入 import VueRouter from "vue-router"
-- Vue.use(VueRouter)
-- 定义匹配规则url
-- 实例化VueRouter
-- 把VueRouter对象注册到Vue的根实例里
-- 导入 import VueRouter from "vue-router"
-- Vue.use(VueRouter)
-- 定义匹配规则url
-- 实例化VueRouter
-- 把VueRouter对象注册到Vue的根实例里
vuex axios
vuex
下载 npm i vuex
store文件夹index.js
注意：
每个组件存放仓库中的数据用计算属性
Vue.use(Vuex)
export default new Vuex.Store({
state: {
存放所有的公用数据
}
})
注意：
每个组件存放仓库中的数据用计算属性
import Vuex from "vuex"
import Vue from "vue"
import Vue from "vue"
Vue.use(Vuex)
export default new Vuex.Store({
state: {
存放所有的公用数据
}
})
getters
getters 给state中的数据做二次处理的
{
数据名称：function(state, getters){
return state.xxx + "文周"
}
}
数据名称：function(state, getters){
return state.xxx + "文周"
}
}
-- 组件中得到getters中数据
this.$store.getters.xxxx
this.$store.getters.xxxx
mutations
任何一个组件想要修改仓库中的数据必须告诉仓库
-- 给仓库提交事件
this.$store.commit("事件名称", data)
-- 给仓库提交事件
this.$store.commit("事件名称", data)
mutations: {
事件名称: function(state, data){
state.xxx = data
}
}
事件名称: function(state, data){
state.xxx = data
}
}
main.js
import store from "store文件夹index.js"
把store注册到Vue的根实例里
new Vue({
el: "",
router,
store
})
new Vue({
el: "",
router,
store
})
axios
下载 npm i axios
导入 import axios from "axios"
加入Vue的原型链 Vue.prototype.$axios = axios
在每个组件里发送请求
this.$axios.request({
url: 接口地址，
method: 请求方式
data: 请求数据
headers： 请求头
}).then(function(data){})
.catch(function(data){})
this.$axios.request({
url: 接口地址，
method: 请求方式
data: 请求数据
headers： 请求头
}).then(function(data){})
.catch(function(data){})
跨域
原因
浏览器的同源策略进行阻拦
浏览器的同源策略进行阻拦
解决办法
JsonP
利用浏览器同源策略不阻止src的请求
利用浏览器同源策略不阻止src的请求
中间件定义mycore允许通过
简单请求
复杂请求
0 条评论
下一页
