-
VUE全家桶 （Vue-cli、Vue-route、Vuex）学习笔记
Es6
- let 是变量
2.const 1. 是常量不能修改
- 创建的时候一定要赋值 要不报错
- 定义的类 里面的属性值可以修改
3.对象创建
1.可以先定义const name=1；
Const a={name};
输出a的话就是{“name”:1};
- 可以直接放进去函数
Const a={
Run(){
},
Set(){
}
}
4. 遍历 遍历1 for(let i;i
遍历2 for(let i in data) //i 直接为data数据的下标
遍历3 for(let one of data) //one 直接为data相应的数据
5. 函数 ...nub //es6接收参数新特性
function A(...a){
console.log(a);
}
- filter函数 //筛选函数 如果函数return true 那么将返回这个值
let e=n.filter(function(a) {
if(a>30)
return true;
});
- Map函数 //统一操作
- Reduce(function(preValue,n),最开始的preValue值);
一、Vue基础知识
- {{item}}
movies:["asdsad","asdasds","asdasdsa"]- v-once 阻止响应式
- v-html=”数据” 就可以智能实现将代码显示
- v-text=”数据” 直接将数据显示出来
- V-pre 将这个标签内的内容按html显示出来
- v-cloak 标签斗篷，等vue函数真正管理这个组件的时候 因为有的时候电脑卡vue组件加载慢 等加载完以后这标签就自动去除了 配合css使用使用[v-cloak]{display:none}
- v-bind:src=”data” 简写:src=”data” 动态绑定a img 标签的src属性 绑定解析data数据
- v-for=”(item,index) in data” {{item}} //第一个数据 第二个下标 遍历data数组来将标签增加 并且通过{{item}} 来是内容显示到相应的标签上
- :style=”{fontsize:’20px’}” //动态绑定css属性类 如果20px不加引号那么将认为他是变量 去data中寻找 如果找不到将会报错
- :style=”[data1,data2]” //动态绑定css属性数组 data1:{font-size:”20px”}加引号
- 计算属性
调用的时候是{{zz}}不用加() //计算属性一般没有set方法 只读属性 get方法
13.v-on: 语法糖简写为 @click
+
如果函数需要有参数
- 如果设置了小括号
- 有参数 那么参数为这个
- 如果没参数那么就是undifinde
2. 如果没设置小括号
1.那么参数就是事件event
+
//没加括号+
//加括号- 函数获取event事件
给函数实参加上$event 接收以后就是这个事件
- 函数冒泡事件
.stopt //停止冒泡
.prevent //阻止默认行为
@submit.prevent //阻止默认行为，没有表达式
@click.stop.prevent //串联修饰符
@keyup.enter=”onEnter” //键修饰符，键别名
@keyup.13=”onEnter” //键代码，键别名
.click.once //回调只会触发一次
- v-if
aaa{{count}}
//如果为false那么不渲染上页面.
v-else-if
V-else
16.
代码复用 如果不加key的话那么复用的代码会重复显示 key值不一样的话就会避免这种情况 key值一样的话就会复用
给lable标签加上for=“id” 以后点击lebel焦点自动定位到id为id的input上
- v-show=“true” //决定是否显示在页面上 与v-if不同的是这个是加了dispaly：none 属性 v-if 不显示的话 就是代码注释了
- V-for //遍历数组 v-for=”(item,index) in data” item是遍历的数据 index是遍历数据的下标
- {{index}} {{item}}
!!!遍历数组 第一个永远是value 第二个永远是index值
!!!遍历json 第一个永远是value 第二个永远是K值 第三个永远是index值
- v-model //
1.数据双向绑定input标签
2.v-model与radio结合
1-如果几个input按钮 绑定的都是同一个v-model那么 name=” ”这个参数就 可以省略
2-
如果选中这个那么双向绑定的sex值就会是这个input的value
3.v-model与checkbox结合
1-如果被选中那么v-model就是true 相反则为false
并且可以设置小列子比如点击某个按钮以后才可以继续
2.如果panduan为
这种形式 那么v-model的 值为true 或者false如果panduan为
这种形式，那么v-model的值为 这个复选框的value panduan的值将为一个数组4.v-model与select结合跟v-model与radio结合一样
select如果加上属性multiple 就可以将下拉框里面的东西复选了 复选时得按ctrl键
5. v-model修饰符 v-model.lazy //当input标签失去焦点的时候才会改变这个 v-model值
6. v-model 修饰符 v-model.number //因为v-model将得到的值自动转换为string 所以加一个修饰符的话就可以将这个字符串转化为number类型
7.v-model 修饰符 v-model.trim //可以去除字符串首尾的空格
- event.target.value; //目标事件中的value值
- Vue组件开发
- 创建组件构造器 //子模板中最外层必须被div标签包裹要不报错
const cpnc=Vue.extend({
template:`
wojinlaila
`
})
- 注册组件（全剧组件）
Vue.component("cpn",cpnc);
- 注册组件（局部组件） //在components属性中注册
const app=new Vue({
el:"#aaa",
components:{
cpn:cpnc
}
})
- 父子组件 //在组件里面写components属性
const cpnc=Vue.extend({
template:`
wojinlaila
`,
components:{
aa22:cpnc1
}
})
- 应用组件
- 必须在Vue管理的组件下使用
- 语法糖 //可以不用组件构造器 而直接用里面的数据来调用（本身就自 己运行了extend Vue组件构造器）
Vue.component("cpn",{
template:`
wojinlaila
`,
components:{
aa22:cpnc1
}
});
(2)
const app=new Vue({
el:"#aaa",
components:{
cpn:{
template:`
wojinlaila
`,
components:{
aa22:cpnc1
}
}
}
})
- 组件模板放在
-
- 用法
components:{
cpn:{
template:"#muban"//直接把script 模板标签”#id”仍在这就 行
}
}
- 组件放在 里//跟上面那种一样
- 组件模板常量
- 不能通过Vue中的data数据中获得
- 获取变量得是这样 在组件构造中应用data(){return {data:data}}函数
{
template:"#muban",
data(){
return {
title:"woshibiaoti"
}
}
}
-
- 创建一个公共变量则需要在外面定义一个obj data函数返回的时候返回 return这个obj就可以
- 组件模板方法
- 跟组件中的方法定义一样 只是定义在了模板组件构造器中
- 父子模块的信息传输 //用驼峰标识的话可能会报错
- 父传子方式一//数组
- 给儿子定义一个props属性 props:["title"]
- 调用的时候直接在模板标签里面
这样绑定 - 第一个title是子模块的props中的数据
- 第二个title是父模块中的数据
- 模块中使用的时候直接跟Vue实例中使用变量的方法是一样的
- 父传子方式二//json
- 调用方式跟数组一样
- Default属性//默认值
- required属性//必传项
- 数据类型是对象或者数组的时候，默认值必须是一个函数 //因为有的 会报错
- 父传子方式一//数组
- 子传父
-
- 子：在方法函数里面设置this.$emit("自定义事件",data);
-
- 父：在创建子模板标签里加上监听 //函数不用加括号 即使传参了也不加
-
- 父亲的方法里面得有参数
- 父子互传
- 父访问子
- this.$children //添加在父亲方法里面的得到子模板的所有属性
- this.$refs //给子模板标签添加ref=”自定义” 属性 父亲通过方法调用 this.$refs就可以得到这个子模板的属性
- 子访问父
- this.$parent //在子方法里面得到父模板的所有属性
- this.$root //在子方法里面得到父模板的所有属性
- 插槽使用
- 子模板中定义
默认值 这个语句 - 使用子模板标签时 在内部定义的内容都会传到子模板的slot中
- 如果调用时内部没有定义东西那么子模板中的slot标签中的东西就会变成默 认值
- 子模板中定义
- 插槽具名使用
默认值 //给子模板中的slot标签加上name 属性- 调用子模板标签时里面的内容
- 如果调用调用子模板属性中的东西时 属性里面没有slot属性 或者属性不一样那么就不会套进插槽里面
- 作用域插槽
- 在子模板中建立slot标签
- 在父亲的中调用子模板的标签中写入template标签 并加上属性 slot-scope="slot"
- 调用的话直接在{{slot.data}} 这样调用
- 在子模板中建立slot标签
- 模块化
- Js原生模块打包
- 导出 //export
- 在导出前定义好 然后直接通过json形式全部导出
- 如果这样导出 那么用户将自定义 接收
- 导出 //export
export default {} //导出
import app from "./vue/app"; //接收
-
- 导入 //import
- 导入 //import
- Webpack //!!!如果报错几乎都是版本 问题
- 安装 Vue2对应webpack3 //版本问题
npm install webpack@3.6.0 --save-dev
-
- 使用
- 通过js
- Js模块互相引包 如果直接用那个js文件的话 那么htm页面将不认识这个引包
- 使用
必须通过webpack函数使用
创建两个文件夹 src dist 分别为源js文件夹 webpack生成的文件夹
命令：webpack ./src/asd.js ./dist/bundle11.js
-
-
- 如果不想敲那么多命令行
- 可以在终端的当前目录下建立 webpack.config.js文件
- 配置文件中的代码
- 如果不想敲那么多命令行
-
const path=require('path');
module.exports={
entry:"./src/asd.js",
output:{
path:path.resolve(__dirname,"dist"),
filename:"wangzhaoyang.js"
}
}
-
-
-
- 运行代码 直接命令行敲 webpack
- packjson.json启动 可以用本地的webapck防止与总版本兼容
- npm init //初始化一个 package.json的文件
- 然后咱下图中的数据修改
- 好处就是如果webpack版本不兼容的话可以定义内部的webpack来使用
- npm run build //执行命令行
-
-
-
- webpack loader模块 //一定注意版本问题
- 安装npm依赖
- webpack loader模块 //一定注意版本问题
npm install style-loader@0.23.1 --save-dev
-
-
- 安装loader中合适的loader
- npm install --save-dev css-loader@0.28.0 //安装css模块依赖
- npm install less@3.9.0 --save-dev //安装less模块依赖
- 安装loader中合适的loader
-
npm install less-loader@5.0.0 --save-dev //安装less-loader依赖 两个都得装下
-
-
-
- npm install --save-dev url-loader@1.1.2 //安装url依赖
-
-
针对背景图关于css样式里面的url属性
-
-
-
- npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 //安装将es6转化为es5的依赖
- 配置一下得
- npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 //安装将es6转化为es5的依赖
-
-
{
test: /\.js$/,
//exclude 排除因为不想将下面的文件转换为es5
//include 包括
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015'] //这里做一个修改
}
}
}
-
-
-
- npm install vue@2.5.21 --save //安装Vue依赖
- 因为装的版本是简略版run所以直接运行的话会报错得修改下面是两种修改方式
- 方法一：在webpack.config.js文件里面加上这一条属性 原理就是improt Vue from “vue”的时候 他不去找默认的vue文件 而去找咱们那个完整版的文件
- npm install vue@2.5.21 --save //安装Vue依赖
-
-
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
},
-
-
-
-
- 方法二：在引用Vue的时候直接
-
-
-
import Vue from 'vue/dist/vue.js'引用
不再是 import Vue from 'vue'这样引用
⑥npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev //安装关于.vue文件的脚手架
!!!!!!!!!!vue-loader的版本要是不对的话会产生提示这样的插件plugin错误
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
vue-template-compiler 版本号 必须！！和vue的版本统一
- 安装完以后配置webpack.config.js文件
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
}
]
},
- 使用vscode用户可以下载Vetur插件来快速创建vue模板
<template>
//在这里放置模板
template>
<script>
//引用js语句的话一定要在script中使用export default {
name:””
//这里放置除了template 的其余属性data啦啥的
}
script>
<style> //这里放置需要设置的css样式代码
style>
-
-
-
-
- js文件引用vue文件
-
-
-
import app from "./vue/app1.vue";
-
-
-
-
- vue文件也可以对vue文件进行引用
- 如果想引用的时候省略.vue
-
-
-
import app from "./vue/app1";
需要配置webpack.config.js文件里的extensions属性
resolve: {
extensions:['.js','.css','.vue'],//可以让你省去写.js .css .vue 文件名
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js' 别名 可以让你正确的寻找文件
}
},
-
-
- 配置package.json中的文件 //安装的时候npm 加上--save-dev 这个语句的话人家就默认配置
-
"devDependencies": {
"all": "^0.0.0",
"css-loader": "^0.28.0",
"style-loader": "^0.23.1",
"webpack": "^3.6.0"
}
-
-
- 配置webpack.config.js文件
- 下面中的有个坑 use属性 里面的东西执行顺序是从右向左执行
- 配置webpack.config.js文件
-
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
-
-
- 在要打包的js文件里面调用css
-
require("./css/aaa.css");
-
-
- 开始启动
-
-
- 添加版权的Plugin
⑦npm install --save-dev html-webpack-plugin@3.2.0//安装将html转化到dist目录下
- 需要配置webpack.config.js文件
const HtmlWebpackPlugin=require("html-webpack-plugin");
//然后给module.exports 里面配置属性
plugins:[
new webpack.BannerPlugin("最终版权归王朝阳所有"),
new HtmlWebpackPlugin({})
],
打包的文件的html文件默认是引用了这个打包后js文件的那个html
也可以自己配置 里面的属性 template那个属性就是要打包的文件
new HtmlWebpackPlugin({
template:"a.html"
})
-
- js压缩的Plugin
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
将自动把要压缩的js文件压缩
-
- 搭建本地服务器 //vscode 中有一个live sever插件挺好使
npm install --save-dev webpack-dev-server@2.9.1
webpack.config.js文件里面配置
- 运行服务器方法一
直接在命令行中敲出
node_modules\.bin\webpack-dev-server
- 再package.json文件夹中 script属性下 设置
"scripts": {
"dev":"webpack-dev-server --open"
},
其中 --open 的意思是运行服务器的时候直接打开
-
- 配置文件的分离
npm install webpack-merge@4.1.5 --save-dev
建立一个build文件夹 里面放置三个文件
base.config.js //公共配置文件
dev.config.js //测试文件
prod.config.js //生产文件
测试文件里面的代码格式为
const uglifyJsPlugin=require("uglifyjs-webpack-plugin");
const webpackMerge=require("webpack-merge");
const baseConfig=require('./base.config')
module.exports=webpackMerge(baseConfig,{plugins:[
new uglifyJsPlugin(),
]})
使用：在原先的package.json 文件里面自己设置的build dev属性修改
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
},
在公共的webpack.config.js文件中（自己定义了一个base.config.js 就是这个东西）修改他的出口path设置 要不就会在自己刚创建的build文件夹中打包自己写的代码
output:{
path:path.resolve(__dirname,"../dist"), //在这里修改
filename:"wangzhaoyang.js"
},
- Vue CLI
- 安装 npm install -g @vue/cli
- 查看版本 vue -V
- 初始化vue init webpack 项目名称 //Vue CLI2
vue create 项目名称 //Vue CLI3
如果装脚手架失败 试试下面这两个
vue ui
- vue-router
- 使用直接初始化vue init webpack 项目名称里面选中vue-router //Vue CLI2
- 在项目router目录有一个index.js文件
//配置路由
import Vue from 'vue'
import Router from 'vue-router'
// 将要显示的vue文件引入到这里
import about from "../components/about.vue"
import home from "../components/home.vue"
//让Vue使用Router插件
Vue.use(Router)
//配置路由和组件的关系
export default new Router({
routes: [
{
path: '/about',
component: about
},
{
path: '/home',
component: home
}
]
})
- 使用路由 //将下面的东西放到要渲染的页面上面
<router-link to="/about">aboutrouter-link>
<router-view>router-view>
- 配置的一些小细节
- 修改路由映射
routes: [
{
path: '/',
redirect:"/ahome" //可以将将上面的路由映射到这里
},]
-
- 默认hash值 修改为htmlhistory路由
添加一条属性mode:”history”
export default new Router({
routes: [
],
mode:"history" //添加这一条
})
-
修改渲染的目标dom 默认a标签
加一条tag=”要渲染成的dom标签”
<router-link to="/home" tag="button">homerouter-link>
-
- 不留下历史记录 直接添加一个replace属性
那么访问这个就不会留下浏览记录
<router-link to="/home" tag="button" replace>homerouter-link>
-
- 如果匹配到路由以后会自动添加一个class
修改class名方法1：
<router-link to="/home" active-class="abc">homerouter-link>
修改class名方法2：
export default new Router({
routes: [
],
mode:"history",
linkActiveClass:"aac" //或者这样在这里修改
})
-
- 设置跳转路由
通过添加监听 仔方法里设置下面的语句
this.$router.push("/home"); //有浏览记录
this.$router.replace("/home");//无浏览记录
如果跳转到相同路由会报错的 下面这样就没事了
this.$router.replace("/home").catch(err => err);
- 动态路由
- 配置路由
{
path: '/use/:name1',
component: use
},
<router-link :to="'/use/'+name1">userouter-link>
-
- 小知识
- $routers 是路由
- $route 是当前正用的路由
- 小知识
this.$route.params.name1;
通过这个可以得到自定义的路由name1
- 路由的懒加载
用到的时候才会调用
const about=()=>import("../components/about.vue")
- 路由的嵌套
- 将模板引入这个路由index文件
const newabout=()=>import("../components/newabout.vue")
- 定义路由 //children 里面子路由的path不用加”/” 否则渲染不上去
{
path: '/about',
component: about,
children:[
{
path:"newabout", //不是"/newabout"
component:newabout
},
{
path:"newhome",
component:newhome
}
]
},
- 使用路由 //一定要写全路由格式
<router-link to="/about/newhome">newaboutrouter-link>
- 路由传参
- 调用路由语句
<router-link :to="{path:'/profile',query:{age:1}}">档案router-link>
router-link标签中的to属性 设置为动态监听： 然后里面的东西改为json类型数据
其中query属性里面传的就是参数 /profile?age=1
- 得到传的结果
$route.query.age
- js传参
dianji(){
this.$router.push({
path:"/profile",
query:{
name11:"wangzhaoyang"
}
}).catch(err => err);
}
- 路由守卫（路由钩子）
- 全局守卫（钩子）
//全局守卫
//前置钩子
Router1.beforeEach(function(to,from,next){
document.title=to.meta.title; //这里meta是理由一里面的元数据 数据的话可以定义在这里
console.log(to);
next();
})
//后置钩子 没有next 不用主动进行next函数
Router1.afterEach(function(to,from){
console.log("!");
})
2.局部守卫（钩子）
beforeEnter:function(to,from,next){
console.log("我是子路由进来了");
next();
}
定义在路由里面 监听这一个路由 有多种守卫
next() 函数里面可以定义路由 可以定义json类型的路有数据路径啦啥的
- keep-live 遇见vue-router 路由缓存
- 先将含有子路由的组件用 keep-live标签包裹住vue-router
<keep-alive>
<router-view>router-view>
keep-alive>
-
- 通过建立data 数据保存 路由
data(){
return {
path:"/about/newabout"
}
},
-
- 通过这两个 函数调用
activated(){
//这行语句是防止路由重读加载报错
if (this.path === this.$route.path) return;
this.$router.push(this.path);
console.log("huoyue");
},
beforeRouteLeave(to,from,next){
this.path=this.$route.path;
next();
}
-
- 坑 这俩函数必须被 keep-live标签包裹才能使用
！！！注意包裹的是他上一级路由的
要不不能使用 deactivated(){
},
activated(){
},
-
- include exclude
<keep-alive include="wa,name1">
<router-view>router-view>
keep-alive>
- Promise
其中resolve是将数据传给下一个then函数 reject的话直接将数据传给最后的错误处理函数
多个路由都需要的话 那么promise.all函数 其中then中接受的参数是数组 第一个数据是第一个写的resolve函数的数据
- Vuex
npm install vuex 直接安装最新的不用顾忌版本问题
- 使用
Vue.use(Vuex) //安装插件
const store=new Vuex.Store({
//跟data数据一样
state:{
counter:100
},
//跟方法一样
mutations:{
increment(state,jieshow){ //通过这样设置 就可以接受参数了
state.counter+=jieshow;
}
},
// action是处理异步的mutations 用来放一些请求或者异步操作
actions:{
},
//跟计算方法一样
getters:{
powercount(state){
return function(age){
return age
};
}
},
//这里可以以json的形式保存以上各种形式 将上面的东西模块化了
modules:{
}
})
export default store
- 渲染进 main.js 函数里面
new Vue({
el: '#app',
store, //通过组件渲染进Vue全局里面这样就可以全局使用
components: { App },
template: '
' })
3.
使用mutations
this.$store.commit("increment",13); //第二个值为参数
特殊的提交风格
使用getters //相当于计算方法
$store.getters.powercount(12) //这样写就可以传参数了
getters:{
powercount(state){
return function(age){ //通过这样设置 就可以接受参数了
return age
};
}
}
action的使用方法
modules
mutation使用
- Axios
csdn 最全的讲解 axios详解_Hello Simon的博客-CSDN博客
1.基本实现方法
//1.执行GET请求
import axios from 'axios'
axios.get('/user?ID=12345') //返回的是一个Promise
.then(res=>console.log(res))
.catch(err=>console.log(err));
//2.可配置参数的方式
axios.get('/user',{
params:{
ID:12345
}
}).then(res=>console.log(res))
.catch(err=>console.log(err));
2.并发方法 加上
//发送多个请求(并发请求)，类似于promise.all，若一个请求出错，那就会停止请求
const get1 = axios.get('/user/12345');
const get2 = axios.get('/user/12345/permission');
axios.all([get1,get2])
.then(axios.spread((res1,res2)=>{
console.log(res1,res2);
}))
.catch(err=>console.log(err))
axios.spread /可以将数据结构为res1 ,res2
axios.spread((res1,res2)=>{
console.log(res1,res2);})
3.可用axios,create([config])来创建一个新的实例，并设置相关属性
const instance = axios.create({
baseURL: 'http://localhost:3000/api/products',
timeout: 1000,
headers: {'X-Custom-Header':'foobar'}
});
//instance的使用
instance.get('/user',{
params:{ID:12345}
}).then(res=>console.log(res))
.catch(err=>console.log(err))
- 拦截器interceptors
//添加一个请求拦截器
axios.interceptors.request.use(config=>{
//在请求之前做一些事
return config; //！！！！！！必须return要不报错
},err=>{
//请求错误的时候做一些事
return Promise.reject(err);
});
//添加一个响应拦截器
axios.interceptors.response.use(response=>{
//对返回的数据做一些处理
reutrn response; //！！！！！！必须return要不报错
},err=>{
//对返回的错误做一些处理
return Promise.reject(err);
});
-
-
相关阅读:
Linux环境下JDK1.8的安装（保姆级教程）
解决uniapp手机真机调试时找不到手机问题
754、到达终点数字
恒太照明在北交所上市：募资规模缩水三成，第三季度收入下滑
数据合并与对比
详解JS的四种异步解决方案：回调函数、Promise、Generator、async/await
springboot项目中application.properties无法变成小树叶问题解决
ORACLE 通过数据值查找找表名和字段名
手把手开发Admin 系列三（自定义模板篇）
python+opencv实现人脸微整形
- 原文地址：https://blog.csdn.net/qq_59747594/article/details/127935617
