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.includ

公诚士

3216人浏览 · 2021-10-24 09:18:39

公诚士 · 2021-10-24 09:18:39 发布

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>
      <!--引入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发生变化的指令

1`v-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.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" @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>
            `
        })


        //局部组件,全局可以写多个,是components
        const 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.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 <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 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配置

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Vue里echarts根据页面大小动态调整/自适应

Vue

所有评论(0)

查看更多评论

公诚士

@weixin_47200160

已为社区贡献1条内容