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-loadercss-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.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 
  
  1. 进入项目

    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配置

Logo

前往低代码交流专区

更多推荐