图文
ES6新语法及vue基础
https://www.angularjs.net.cn/
es6新语法:(多看多用)
1 字符串方法
//字符串方法 includes包含
// let str="ijahsdjkhasd";
// console.log(str.includes("jjj"));//false
// console.log(str.includes("ij"));//true
// console.log(str.includes("asd"));//true
//字符串方法 repeat()重复
// console.log(str.repeat(0));//空白
// console.log(str.repeat(1));//重复一次
// console.log(str.repeat(2));//重复二次
// console.log(str.repeat(2.3));//重复二次
//console.log(str.repeat(-1.5));//报错
//字符串方法补齐 padStart() padEnd()
// var str="pp123ppp";
// console.log(str.padStart(10,'0'));
// console.log(str.padEnd(10,'0'));
//字符串方法去空格 trimStart() trimEnd()
// var str=" 11p ";
//console.log(str,str.length);
//console.log(str.trimStart(),str.trimStart().length);
//console.log(str.trimEnd(),str.trimEnd().length);
//console.log(str.trim(),str.trim().length);
2数组方法
扩展运算符…
//数组方法 扩展运算符...
// let arr = ["a", "b", "c", "d"];
// console.log(...arr); //扩展为字符串
// let arr2 = [];
// arr2 = [...arr];
// console.log(arr2); //为数组
// function fn(...x) {
// console.log(arguments); //伪数组
// console.log(x);//伪数组转为数组1,2,3,4
// }
// fn(1, 2, 3, 4);
// //Array.of 将一组值转为数组
// console.log( Array.of("a","b",1,2,true) );
copyWithin
//数组方法copyWithin(放置的位置,拷贝开始的位置,拷贝结束的位置)拷贝并放在
// let arr = ["a", "b", "c", "d"];//将2位拷贝放置在
// console.log(arr.copyWithin(0,2,3));//["c", "b", "c", "d"];
find 与 findIndex 查找
// 数组方法find 与 findIndex 查找
// let arr = ["a", "b", "c", "d","c"];
// let x=arr.find(function(v,i){
// //console.log(a,b);
// return v=="c";//做搜索,如果c是一个对象,则返回一个对象
// })
// console.log(x);//c
// let y=arr.findIndex(function(v,i){
// return v=="c"
// })
// console.log(y);//
fill填充
//数组方法fill填充
// let arr = ["a", "b", "c", "d","c"];
// console.log(arr.fill("x"));//["x", "x", "x", "x","x"]
// let arr3=new Array(100);
// console.log( arr3,arr3.length );
// console.log( arr3.fill(0) );
遍历
//数组方法数组遍历
// let arr4=['aa','bb','cc','dd'];
// // for( let i in arr4){
// // console.log(i,arr4[i]);
// // }
// for( let v of arr4){
// console.log(v);//aa,bb,cc,dd
// }
//-------------------------------
// 对象遍历 for of循环
/* let obj={"name":"gao","age":18};
for( let v of Object.entries(obj) ){
console.log(v);
} */
includes 判断
// 数组方法includes 判断
// let arr4=['aa','bb','cc','dd'];
// console.log( arr4.includes("cc") );//true
数组 降维 拉平 扁平化
// 数组 降维 拉平 扁平化
// let arr5=['a',['b',[c]]];
// console.log( arr5.flat(2) );//拉平降维 降一维,写几降几次
省略写法
// 属性值与属性名相同可省略
// let name="gao";
// let obj={"name":name};//可以省略为obj={name}
// console.log(obj);
//如果属性值是函数,可以省略:function
// let obj2={
// say:function(){
// },
// run(){
// }
// }
is
//is判断两个只是否相等,和===相同 不同点是+0和-0 NaN和NaN
// console.log(2 === 2); //true
// console.log(Object.is(2, 2)); //true
// console.log(+0 === -0); //true
// console.log(Object.is(+0 === -0)); //false
// console.log(NaN === NaN); //false
// console.log(Object.is(NaN === NaN)); //false
合并对象Object.assign
//合并对象Object.assign(o2,o1)把o1合并在o2上,改变的是o2,o1不变
// let o1={"name":"wang"};
// let o2={"name":"gao","age":12};
// Object.assign(o1,o2);
// console.log("o1",o1);
// console.log("o2",o2);
// Object.assign(o1,o2);
// console.log("o2",o2);
// console.log("o2",o1);
//assign使用场景----------------------
//公共配置
// ajax = {
// "url": "http://www.baodu.com",
// "token": "aaaaaaaa",
// }
// //私人配置
// myAjax = {
// "url": "http://my.com"
// }
// //合并
// Object.assign(ajax, myAjax);
// console.log(ajax);
Set :类似数组的数据结构,但是成员值唯一
//Set :类似数组的数据结构,但是成员值唯一
let a = new Set([1, 2, 3, 1, 2]);
//类数组转数组
let arr = Array.from(a);
console.log(a);
console.log(arr);
//是否存在
console.log(a.has(1)); //true
console.log(a.has(2)); //true
console.log(a.has(3)); //true
console.log(a.has(4)); //false
//添加add()
a.add(555);
console.log(a);
//删除 delete()
a.delete(2);
console.log(a);
//清空clear();
// a.clear();
console.log(a);
//属性size长度
console.log(a.size);
map :类似对象的数据结构,但是key可以为任何数据类型
//对象
let obj = {
"name": "gao",
"12": 23232
}; //key为字符串
console.log(obj);
//map :类似对象的数据结构,但是key可以为任何数据类型
let m = new Map();
m.set(true, "呵呵"); //这里key为true,可以为null,还可以为function
m.set(1, "哈哈"); //这里key为true,可以为null,还可以为function
m.set(2, "嘻嘻"); //这里key为true,可以为null,还可以为function
console.log(m);
//获取值get(key)
console.log(m.get(true));
console.log(m.get(1));
console.log(m.get(2));
//是否存在has(key)
console.log(m.has(12)); //false
console.log(m.has(2)); //true
//删除 delete(key)
m.delete(1);
console.log(m);
//清空clear()
m.clear();
console.log(m);
//属性size
console.log(m.size);
//遍历keys
for (let v of m.keys) {
console.log(v);
}
//遍历values
for (let v of m.values) {
console.log(v);
}
//遍历keys和values
for (let v of m.entries) {
console.log(v);
}
Symbol独一无二的数据类型
// Symbol独一无二的数据类型
// undefined null Boolean String Number
//对象(Object)
let a = Symbol();
let b = Symbol();
console.log(a);
console.log(b);
console.log(a == b, a === b);
//应用-->对象的key,保证唯一,不被覆盖
//组长:对象{name:"gao"}
//自己:对象{name:"王"}
let obj = {
[a]: "gao"
};
let obj2 = {
[b]: "王"
};
console.log(obj[a]);
console.log(obj2);
//将obj2合并到obj对象上,----如果属性名相同,覆盖,但是属性名是Symbol独一无二
Object.assign(obj, obj2);
console.log("合并后", obj);
箭头函数
//普通函数写法
//普通函数this指向调用时所在的对象(可变)
let fn = function fn(a, b) {
console.log(a, b);
}
fn(1, 2);
//-----es6箭头函数写法--------
//箭头函数this指向声明时所在的对象(不可变)
let fn2 = (c, d) => {
console.log(c, d);
}
fn2(3, 4);
//如果只有一个参数,可以省略圆括号
let fn3 = c => {
}
fn3(6);
//如果函数体内只有一条return语句,可以省略 {} return
let fn4=d=>d;
fn4(7)
//箭头函数与普通函数的区别:
//普通函数this指向调用时所在的对象(可变)
//箭头函数this指向定义时所在对象(不可改变)
let obj={"name":"gao","age":18};
function fn(){
console.log(this);
}
fn();//this-->window
fn.call(obj);//fn-->this-->obj
let fn2=()=>{
console.log(this);
}
fn2();
fn2.call(obj)//无法改变this指向,还是window
//--第二:-----------------------------
//普通函数 可以当做构造函数 可以new
//箭头函数 不可以当做构造函数,不可以new
function Gou(name, age) {
this.name = name;
this.age = age;
}
let o1 = new Gou("Gao", 19);
console.log(o1);
//Gou {name: "Gao", age: 19}
//-----------------------
let Gou2 = (name, age) => {
this.name = name;
this.age = age;
}
let o2 = new Gou2("wang", 18);
console.log(o2);
//箭头函数.html:70 Uncaught TypeError: Gou2 is not a constructor
//第三:
//普通函数 arguments获取所有的实参,组成伪数组
//箭头函数不可以使用arguments用rest参数(...参数)
function fn3(){
console.log(arguments);
}
fn3(1,2,3,4,5);
let fn4=(...x)=>{
console.log(x);
}
fn4(1,2.3,4,5);//箭头函数无arguments,可以使用...
//普通函数可以使用...????--->可以
function fn5(...x){
console.log(x);
}
fn5(1,2,3,4,5); //可以使用...
//第四:不可以使用yield命令,因为箭头函数不能用作Generator函数
//首先可以把它理解成Generator函数是一个状态机,封装了多个内部状态.
function *fn5(){//写法或者function* fn5()
yield '1';
yield '2';
yield '3'; //yield产出
return "d"
};
let f=fn5();
for( let v of f){
console.log(v);
}
console.log( f.next() );
console.log( f.next() );
console.log( f.next() );
console.log( f.next() );
console.log( f.next() );
console.log( f.next() );
console.log( f.next() );
Object.definePorprety
let obj = {
"name": "wang",
"age": 12
};
for (let key in obj) {
Object.defineProperty(obj, key, {
get: function () {
console.log("获取值了");
},
set: function () {
console.log("设置值了");
}
})
}
obj.age; //获取值
obj.name = '888888'; //设置值
obj.age = 000;
3 重点!!Proxy与Object.defineProperty优劣对比*
Proxy 的优势如下:*
-
!!!Proxy 可以直接监听 对象 而非属性；*
-
!!!Proxy 可以直接监听 数组 的变化；*
-
!!!Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；*
-
!!!Proxy 返回的是一个 新对象 ,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；*
Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
- Object.defineProperty 的优势如下:*
兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。
//Proxy用于修改某些操作的默认行为
let obj = {
"name": "gao",
"age": 18
};
//取值
let p = new Proxy(obj, {
//target䯮对象,key为读取的属性名
get: function (target, key, value) {
console.log("获取值key是", key, "获取值value", value);
return target[key];
},
//target目标对象,key修改的属性名,value修改的值
set: function (target, key, value) {
console.log("target", target);
console.log("key", key);
console.log("value", value);
target[key]=value;
}
})
console.log(p.name); //读取操作,自动执行get方法
p.age = 999; //设置操作,自动执行set方法
console.log("p",p);
4 Reflect 操作对象的方法
//Reflect 操作对象的方法
//1将属于语言内部的方法,放在Reflect上
//2修改了一些方法的返回值,比如报错改为false
//13个方法
//get(目标对象,属性名)
let obj = {
"name": "gao",
"age": 13
};
console.log(obj);
console.log(Reflect.get(obj, "name"));
//set(目标对象.属性名,值)
obj.age = 999;
Reflect.set(obj, "age", "999999")
console.log(obj);
function FancyThing() {
this.name = "gao";
this.age = 19;
}
FancyThing.prototype.sex = "男";
FancyThing.prototype.sex = function () {
console.log("哈哈");
};
const myObj = new FancyThing();
//获取原型对象
console.log(Reflect.getPrototypeOf(myObj));
//设置原型对象
let obj3 = {
"hobby": "dfssdfsdf"
};
Reflect.getPrototypeOf(myObj, obj3);
//获取
console.log( Reflect.getPrototypeOf(myObj) );
5.Promise
1–为什么使用promise?? 回调函数事件–解决了什么问题?? 优化回调函数事件,挽回回调地狱
2–>promise定义:是一个容器,里面保存着某个未来才会结束的事件的结果,(通常是一个异步操作)
3–>有3个状态:进行中(pending),已成功(fulfilled),已失败(rejected),
4–>两个结果:进行中–>已成功(resolved), 进行中–>已失败(rejected)
优点:
1对象的状态不收外界影响;
2一旦状态改变,就不在改变,任何时候都可以得到这个结果
缺点:
1无法取消promise,一旦新建它就会立即执行,无法中途取消
2如果不设置回调函数,Promise内部抛出的错误,不会反应到外部
3当处于进行中pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
//定义--创建--
let err = 200;
console.log(1); //--1
let p = new Promise(function (resolved, rejected) {
console.log(2); //--2,一旦新建它就会立即执行
//异步操作
if (err == 200) {
resolved("成功的结果");
} else {
resolved("失败的结果");
}
})
console.log(3); //--3
//调用
// p.then(function (res) {
// console.log("成功", res);
// }, function (res) {
// console.log("失败", res);
// })
// console.log(4);//--4
// catch 捕获错误 .then可串联写 finally只要状态发生改变都会执行(不管成功失败)
p.then(function (res) {
console.log("成功", res); //---异步的结果
}).catch(function (res) {
console.log("失败", res);
}).finally(function(){
console.log("哈哈哈");
})
//1234打印顺序是????? :1-2-3-4-成功
//从上到下,先同步后异步,
str.repeat();0–空白;正整数n-重复n次;负数为下取值
ese6数组方法:
Array.form 将类似数组的结构转为数组
Array.of() 将一组值转为数组
Array.of("a","b",true)
copyWithin(放置的位置, 拷贝的位置, 拷贝结束的位置) 将x位拷贝放在第0位
arr.copyWithin(0,2,3)
fill(参数1填充的元素,开始位置,结束位置)把一个值填充到数组
arr.fill("x",1,2)
箭头函数
正常函数:let function (a,b){}
箭头函数: let fn(a,b)=>{ }
6 webpack概念(要求会 赋值 粘贴)
需求场景:ebpack概自动化模块打包器,当有很多个文件在模块化时引入很麻烦,就需要webpack.默认打包js文件,根据模块依赖打包文件
记住四个核心概念:
-
入口(entry)
-
输出(output)
-
loader css-loader / file-loader
-
插件(plugin) (删除已打包文件,压缩js,压缩css)
输出html: html-webpack-plugin
清理dist目录,clean-webpack-dev-server
构建服务器热加载开发环境webpack-dev-server
安装:
首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：
https://webpack.docschina.org/guides/getting-started/#basic-setup
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
lodash里封装了很多函数,其中有 节流 防抖比较好用
+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
and this is a line not to touch.
上面+号表示添加,-表示删除
现在，我们将创建以下目录结构、文件和内容：
project
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：
npm install --save lodash
现在，在我们的 script 中 import lodash：
src/index.js
function component() {
const element = document.createElement('div');
// lodash（目前通过一个 script 引入）对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>起步title>
<script src="https://unpkg.com/[email protected]">script>
head>
<body>
<script src="./src/index.js">script>
body>
html>
我们还需要调整 package.json 文件，以便确保我们安装包是 private(私有的)，并且移除 main 入口。这可以防止意外发布你的代码。
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
- "main": "index.js",
+ "private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2",
}
}
在此示例中，
NPM:
在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 或模块打包器配合使用。同时 Vue 也提供配套工具来开发。
$ npm install vue
看vue.js源码零碎知识点:
使用严格模式"use strict"
Object.freee()冻结对象
源码使用大写字母定义常量
component组件
direction指令
filter控制器
vue的生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdated
updated
beforeDestroy
destroyed
activated
deactived
errorCaptured
serverPrefetch
vue的核心语法
Object.defineProperty(obj, key, {
value: val,//默认值
enumerable: !!enumerable,//是否可枚举
writable: true,//是否可写
configurable: true//是否可修改
});
vue数组方法,只有push,pop,shift,unshift,splice,sort,reverse能够监听到
<div id="app">
{{ message }}
div>
var app = new Vue({
el: '#app',//vue操作的作用域
//定义数据--model层--数据模型
data: {
message: 'Hello Vue!'
}
})
//上面是id起作用,class是不起作用的,源码中是用queryselector
指令
指挥Dom发生变化的指令
1v-for
指令可以绑定数组的数据来渲染一个项目列表
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
li>
ol>
div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
2 v-if
<div id="app">
<h1>当前的年龄是--{{ age }} h1>
<p v-if="age>18" > 年龄大于18 p>
<p v-else-if="age==18" > 年龄等于18p>
<p v-else > 年龄小于18 p>
div>
const vm=new Vue({
el:"#app",
data:{
age:80
}
})
3 v-show
v-if v-show 区别
v-if 满足条件,加载节点,不满足条件,移除节点
v-show 满足条件,显示,不满足条件,css样式display:none
使用场景:频繁切换:v-show,不频繁切换使用v-if
性能:vmv-show:初始消耗高,切换时消耗低
v-if:初始消耗低,切换时消耗高
<div id="app">
<h1>当前年龄是h1>
<p v-show="age>18">年龄>18p>
<p v-show="age==18">年龄=18p>
<p v-show="age<18">年龄<18p>
div>
const vm=new Vue({
el:"#app",
data:{
age:18
}
})
4 v-text
<div id="app">
<div>{{ a }}div>
<div>{{ b }}div>
<div v-text="a">div>
<div v-text="b">div>
<div v-html="a">div>
<div v-html="b">div>
div>
const vm = new Vue({
el: "#app",
data: {
a: "hhhhh",
b: "呵呵
"
}
})
5 v-bind
<div id="app">
<a v-bind:href="g">{{ f }}a>
<img v-bind:src="h" alt=""/>
<p v-bind:class="j">123p>
div>
const vm=new Vue({
el:"#app",
data:{
f:"淘宝",
g:"https://www.taobao.com",
h:"./",
j:"b"
}
})
6 v-model
<script src="./vue.js">script>
<div id="app">
<input type="text" v-model="user">
<h1>输入的值为: {{ user }}h1>
div>
<script>
const vm=new Vue({
el:"#app",
data:{
user:"gao"
}
})
7 v-model修饰符案例
<div id="app">
<input type="text" v-model.lazy.number="age">
<h1>输入值为: {{ age }}h1>
<h1>输入值为: {{ typeof age }}h1>
男:<input type="radio" name="sex" value="男" v-model="sex">
女:<input type="radio" name="sex" value="女" v-model="sex" >
<h1> {{ sex }}h1>
<input type="checkbox" v-model="sex">是否同意
<hr/>
<input type="checkbox" v-model="hobby" value="新闻">新闻
<input type="checkbox" v-model="hobby" value="科技">科技
<input type="checkbox" v-model="hobby" value="体育">体育
<input type="checkbox" v-model="hobby" value="财经">财经
<h1> {{ hobby }}h1>
<select name="" id="" v-model="address">
<option value="陕西">陕西option>
<option value="山西">山西option>
<option value="广西">广西option>
<option value="江西">江西option>
select>
<h1> {{ address }}h1>
<select name="" id="" multiple v-model="address2">
<option value="陕西">陕西option>
<option value="山西">山西option>
<option value="广西">广西option>
<option value="江西">江西option>
select>
<h1> {{ address2 }}h1>
<textarea rows="5" cols="30" maxlength="10" v-model="msg">
textarea>
<p>输入的值是{{msg}}p>
<p>输入了{{msg.length}}个字p>
<p>可输入{{msg}}个字,还可以输入 {{10-msg.length}}个字p>
const vm=new Vue({
el:"#app",
data:{
age:18,
sex:"女",
one:"",
hobby:[],
address:"",
address2:[],
msg:""
}
})
8 v-bind:class
.font{
font-size: 30px;
}
.color{
color: red;
}
<div id="app">
<p v-bind:class="x" >字体放大p>
<p v-bind:class="[x,y]" >字体放大,颜色为红p>
<p v-bind:class="[{'font':a>b},{'color':c>d}]" > a>b 字体放大, c>d 颜色为红 p>
<p v-bind:class="{'font':a>b,'color':c>d}" > a>b 字体放大, c>d 颜色为红 p>
div>
const vm=new Vue({
el:"#app",
data:{
x:"font",
y:"color",
a:9,
b:2,
c:8,
d:4
}
})
9 v-on 绑定事件
<div id="app">
<button v-on:click="one()">点击button>
<button v-on:click="two(1,2,3)">点击传参数button>
div>
const vm = new Vue({
el: "#app",
methods: {
one(){
alert("哈哈")
},
two(...x){
console.log(x);
}
},
})
10 赋值解构
<div id="app">
<input type="text" v-model.number="a">
+
<input type="text" v-model.number="b">
={{ sum }}
<h1>{{ sum }}h1>
div>
const vm=new Vue({
el:"#app",
data:{
a:"",
b:""
},
//使用场景:多个值 影响一个值的变化
//computed计算属性,优点:计算结果会缓存
computed:{
/*
"属性名":function (){
return 计算结果
}
*/
"sum":function(){
return this.a +this.b
}
}
})
11 filter过滤
let arr=[
{"id":11,"name":"wan","sex":"男","age":18},
{"id":21,"name":"wng","sex":"男","age":18},
{"id":31,"name":"ang","sex":"男","age":18},
{"id":41,"name":"wa","sex":"男","age":18},
{"id":51,"name":"ng","sex":"男","age":18},
]
//-----------方法1---------------------------
//将name中包含g字母取出组成新的数组
/* var arr2=[];
for (var i=0;i=0){
arr2.push( arr[i] );
}
}
console.log(arr2); */
//--------------方法2------------------
let arr2=arr.filter( function(value,index){
return value.name.includes("g")
})
console.log(arr2);
//-----------------方法2的简写---------------------
let arr2=arr.filter( value=>value.name.includes("g"))
console.log(arr2);
12 搜索
<div id="app">
<input type="text" v-model="search">
<ul>
<li v-for="(item,index) in info" :key="index"> {{ item.name }} li>
<li v-show="info.length==0">暂无数据li>
ul>
div>
const vm=new Vue({
el:"#app",
data:{
arr:[
{"name":"gao"},
{"name":"li"},
{"name":"wang"},
{"name":"zhou"},
{"name":"san"},
] ,
search:"",
},
computed:{
info(){
return this.arr.filter(val=>val.name.includes(this.search))
}
}
})
13 多条件搜索
<div id="app">
<input type="text" v-model="sname" placeholder="姓名">
<input type="text" v-model="sage" placeholder="年龄">
<ul>
<li v-for="(item,index) in info" :key="index"> {{ item.name }}----{{ item.age }} li>
<li v-show="info.length==0">暂无数据li>
ul>
div>
const vm=new Vue({
el:"#app",
data:{
arr:[
{"name":"gao","age":15},
{"name":"li","age":15},
{"name":"wang","age":15},
{"name":"zhou","age":15},
{"name":"san","age":15},
] ,
sname:"",
sage:"",
},
computed:{
info(){
return this.arr.filter(val=>{
return val.name.includes(this.sname) && val.age.toString().includes(this.sage) })
}
}
})
14 各种数据类型的循环
<div id="app">
<ul>
<li v-for="(item,index) in arr" :key="index" > {{ item }} ---{{index}}li>
ul>
<ul>
<li v-for="(item,index) in num"> <button>{{ item }}button>li>
ul>
<ul>
<li v-for="(value,key,index) in obj" :key="index" > {{ value }} ---{{key}}--{{ index }} li>
ul>
<ul>
<li v-for="(item,index) in str" :key="index" > {{ item }} ---{{ index }} li>
ul>
div>
const vm=new Vue({
el:"#app",
data:{
arr:["aa","bb","cc"],
num:5,
obj:{"name":"wang","age":15,"address":"陕西"},
str:"abcdefg"
}
})
15 事件对象
<div id="app">
<button v-on:click="one">111不传参数button>
<button v-on:click="two(1,$event)">222传参数button>
div>
const vm = new Vue({
el: "#app",
data: {
one(event) {
console.log(event); //事件对象,有一个隐藏参数,也可以写其他名字
console.log(this);
},
two(a, e) {
console.log(a, e);//事件对象需要用$event导出
console.log( e.target.innerText);//获取按钮内容
}
}
})
16 事件对象修饰符–阻止默认事件
<div id="app">
<form @submit.prevent>
<input type="text">
<button @click="one">提交button>
<button @click.prevent="two">添加button>
<button>修改button>
form>
div>
//event.preventDefault()阻止默认事件
//按钮标签里@click.prevent="two"
//form标签里@submit.prevent
const vm = new Vue({
el: "#app",
data: {
one(event) {
event.preventDefault(); //阻止默认事件,不会刷新
//console.log(event);
},
two(event) {
console.log(event); //click后加prevent
}
}
})
17 事件对象修饰符–阻止冒泡
<div id="app">
<div @click="infoFn">
通知:下课后都出去抽烟...<button @click.stop="del">删除button>
div>
<button @click.once="num+=1"> 赞{{num}}button>
div>
//@click.stop阻止事件冒泡
//event.stopPropagation();//阻止冒泡
// @click.once="num+=1"//一次
var vm = new Vue({
el: "#app",
data: {
num:1,
},
methods: {
infoFn() {
alert("进入详情,查看详细通知")
},
del(event) {
//event.stopPropagation();//阻止冒泡
alert("删除") //点击删除,还显示进入详情
}
},
})
18 键盘事件修饰符
<div id="app">
<input type="text" @keyup.enter="fn">
div>
//写键盘码.13 回车
//@keyup.enter按下回车事件--按键修饰符
//@keyup.left按左方向键事件--按键修饰符
//@keyup.right 按右方向键事件--按键修饰符
//@keyup.up 按上方向键事件--按键修饰符
//@keyup.down 按下左方向键事件--按键修饰符
var vm = new Vue({
el: "#app",
data: {
},
methods: {
/* fn(event){
console.log(event.keyCode);
} */
fn() {
console.log("拔下来回车");
}
},
})
19 事件监听 watch
<div id="app">
<input type="text" v-model="search">
<p>搜索框搜索的值是{{ search }}p>
div>
const vm = new Vue({
el: "#app",
data: {
search: " "
},
//watch事件监听 一个值变化影响多个值
watch: {
"search": function (n, old) {
console.log("当前值",n);
console.log("上次值",old);
//ajax请求
}
},
methods: {
fn() {
console.log("搜索的的值发生变化", this.search);
//ajax请求
}
},
})
19 v-pre原样输出
v-cloak伪装 mustache -->花括号的加载,隐藏,防止闪烁
v-once 只渲染一次
20 全局组件
* {
padding: 0;
margin: 0;
}
#app {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
overflow: auto;
}
<div id="app">
<my-header> my-header>
<my-content>my-content>
<my-footer>my-footer>
div>
//全局组件//my-header驼峰式可以,调用是必须为横线
//全局组件一定要在new vue的上方
//template里面 有且只有一个根节点
Vue.component("my-header", {
template: `
顶部搜索
`
})
Vue.component("myFooter", {
template: ` 底部 `
})
Vue.component("myContent", {
template: `
21 局部组件
<div id="app">
<my-big-title>my-big-title>
<my-small-title>my-small-title>
div>
Vue.component("myBigTitle", {
template: `
大标题
`
})
//局部组件,全局可以写多个,是components
const vm = new Vue({
el: "#app",
components: {
"mySmallTitle": {
template: `
小标题
`
}
},
data: {
},
methods: {
},
watch: {
},
computed: {
}
})
22 组件定义数据
<div id="app">
<one v-for="item in 10"> one>
div>
//全局 --组件 data必须是函数,返回一个对象
//组件是独立的,多个组件用一份数据会造成不独立,data为函数,每次调用
//文本及数组
//里面写结构,调用时写参数
Vue.component("one", {
data() {
return {
"text": "哈哈",
"arr": ["aa", "bb", "cc"]
}
},
template: `
{{ text }}
- {{ item }}
`,
methods: {
fn(index) {
alert(index);
}
},
})
const vm = new Vue({
el: "#app",
})
23 props
<div id="app">
<my-title x="欢迎李女士" y="你好">my-title>
<my-title x="秒杀活动" y="即将开始">my-title>
<my-title x="关于我们" y="请打电话">my-title>
div>
//调用时组件传参 使用props
//调用:<组件名 自定义属性名="要传递的值"><组件名>
//创建组件:
//Vue.componte("组件名",{props:["自定义属性名"],template:{` `}})
Vue.component("myTitle", {
props:["x","y"],
template: `
{{ x }}
`
})
var vm = new Vue({
el: "#app",
})
24 动态props
Vue.component("myNav",{
//props:["x"],
//props验证
props:{
"x":String
},
template:`
{{ x.title }}
- {{item.bar}}
`
})
const vm = new Vue({
el: "#app",
data: {
topnav: {
title: "哈哈哈",
nav: [{
"bar": 123
},
{
"bar": 456
},
]
},
contentnav: {
title: "哈哈哈",
nav: [{
"bar": 111
},
{
"bar": 222
},
]
},
footernav: {
title: "哈哈哈",
nav: [{
"bar": 888
},
{
"bar": 999
},
]
},
}
})
//思考?:移动端最上方为搜索框,进行验证,
//下方一张大图,
//小方块里面有文字,9宫格导航
//左边图片,右边为价格,说明
//下边为底部栏
//切组件
25 九宫格组件
26 组件通信
模块化开发
@vue/cli – 脚手架 （配置默认开发环境 – webpack）
1、安装@vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue --version
#OR
vue -V
2、通过 @vue/cli 创建项目
1）命令
vue create 项目名
2）使用图形化界面
vue ui
3）创建一个项目
vue create 文件名
选择 Manually select features
配置时:按空格选中或者取消 上下 方向键选择 回车执行下一步
? Check the features needed for your project:
(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
>(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
选择 版本2.x 还是 3.x ?:
? Choose a version of Vue.js that you want to start the project with (Use arro
w keys)
> 2.x
3.x
选择less/sass/stylus:
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supporte
d by default):
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass) 选sass一般选择这个
> Less
Stylus
选择ESLint:
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
> ESLint + Prettier
? Pick additional lint features: (Press to select, to toggle all,
to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
-
进入项目
cd 文件名
5)、设置
6)、运行项目
npm run serve
拉取 2.x 模板 (旧版本)
全局下载
npm install -g @vue/cli-init
创建项目
vue init webpack 项目名
Vue cli 3 / 4 构建项目
node_modules 项目依赖（vue 、babel、vue-router、vuex 、。。。webpack相关，）
public 公共文件 / 静态资源/ 根目录
index.html 主模版
src 开发目录/开发源代码
assets 静态资源（第三方库）
utils 工具类
api 请求的文件
style 样式文件
components vue组件
router 路由
store vuex
views 页面组件–视图组件
APP.vue 根组件
main.js 项目入口文件（ new Vue（） ）
.browserslistrc 浏览器支持情况
.gitignore git 不维护的文件 当前是一个仓库
babel.config.js babel 配置
package.json 项目依赖配置文件
README.md 项目说明
vue.config.js vue配置