vue2基础学习.md

Vue2基础学习

Vue2基础学习
- 前置
  - 工程化要求
  - webpack
- 简介

前置

工程化要求

模块化
组件化
规范化
自动化

webpack

webpack是前端项目工程化的具体解决方案。

功能：

前端工程化
代码压缩、混淆
JS兼容性
性能优化

基本使用

# 1. 新建工程目录
# 2. 运行 npm init 已创建pakage.json文件
# 3. 新建 src 目录，新建 src/index.html 和 src/index.js
# 4. npm install jquery 以安装jQuery
# 5. npm install webpack webpack-cli -D # 已dev依赖安装webpack
# 6. 配置webpack.config.js
module.exports = {
	mode: "development" // development or production
}
# 7. 配置package.json的scripts节点
************
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"dev": "webpack"  // 可以通过npm run dev 运行
  },
************
# 8. 运行 npm run dev.会根据src/index.js 生成 dist/main.js

目录结构：

nsfoxer@nsfoxer-pc ~/temp> tree change-row
change-row
├── dist
│   └── main.js
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js

2 directories, 6 files

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../dist/main.js"></script>
</head>
<body>
	<ul>
		<li>This is 1 li</li>
		<li>This is 2 li</li>
		<li>This is 3 li</li>
		<li>This is 4 li</li>
		<li>This is 5 li</li>
		<li>This is 6 li</li>
		<li>This is 7 li</li>
		<li>This is 8 li</li>
		<li>This is 9 li</li>
	</ul>
</body>
</html>

index.js

// import package
import $ from 'jquery'

// 2. define jQuery entry function
$(function() {
	$('li:odd').css('background-color', 'red')
	$('li:even').css('background-color', 'pink')
})

webpack.config.js

const path = require('path')

module.exports = {
	mode: "development" // development or production.
    entry: path.join(__dirname, "src/index.js") // 指定要处理的js文件
    output: {
        path: path.join(__dirname, "./dist/"),  // 输出目录
        filename: "main.js"                     // 输出文件名
    },
    devServer: {         // 自动打开浏览器
        open: true,
        host: '127.0.0.1',
        port: 8080
    }，
    resolve: {         // 解析
        alias: {
            '@': path.join(__dirname, './src/') // 使用@代表项目根目录
        }
    }
}

package.json

{
  "name": "change",
  "version": "1.0.0",
  "description": "None",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"dev": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}

插件

webpack-dev-server: 实时刷新代码构建

使用步骤
1. npm install webpack-dev-server -D
2. 修改package.json的scripts节点: "dev" : "webpack serve"
3. 修改index.html导入js位置
4. 启动： npm run dev

html-webpack-plugin:

npm install html-webpack-plugin -D

// 1. 导入HTML插件
const HtmlPlugin = require('html-webpack-plugin')
// 2. 创建HTML实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',  // 原文件路径
    filename: './index.html' // 生成路径
})
// 3. 添加插件导出
module.exports = {
    mode: "development",
    plugins: [htmlPlugin],
}

loader加载器

webpack默认只处理js后缀文件，loader用于处理其他文件，也用于bable加载。

处理css文件：

# 1. npm install style-loader css-loader -D
# 2. 修改webpack.config.js
module.exports = {
	mode: "development",
	plugins: [htmlPlugin],
	
	devServer: {    // 自动打开浏览器
		open: true,
		port: 9091,
		host: '127.0.0.1'
	},

	module: {
		rules: [
			{test: /\.css$/, use: ['style-loader', 'css-loader']}  // index.css先转交最后一个加载器 css-loader,之后转给style-loader,最后转给webpack，把结果写入 dist/bundle.js
		]
	}
}

处理less文件

# 1. npm install less-loader less -D
# 2. 修改webpack.config.js的module节点
module: {
    rules: [
	    {test: /\.less/, use: ['style-loader', 'css-loader', 'less-loader']} 
    ]
}

处理jpg|png|gif文件

# 1. npm install url-loader file-loader -D
# 2. 修改webpack.config.js的module节点
module: {
		rules: [
			{test: /\.jpg|png|gif/, use: 'url-loader?limit=22229'}  // 转为base64，limit限制大小
	}

处理babel

# 1. npm install babel-loader @babel/core @babel/plugin-proposal-decorators -D
# 2. 修改webpack.config.js的module节点
module: {
		rules: [
			{test: /\.js/, use: 'babel-loader', exclude: '/node_modules/'}
	}
# 3. 配置babel-loader,babel-config.js
module.exports = {
	plugins: [['@babel/plugin-proposal-decorators', {legacy: true}]]
}

打包发布

# 1. 配置package.json
"scripts": {
	"dev": "webpack serve",
	"build": "webpack --mode production"
}

Source Map

开发时，浏览器报错和代码位置不一致。使用SourceMap进行原代码和混淆代码映射。

// webpack.config.js
module.exports = {
    mode: 'development',
    devtool: 'eval-source-map' // 暴露源码  生产代码禁止使用。
    devtool: 'nosources-source-map' // 没有源码，但可以定位行数
}

简介

vue是一个用于构建用户界面的框架。

学习vue的指令、组件、路由、Vuex

特性：

数据驱动视图
- 数据会驱动视图更新
- 单向
双向数据绑定

MVVM

MVVM是Model、View、ViewModle。把HTML分为3部分。MVVM是vue是实现数据驱动视图和双向数据绑定的核心原理。

Model：页面渲染所依赖的数据源
View：页面所渲染的DOM结构
ViewModle：vue的实例，是MVVM的核心。

基本使用

导入vue.js的script脚本文件
在页面中声明一个将被vue控制的DOM区域
创建vue实例对象

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<!-- Vue要控制的DOM区  -->
		<div id="app">
			{{ username }}
		</div>
		<!-- 导入vue -->
		<script src="./lib/vue.js"></script>
		<script>
			const vm = new Vue({  // 创建vue实例
				el: '#app',       // 指定要控制的区域
				data: {           // 数据
					username: 'zhangsan'
				}
			});
		</script>
	</body>
</html>

指令和过滤器

指令是vue提供的模板语法，用于辅助开发者渲染页面的基本结构。

分类：

内容渲染指令
- v-text：缺点：会覆盖原先的内容
```
<p v-text="username">gender</p> // 把username对应的值渲染到p标签内，原先的gender会被覆盖
```
- {{ XXX }}"：插值表达式 <p>{{ username }}</p>。只能用于内容节点，不能用于属性节点。支持JS表达式运算。
- v-html: 会渲染成htmll代码，可能会导致XSS <p v-html="username"></p>
属性绑定指令
- v-bind：给属性绑定值。<input type="text" v-bind:placeholder="tips"></input>。简写为:。如果需要动态拼接，则字符串外需被单引号包裹：<div :title="'box' + index" />

事件绑定指令

v-on: 事件绑定：

<div id="app">
    {{ username }}
    <button v-on:click="add">+++</button>
    <button @click="sub('ABC')">+++</button>
</div>

<script src="./lib/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: 'zhangsan'
        },
        methods: {
            add: function(e) { // e --> $event
                this.username += this.username
            },
            sub() {
                this.username = "asd"
            }
        }
    });
</script>

事件修饰符

 <button @click.prevent="sub('ABC')">+++</button> // 阻止默认行为

事件修饰符	说明
.prevent	阻止默认行为（例如：阻止a标签的跳转）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前事件
.once	绑定事件仅触发一次
.self	只有在event.target是当前元素时才触发事件处理函数

按键修饰符

 <button @keyup.esc="sub('ABC')">+++</button> // 阻止默认行为

双向绑定指令
- v-model: 双向绑定指令。
条件渲染指令
- v-if：动态添加或移除元素
- v-show: 改变display: none样式实现
列表渲染指令
- v-for：必须有key（类型数字或字符串）值，key值不允许重复；使用index值作为key没有唯一性。
  
  <div v-for="(item, index) in list" :key="item.id">

过滤器（vue3已取消）

<p>
    {{ message | capitalize}}  <!--将message通过capitalize调用后再渲染 -->
</p>

侦听器

watch允许监听数据变化

// 1. 方法格式监听器  在进入页面时不会立即触发  侦听对象，但是当对象的某一属性被修改时，不会触发
const vm = new Vue({
	el: '#app',
	data: {username: ''},
	watch: {
		// 监听username变量的变化
		username(newVal, oldVal) {
			console.log(newVal, oldVal)
		}
	}
})

// 2. 对象格式监听器 可以通过deep选项监听对象任意属性的变动
const vm = new Vue({
	el: '#app',
	data: {username: ''， info:{sex: ""}},
	watch: {
		// 监听username变量的变化 -- 对象格式
        username: {
            handler(newVal, oldVal) {
                console.log(newVal, oldVal)
            },
            immediate: true， // 立即触发，默认值false  允许在页面加载后，立即触发一次
            deep: true  // 对象中任意属性的变化将触发
        }，
        // 监听对象子属性的变化 需要单引号包裹
        'info.sex'(newVal. oldVal) {
            ocnsole.log(newVal)
        }
	}

posted @ 2022-07-21 10:49 nsfoxer 阅读(147) 评论(0) 收藏举报

刷新页面返回顶部

nsfoxer's blog

vue2基础学习.md

Vue2基础学习

前置

工程化要求

webpack

基本使用

插件

loader加载器

打包发布

Source Map

简介

MVVM

基本使用

指令和过滤器

侦听器

公告