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基础语法

条件渲染

  1. 条件判断语句
  • 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前端基础学习的更多相关文章

  1. 2.VUE前端框架学习记录二

    VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...

  2. 4.VUE前端框架学习记录四：Vue组件化编码2

    VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  3. 3.VUE前端框架学习记录三：Vue组件化编码1

    VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  4. 1.VUE前端框架学习记录一

    VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0 ...

  5. web前端基础学习路线

    1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...

  6. web前端——Vue.js基础学习

    近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...

  7. web前端——Vue.js基础学习之class与样式绑定

    打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...

  8. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  9. Anibei前端基础学习

    html.html5.CSS2.CSS3.JQuery.Vue.js学习,后端程序媛开始学习前端开发啦.

随机推荐

  1. [转载]层叠与并排win10

    三． 层叠与并排 如果要排列的窗口超过4个,分屏就显得有些不够用了,这时不妨试一试最传统的窗口排列法.具体方法是,右击任务栏空白处,然后选择"层叠窗口"."并排显示窗口& ...

  2. Docker——安装部署

    前言 从 2017 年 3 月开始 docker 在原来的基础上分为两个分支版本: Docker CE 和 Docker EE. Docker CE 即社区免费版,Docker EE 即企业版,强调安 ...

  3. 056.Python前端Django模型ORM多表基本操作

    一 准备工作 1.1 新建一个项目 root@darren-virtual-machine:~# cd /root/PycharmProjects/ root@darren-virtual-machi ...

  4. 046.Python协程

    协程 1 生成器 初始化生成器函数 返回生成器对象,简称生成器 def gen(): for i in range(10): #yield 返回便能够保留状态 yield i mygen = gen( ...

  5. win10 中安装 JDK8 以及环境配置

    下载和安装 JDK8 下载 下载地址:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 安装 直接双 ...

  6. 10.8 ss：查看网络状态

    ss命令 是类似并将取代netstat的工具,它能用来查看网络状态信息,包括TCP.UDP连接.端口等.它的优点是能够显示更多更详细的有关网络连接状态的信息,而且比netstat更快速更高效.    ...

  7. Vue之前后端交互

    Vue之前后端交互 一.前后端交互模式 接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责 ...

  8. jupyter notebook 默认文件路径修改以及启动

    其实这个方法有时候不是特别有效额 方法一: 查了网上好多其他的方法,但是都没用,只好独辟蹊径了. 首先找到anaconda的安装路径,找到jupyter notebook,我的是如下: 发送快捷方式到 ...

  9. checkbox，select，radio 选取值,设定值,回显值

    获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $(" ...

  10. 树莓派3B+常用操作

    安装Docker 替换成清华源 清华源地址https://mirrors.tuna.tsinghua.edu.cn/help/docker-ce/ echo "deb [arch=armhf ...