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)); //trueconsole.log(a.has(2)); //trueconsole.log(a.has(3)); //trueconsole.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)); //falseconsole.log(m.has(2)); //true//删除 delete(key)m.delete(1);console.log(m);//清空clear()m.clear();console.log(m);//属性sizeconsole.log(m.size);//遍历keysfor (let v of m.keys) {console.log(v);}//遍历valuesfor (let v of m.values) {console.log(v);}//遍历keys和valuesfor (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语句,可以省略 {} returnlet 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-->objlet fn2=()=>{console.log(this);}fn2();fn2.call(obj)//无法改变this指向,还是window//--第二:-----------------------------//普通函数 可以当做构造函数 可以new//箭头函数 不可以当做构造函数,不可以newfunction 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); //--1let 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 codeand 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><!--引入lodash--><script src="https://unpkg.com/lodash@4.17.20"></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",}}
在此示例中,<script>
标签之间存在隐式依赖关系。在 index.js
文件执行之前,还需要在页面中先引入 lodash
。这是因为 index.js
并未显式声明它需要 lodash
,假定推测已经存在一个全局变量 _
。
使用这种方式去管理 JavaScript 项目会有一些问题:
- 无法直接体现,脚本的执行依赖于外部库。
- 如果依赖不存在,或者引入顺序错误,应用程序将无法正常运行。
- 如果依赖被引入但是并没有使用,浏览器将被迫下载无用代码。
让我们使用 webpack 来管理这些脚本。
webpack.config.js
const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'main.js',path: path.resolve(__dirname, 'dist'),},
};
详见https://webpack.docschina.org/guides/getting-started/#basic-setup
打包步骤:
1初始化
npm init -y
2下载依赖
npm install webpack webpack-cli --save-dev
3 删除package-json文件里的main:" .js"这句删除,添加"private": true,
4添加文件webpack.config.js
在webpack.config.js写配置,新建dist文件夹,
—>在package.json文件中script下添加"build": “webpack”,
–>运行npm run build
const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'main.js',path: path.resolve(__dirname, 'dist'),},
};
如果把css一起打包需要加载
为了在 JavaScript 模块中 import
一个 CSS 文件,你需要安装 style-loader 和 css-loader,并在 module
配置 中添加这些 loader:
npm install --save-dev style-loader css-loader
vue
官网 https://cn.vuejs.org/ 尤雨溪借鉴argular慢慢成为vue
基本概念
1 渐进式框架
vue是一套构建用户界面的渐进式框架(先易后难,需要什么使用什么),采用自底向上增量开发的设计,vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合;
渐进式表现:声明式渲染–>组件系统–>客户端路由–>大数据状态管理–>构建工具
2 两个核心(最大的亮点):
响应式数据绑定(双向数据绑定): 当数据发生变化的时候,视图自动更新,即双向数据同步,原理利用了es6中放入Object definedProperty中的setter/getter代理数据,监控对数据的操作.
组合的视图组件(虚拟Dom): 即页面最终映射为一个组件树,采用树形结构进行设计,方便维护,重用.
3 虚拟Dom
利用在内存中生成与真实Dom与之对应的数据结构,这个在内存中生成的结构称之为虚拟Dom,
当数据发生变化时,能够智能的计算出重新渲染组件的最小代价并应用到Dom操作上.
4 MVVM
MVVM是model-View-ViewModel的缩写,它是一种基于前端开发的架构模式,起核心是提供对View和ViewModel的双向数据绑定,这使得ViewModel的状态改变可以自动传递给
M: Model(数据层,也就是指数据,前端是js)
V: View(也就是指Dom层或用户界面)
VM: ViewModel处理数据和界面的中间层,也就是指vue
5 声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
**额外补充:**渲染分为:命令式渲染和声明式渲染
**命令式渲染:**命令我们的程序去做什么,程序就会跟着你的命令去一步一步执行
**声明式渲染:**只需要告诉程序想要的效果,其他的交给程序去做:
vue.js安装:
CDN:对于制作原型或学习,你可以这样使用最新版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
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能够监听到
<!--view视图层 只有这个设置id的div才会起作用 {{}}为模板语法 -->
<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
<!-- //v-if会加载或移除不满足条件的写法 --><div id="app"><h1>当前的年龄是--{{ age }} </h1><p v-if="age>18" > 年龄大于18 </p><p v-else-if="age==18" > 年龄等于18</p><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">年龄>18</p><p v-show="age==18">年龄=18</p><p v-show="age<18">年龄<18</p></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: "<h1>呵呵</h1>"}})
5 v-bind
<!-- src href class id title alt border 自定义属性前v-bind:属性值就是变量 -->
<!-- v-bind可简写为: --><div id="app"><a v-bind:href="g">{{ f }}</a><img v-bind:src="h" alt=""/><p v-bind:class="j">123</p></div>
const vm=new Vue({el:"#app",data:{f:"淘宝",g:"https://www.taobao.com",h:"./",j:"b"}})
6 v-model
<!-- 载入Vue --><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修饰符案例
<!-- v-model.lazy失去焦点再判断 --><!-- v-model.trim去首尾空格 --><!-- v-model.number转数字类型 --><!-- 可多个一起使用 --><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><!-- 下拉1 ---><select name="" id="" v-model="address"><option value="陕西">陕西</option><option value="山西">山西</option><option value="广西">广西</option><option value="江西">江西</option></select><h1> {{ address }}</h1><!-- 下拉2 -multiple为可多选--><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<arr.length;i++){if( arr[i].name.indexOf('g')>=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"><!-- for in 或者 for of都可以 --><!-- key必须是惟一的 --><!-- 数组 --><ul><li v-for="(item,index) in arr" :key="index" > {{ item }} ---{{index}}</li></ul><!-- 数字10 --><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.preventconst 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" @input="fn"> --><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;}
<!-- 原则---把多个页面可重复使用,有独立功能的,页面,css,js等文件封装出 --><!-- 大的用全局,小的用局部 --><div id="app"><!-- <div>顶部搜索</div> --><my-header> </my-header><!-- <my-header/> --><!-- 下面不出来 --><!-- <div class="content"><div>轮播</div><div>图文</div></div> --><my-content></my-content><!-- <div>底部</div> --><my-footer></my-footer></div>
//全局组件//my-header驼峰式可以,调用是必须为横线//全局组件一定要在new vue的上方//template里面 有且只有一个根节点Vue.component("my-header", {template: `<div>顶部搜索</div>`})Vue.component("myFooter", {template: `<div> 底部 </div>`})Vue.component("myContent", {template: `<div class="content"><my-swiper></my-swiper><div>图文</div></div>`})// 内容里面还有轮播,单独拆出轮播Vue.component("mySwiper", {template: `<div> 轮播-----13213213 </div>`})//局部组件const vm = new Vue({el: "#app",data: {},methods: {},watch: {},computed: {}})
21 局部组件
<div id="app"><!-- <h1>大标题</h1> --><my-big-title></my-big-title><!-- <h2>小标题</h2> --><my-small-title></my-small-title></div>
Vue.component("myBigTitle", {template: `<h1>大标题</h1>`})//局部组件,全局可以写多个,是componentsconst vm = new Vue({el: "#app",components: {"mySmallTitle": {template: `<h2>小标题</h2>`}},data: {},methods: {},watch: {},computed: {}})
22 组件定义数据
<!-- v-for="item in 10"调用10次,one标签里写文字不管用,相关用得使用插槽 --><div id="app"><one v-for="item in 10"> </one></div>
//全局 --组件 data必须是函数,返回一个对象//组件是独立的,多个组件用一份数据会造成不独立,data为函数,每次调用//文本及数组//里面写结构,调用时写参数Vue.component("one", {data() {return {"text": "哈哈","arr": ["aa", "bb", "cc"]}},template: `<div><h1> {{ text }}</h1><ul><li v-for="(item,index) in arr " :key="index" @click="fn(index)">{{ item }} </li></ul></div>`,methods: {fn(index) {alert(index);}},})const vm = new Vue({el: "#app",})
23 props
<div id="app"><!-- 头部 欢迎高先生如果是变量x前加v-bind --><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: `<div><h1> {{ x }} </h1></div>`})var vm = new Vue({el: "#app",})
24 动态props
<!-- 顶部导航 --><!-- <div><h1>哈哈哈</h1><ul><li>66</li><li>77</li></ul></div> --><my-nav v-bind:x="topnav"></my-nav><!-- 内容导航 --><my-nav v-bind:x="contentnav"></my-nav><!-- 底部导航 --><my-nav v-bind:x="footernav"></my-nav></div>
Vue.component("myNav",{//props:["x"],//props验证props:{"x":String},template:`<div><h1>{{ x.title }}</h1><ul><li v-for="(item,index) in x.nav" :key="index" >{{item.bar}}</li></ul></div>`})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.x3.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一般选择这个
> LessStylus 选择ESLint: ? Pick a linter / formatter config:ESLint with error prevention onlyESLint + Airbnb configESLint + Standard config
> ESLint + Prettier ? Pick additional lint features: (Press <space> to select, <a> to toggle all,
<i> 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 filesIn 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配置
ES6新语法及vue基础相关推荐
- Javascript - ES6新语法概览
Javascript - ES6新语法概览 简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联 ...
- 总结常见的ES6新语法特性
前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...
- ES6新语法 变量 、 服务器端js和浏览器端js的区别
服务器端js和浏览器端js的区别 /*** 1.js运行在浏览器端有* ECMAScript:js语法(变量,数据类型,表达式,代码结构)* Bom:浏览器对象模型,用js去操作浏览器窗口* Dom: ...
- JavaScript 精选:哪些能提高开发效率的es6 新语法糖
文章目录 一 ECMAScript 相关介绍 1 什么是 ECMA 2 什么是 ECMAScript 3 什么是 ECMA-262 4 谁在维护 ECMA-262 5 为什么要学习 ES6 6 ES6 ...
- [Node.js] ES6新语法
概括图 下载地址 xmind地址 const关键字 const关键字声明常量的(一旦声明就无法更改) a:没有变量提升 b:有块级作用域 c:不能重复声明 d:不能重新赋值 e.声明必须要初始化值 使 ...
- ES6新语法--对象成员简写、对象展开、数组展开
对象成员简写 /*** 对象成员简写*///声明变量 let name = 'chen'; let age = 18; let gender = 'man'; let score = 100;//声明 ...
- ES6新语法--解构赋值
对象解构赋值 ※很重要 /*** 对象解构赋值:获取元素中属性的值,然后赋值给变量*///声明一个对象 let obj = {name:'chen',age:38,gender:'man',score ...
- es6新语法Object.assign()
1.介绍 Object.assign用于对象的合并,将源对象的所有可枚举属性复制到目标对象,只拷贝源对象自身的属性继承属性补考呗 Object.assign(target,source1,...)第一 ...
- ES6新语法--箭头函数
箭头函数 /*** 箭头函数:实质就是一个函数固定格式的简写* * 简写的规则* function 改为 => =>读为goesto* 如果只有一个形参,可以省略形参小括号;* 如果有0个 ...
最新文章
- 谷歌无人车之父刚推出的“无人驾驶入门”课,到底能学到啥?
- AI公开课:19.04.17杨松帆—好未来AI Lab负责人《为人工智能时代打造一个AI老师》课堂笔记以及个人感悟
- 在对人的管理上,项目经理应该做些什么?
- 九、深入Java字符串(上篇)
- python变量的作用_python 变量的作用范围
- Kubernetes学习总结(8)—— Kubernetes Pod 资源管理 和 Pod 服务质量
- 【Codeforces gym 102388】SUFE ICPC Team Formation Test,签到题BDG
- 【php写日志】php将日志写入文件
- F - 最短路 HDU - 2544(最短路的模板)
- Android 获取时间戳
- histogram loss笔记
- 保研面试/考研复试高等数学问题整理
- 华硕P10S-M主板组装服务器-raid配置方法
- C语言程序设计第二周
- MD文本编辑工具推荐-matktext
- create volume
- HDU2550 百步穿杨【打印图案】
- ux设计_如何草绘UX文章
- 如何在XP HOME版下设置共享文件夹及其权限?
- ReportView报表控件使用方法