Vue2

一.Vue事件

v-on绑定事件

二.计算属性

三.watch

四.vue的组件

1.组件是什么

组件是用来完成特定功能的一个自定义的HTML标签。
作用:
​ (1)可以起到重复利用的效果
​ (2)在路由里面使用

2.组件分类

全局组件

全局组件 : 各个地方地方都可以使用

局部组件

局部组件 : 只能使用在当前挂载标签上面使用

3.组件中使用模板

4.组件返回数据

五.路由

1.路由是什么

路由是负责将进入的浏览器请求映射到特定的组件代码中。

2.路由使用

六.webpack

1.webpack是什么

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

2.为什么要使用打包技术

• 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
• 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
• 将代码打包的同时进行混淆，提高代码的安全性。

3.使用

(1)安装

npm install -g webpack

npm install -g webpack-cli

(2)创建一些代码

a.js

var a = "a模块";
var b = require('./b.js');
console.log(b);

b.js

define(function () {
    var b = "b模块";
    return b;
});

(3)运行打包的命令

webpack src/a.js -o dist/bundle.js

(4)创建一个html页面 ,引入bundle.js文件

4 打包配置文件方式

在项目的根路径下面创建一个文件:

webpack.config.js

var path = require("path");
	module.exports = {
	entry: './src/a.js',
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'bundle.js'
	}
}

//运行

webpack

5 css打包用法

(1)下载安装 css加载器

​ css-loader style-loader

npm install style-loader --save-dev
npm install css-loader --save-dev

(2) 配置webpack.config.js

const path = require('path');

//配置入口 和出口
module.exports = {
    entry: './src/a.js',//入口文件
    output: { //出口
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },module: {
        rules: [
            {
                test: /\.css$/,     //匹配文件规则
                use: ['style-loader', 'css-loader']    //匹配后使用什么加载器进行模块加载
                // webpack use的配置，是从右到左进行加载的
            }
        ]
    }
};

(3) 在js文件里面引入css

var a ='aaa';
var b =require('./b.js');
require('../css/index.css')
console.log(b);

(4)在终端 terminal运行 webpack

生成一个bundle.js这个文件

(5)在页面引入该文件bundle.js

七.脚手架搭建

(1)npm install -g @vue/cli

(2)vue create hello-world

(3)选中 VueProject(第二个)

(4) cd hello-world

​ yarn serve – 运行

​ yarn build – 编译(额外生成一些文件)

(5) npm run serve --运行

八.vue-cli

1.vue-cli是什么

vue官方提供了的一个快速搭建vue项目的脚手架。

2.搭建过程

2.1新建模块
2.2进入目录
2.3vue-cli快速创建webpack项目
执行vue init webpack命令

3.单文件组成

4.单文件组成

单文件组件中包含三部分内容：

• template：模板，支持html语法高亮和提示
• script：js脚本，这里编写的就是vue的组件对象，还可以有data(){}等
• style：样式，支持CSS语法高亮和提示
  每个组件都有自己独立的html、JS、CSS，互不干扰，真正做到可独立复用。

5.运行

npm run dev
npm run build 打包可以在服务器运行