Vue前端基础学习

vue-cli

vue-cli 官方提供的一个脚手架（预先定义好的目录结构及基础代码，咱们在创建Maven项目的时可以选择创建一个骨架项目，这个骨架项目就是脚手架），用于快速生成一个vue项目模板

主要功能

统一的目录结构
本地调试
热部署
单元测试
集成打包上线

环境准备

Node.js
git

安装vue-cli

安装Node.js

官网安装地址：https://nodejs.org/zh-cn/
验证是否安装成功，在cmd输入： node-v

npm install --registry=https://registry.npm.taobao.org

安装vue-cli

npm install -g @vue/cli

验证是否安装成功

vue list

创建一个简单的demo

在桌面创建一个目录，然后cd进入到该目录输入：
**vue init webpack firstvue(项目名称) **
然后回车4次，n，n，n，n，No，I will handle that myself

cd firstvue
**npm install **
npm run dev

目录结构

build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件。
|
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |

Vue基础语法

条件渲染

条件判断语句

v-if
v-else

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1 v-if="awesome">Vue is awesome</h1>
        <h1 v-else>Oh no 😩</h1>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                awesome: true
            }
        })
    </script>
</body>
</html>

v-else-if

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>连续判断语句</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-if="type === 'A'">A</div>
        <div v-else-if="type === 'B'">B</div>
        <div v-else-if="type === 'C'">C</div>
        <div v-else>Not A/B/C</div>
    </div>
    
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                type: "A"
            }
        });
    </script>
</body>
</html>

列表渲染

循环遍历语句

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <ul id="example-1">
        <li v-for="item in items">
            {{item.message}}
        </li>
    </ul>

    <script>
        var app = new Vue({
            el: "#example-1",
            data: {
                items: [
                    { message: "Foo" },
                    { message: "Bar" }
                ]
            }
        })
    </script>
</body>
</html>

事件处理

v-on

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="example-1">
        <button v-on:click="greet">Greet</button>
    </div>

    <script>
        var app = new Vue({
            el: "#example-1",
            data: {
                message: "Hello Vue123456"
            },
            methods: {
                greet: function () {
                    // alert('Hello Vue');
                    alert(this.message);
                }
            }
        });
    </script>
</body>
</html>

使用Axios实现异步通信

什么是Axios

Axios 是一个开源的可以在浏览器端和Node.js的异步通信框架，它主要作用是实现AJAX异步通信，其功能特点如下：

从浏览器中创建XML HttpRequests
从node.js创建http请求
支持Promise Api（链式编程）
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换json格式
客户端支持防御XSRF

第一个Axios应用程序

{
    "name":"百度",
    "url":"http://www.baidu.com",
    "page":66,
    "isNonProfit":true,
    "address":{
        "street":"海定区",
        "city":"北京市",
        "country":"中国"
    },
    "links":[
        {
            "name":"Google",
            "url":"http:www.google.com"
        },
        {
            "name":"baidu",
            "url":"http://www.baidu.com"
        },
        {
            "name":"Sougou",
            "url":"http://www.sougou.com"
        }
    ]
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios应用程序</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <div>
            名称:{{info.name}}
        </div>
        <div>
            url:{{info.url}}
        </div>
        <ul>
            <li v-for="link in info.links">
                {{link.name}}--->{{link.url}}
            </li>
        </ul>

    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data() {
                return {
                    info: {
                        name: '',
                        url: '',
                        links: []
                    }
                }
            },
            mounted() {
                axios
                    .get('data.json')
                    .then(response => this.info = response.data)
            }
        })
    </script>
</body>
</html>

成功图：

表单输入绑定

v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单输入绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message" />
        <p>Message is :{{message}}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue"
            }
        })
    </script>
</body>

</html>

多行文本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行文本</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <span>Multiline message is:</span>
        <p style="white-space: pre-line;">{{message}}</p>
        <br>
        <textarea v-model="message" placeholder="add multiple lines"></textarea>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue"
            }
        })
    </script>
</body>

</html>

复选框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="checked" id="ch" />
        <label for="ch">复选框的状态{{checked}}</label>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                checked: true
            }
        })
    </script>
</body>

</html>

复选框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="jack">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="jack">Mike</label>
        <br>
        <span>Checked names:{{checkedNames}}</span>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                checkedNames: []
            }
        })
    </script>
</body>

</html>

单选框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单选框</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                picked: ''
            }
        })
    </script>
</body>
</html>

选择框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择框</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                selected: ''
            }
        })
    </script>
</body>
</html>

复选框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="checked" id="ch" />
        <label for="ch">复选框的状态{{checked}}</label>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                checked: true
            }
        })
    </script>
</body>

</html>

Vue组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
        </ul>

    </div>

    <script type="text/javascript">
        // 定义一个组件
        Vue.component("my-component-li", {
            props: ["item"],
            template: '<li>{{item}}</li>'
        })
        var app = new Vue({
            el: '#app',
            data: {
                items: ["A", "B", "C"]
            }
        })
    </script>
</body>

</html>

计算属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>当前时间方法:{{getCurrentTime()}}</p>
        <p>当前时间属性:{{getCurrentTime1}}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                getCurrentTime: function () {
                    return Date.now();
                }
            },
            computed:{
                getCurrentTime1:function(){
                    return Date.now();
                }
                
            }
        })
    </script
</body>
</html>

插槽与自定义事件

插槽确定组件的一个位置
todo 后续补充

Webpack

什么是webpack？
本质上，webpack是一个现代JavaScript应用程序静态模块打包器。当webpack处理应用程序时，它会递归地构造一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bandle

安装webpack

npm install webpack -g
npm install webpack-cli -g

一个简单的demo
创建一个webpack的文件夹
在webpack中创建一个文件webpack.config.js 和 index.html
在webpack中创建一个子文件夹modules
在modules中创建hello.js和main.js
main.js

var hello = require("./hello");
hello.sayHi();

hello.js

exports.sayHi = function(){
    document.write("<div>Hello webpack,ranyong222</div>");
}

webpack.config.js

module.exports = {
    entry: "./modules/main.js",   // 入口文件
    output: {
        filename: "./js/bundle.js"
    }
}

进行webpack打包
cd到webpack目录下
命令行输入：webpack
webpack会出现一个dist的文件夹

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack一个简单的demo</title>
</head>

<body>
    <script src="dist/js/bundle.js"></script>
</body>

</html>

这样就可以在ES5 ES6的浏览器中使用了

Vue-router

什么是vue-router？
Vue-router是Vue.js 官方的路由管理器。它和Vue.js 的核心深度集成，让构建单页应用变得易如反掌。它的功能有：

嵌套的路由/试图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue.js过渡系统的试图过渡效果
细粒的导航控制
带有自动激活的CSS class 的链接
Html5 历史模式或hash 模式，在IE9中自动降级
自定义的滚动条行为

安装vue-router

npm install vue-router --save-dev

todo 需要详细写全这个路由

整合ElementUI

什么是ElementUI？
Element-UI是饿了么前端团队推出一款基于Vue.js 2.0的桌面端UI框架

安装ElementUI

npm i element-ui -S

安装 SASS 加载器

npm install sass-loader@7.3.1 node-sass --save-dev

快速上手

https://www.bilibili.com/video/BV1zo4y1C7LH?p=22&spm_id_from=pageDriver

嵌套路由

什么是嵌套路由？
嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件结合而成。同样的，URL中各段动态路径也按某种结构对应嵌套各层组件

快速上手

https://www.bilibili.com/video/BV1zo4y1C7LH?p=25&spm_id_from=pageDriver

参数传递

什么是参数传递？
我们经常需要把某些模式匹配到所有路由，全都映射到同一个组件。例如，我们又一个User组件，对于所有ID各不同的用户，都要使用这个组件来渲染。此时我们就需要传递参数了

快速上手

https://www.bilibili.com/video/BV1zo4y1C7LH?p=26&spm_id_from=pageDriver

组件重定向

https://www.bilibili.com/video/BV1zo4y1C7LH?p=27&spm_id_from=pageDriver

路由中的钩子函数

before eRouteEnter: 在进入路由前执行
before eRouteLevave:在离开路由前执行

Vuex

什么是vuex？
Vuex是一个专门为vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

安装

npm install vuex --save

vue踩坑记录

vue增加路由

假设你需要进行路由跳转
类似：http://localhost:8080/ --> http://localhost:8080/detail
你需要做到以下几点才能进行跳转
第一步：创建好自己的vue文件

第二步：在你的router文件夹中的index.js进行引用

vue子组件挂载父组件

假设在一个文件夹写了很多子组件vue文件，你需要一个父组件进行管理
你可以创建N个子组件，一个父组件

然后需要加进行展示，就需要利用到父组件进行展示
这时候就需要引入子组件进来

vue cli 代理设置

假设我们不希望这么多地址暴露出来：

而希望像这样：

那么我们可以采用代理的方法解决大串字符
第一步：找到vue.config.js 文件夹(通常放在了vue项目的根目录)
第二步：添加或修改配置

module.exports = {
	devServer:{
		port: '8080', // 设置端口号
		proxy: {
			'/api':{
			target: " ", // API服务的地址
			ws: true, //代理websockets
			changeOrigin: true, // 是否跨域
			pathRewrite: {
				'^/api': '',
				}
			}
		}
	}
}

例子：

访问本地静态资源

如果我们需要访问本地静态资源：

我们需要将需要访问的对象放置与public文件夹下

然后就可以访问到了：http://localhost:8080/mock/img/swiper1.jpg
不需要输入public： http://localhost:8080/~~public~~/mock/img/swiper1.jpg

路由的跳转

如果你想实现路由之间的相互跳转，你需要用到router-link语法
方法一：

<router-link :to="{ path: 'home' }">Home</router-link>

举个例子：（前提你需要到router里 index.js 引入你需要的路由）

（前提条件）引入路由：

方法二：

在vue项目中使用stylus

首先你需要安装stylus

需要先卸载 npm uninstall stylus-loader
然后在安装 别的版本:npm i stylus-loader@3.0.2 -S

其次就是创建一个.styl的一个文件(举个例子)

var.styl
$bgColor = #00bcd4
$textColor = #fff

最后就是使用到的文件中导入stylus

@import '~@/assets/css/var.styl'

tips:
在 .css文件中不需要加～
在 .style文件中需要加～

.header{
  width: 100%;
  line-height: .88rem;
  background: $bgColor;   // 使用styl
  color: $textColor;	// 使用styl
  font-size: .36rem;
  display: flex;
}

vue中使用axios请求

假设我在本地的dataHome.json中有一些数据，我们想利用axios请求到：
第一步：你需要安装axios

npm install vue-axios --save

在你的package-lock.json中可以找到axios

第二步：你需要在main.js中引入axios

// axios
import axios from 'axios'
Vue.prototype.$axios = axios

第三部：在.vue中使用axios

  mounted(){
    this.$axios.get("/api/dataHome.json")   // /api 是代理
    .then(res =>{
      // console.log(res.data.data);
      const data = res.data.data[0];
      console.log(data);
      this.cityList = data.cityList;
    }).catch(err =>{
      console.log(err);
    })

使用（key， val）

如果你想单独循环取出一个列表的某一个值(比如我想取cities下的"A")

你可以用(key,val)来取它的键值队

使用vuex进行数据共享

假设你需要共享一个数据，进行其他地方引用，你可以用到vuex
第一步：安装vuex

npm install vuex --save

第二步：在src目录下新建一个文件夹命名为"store"
第三步：在第二步里面创建一个文件叫index.js，并添加内容

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const A = {
	key: val
}
export default new Vuex.Store({
		A
})

第四步：在全局中引用vuex，通常在(mian.js中)

import store from './store/index'

这四步骤就已经生成了一个vuex组件了，下面就是使用组件了
在你需要使用组件的vue中，在script里面导入vuex组件

<script type="text/javascript"> 
import {mapA} from 'vuex'
export default {
  computed:{
    ...mapA(['val'])
  }
}
</script>

vue使用keep-alive

什么是keep-alive？
它会把Dom元素驻留在内存中，防止Dom元素重复渲染，避免发起不必要的请求
如何使用
第一步:在你的App.vue文件中需要
将你需要的包起来

第二步：在Home,vue中创建一个生命周期

第三步：在return返回一个空值

vue 实现跨域问题

浏览器是禁止跨域问题的，但是服务器是允许跨域的
如果你发现报错为：

就可以定义为是跨域问题
我们需要解决这个问题。
第一步：我们需要请求自己的本地地址

第二步：在配置里设置
在根目录新建一个vue.config.js

module.exports = {
    devServer: {
        host: 'localhost',
        port: 8081,
        publicPath: "./",
        proxy: {  // 配置跨域
            '/api': {
                target: 'http://120.79.24.202:8000/', // api服务器地址
                changeOrigin: true,  // 是否跨域
                ws: true,   // 配置websockets
                pathRewrite: {
                    '^/api': 'http://120.79.24.202:8000/',// 替换成target中的地址
                }
            }
        }
    }
}

Nginx服务器文件访问
假设你需要在服务器上放置一个文件。你需要访问该服务器地址
例如：

第一步：需要用到宝塔面板下载Nginx并且配置目录

第二步：然后在该目录创建自己需要上传的文件夹

第三步：进行访问
ip+端口+文件路径

posted @ 2021-06-28 23:31 Daydayup,ran 阅读(194) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

冉勇

Vue前端基础学习

vue-cli

主要功能

环境准备

安装vue-cli

安装vue-cli

验证是否安装成功

创建一个简单的demo

目录结构

Vue基础语法

条件渲染

列表渲染

循环遍历语句

事件处理

使用Axios实现异步通信

什么是Axios

第一个Axios应用程序

表单输入绑定

Vue组件

计算属性

插槽与自定义事件

Webpack

安装webpack

Vue-router

安装vue-router

整合ElementUI

安装ElementUI

安装 SASS 加载器

快速上手

嵌套路由

快速上手

参数传递

快速上手

组件重定向

路由中的钩子函数

Vuex

安装

vue踩坑记录

vue增加路由

vue子组件挂载父组件

vue cli 代理设置

访问本地静态资源

路由的跳转

在vue项目中使用stylus

vue中使用axios请求

使用（key， val）

使用vuex进行数据共享

vue使用keep-alive

vue 实现跨域问题

公告