2020-11-05_Vue&ES6&npm

三大前端框架Angular/vue/React

Vue&ES6&npm

Node & npm

• npm是node提供的模块管理工具，可以非常方便的下载安装很多前段框架，包括Jquery、AngularJS、VueJs.
• Node自带有npm工具

npm常用命令（node -v、npm -v版本查询）

• 初始化npm init -y (相当于之前建了一个maven工程的pom.xm)
• npm install npm@latest -g（升级）
• 安装模块（相当于之前导入的导包）
  1. npm install/i vue(局部安装，当前项目使用)
  2. 全局安装：npm install -g vue/=========/npm -g root 安装路径
• 查看模块：npm list vue；列表模块：npm ls
• 卸载模块：npm uninstall vue;
• 更新模块：npm update vue;
• 运行模块：npm run dev/test/online(执行npm相关的命令，会自动维护pakage.json)
• 编译工程：npm run build

ECMAScript6 重要语法

• ECMAScript是浏览器脚本语言的规范，javascript实现了该规范的一种前段脚本语言。

• Es6其实就是ECMAScript 6的版本，是规范，这种规范被javascript实现了。

• ES5/ES6常用的一些新特性

  • let（let相较var,它是块级的，超出声明范围就无效）& const（声明常量不能修改）

  • 解构表达式

    数组解构：
    let arr = [1,2,3];
    const [a1,a2,a3] = arr;//a1,a2,a3和数组一一对应
    对象解构：
    let user = {"name":"小古","age":23;"sex":1}
    let {name,age,sex} = user;//顺序可以不一致，但是字段属性要一致
    console.log(name,age,sex);
    

  • 箭头函数(类似Lambuda表达式)

    //	如果参数只有一个可以省略(),函数内容只有一条语句可以省略代码{}
    var 函数名 = (参数列表) =>{函数体}等价于
    var 函数名 = function(参数列表) {
    	函数体
    }
    =================================
    //	注意1：对象配合箭头函数
    let person = {
    	name:"jack",
    	eat:function(参数列表){
    		函数体；
    	},
    	//	箭头函数版：
    	eat2:(参数列表)=>{函数题};
    	//	简写版：(省略":function")
    	eat3(){
    		函数体；
    	}
    }
    
    =================================
    //	注意2：解构表达式+箭头表达式
    const person = {
    	name: "jack",
    	age:21,
    	language:["java","js","css"]
    }
    //以前
    function hello(person) {
    	console.log("hello," + person.name);
    }
    //现在
    var hi = ({name}) => {};
    

• 模块化（export/import）（模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。而JS中没有包的概念，换来的是模块）

  =============导出===================
  const util = {
  	sum(a,b) {return a+b;}
  }
  export util;
  
  //	简写：
  export const util = {
  	sum(a,b) {return a+b;}
  }
  //	注意1：可以导出任何东西
  	var name ="jack"
  	var age = 21
  	export {name,age}
  //	注意2：可以省略名字
      export default {
          sum(a,b) {return a+b;}
      }
  ============导入===================
  //	导入util
  import util from 'hello.js'
  util.sum(1,2)//调用util中的属性
  import {name,age} from 'user.js'
  

Vue特性

轻量

Vue.js库的体积非常小的，并且不依赖其他基础库。

数据绑定

对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

指令

内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。

插件化

Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

组件化:他支持自定义标签(实现自定义页面)

组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

Vue实例对象

new Vue({
    el::"挂载html标签id/class等",
    data:{
    	//vue的数据绑定在Data属性上，data本身也是一个对象
    	msg:"",
    	user:{
    		属性。。。
		},...
	},
     methods:{
        say:function(){},
    	eat(){},//匿名函数的简单形式
     },...
});

VueJs表达式

• {{}}

Vue指令

• v-model=“表达式”----数据双向绑定

• v-text=“表达式”"----设置标签中的文本

• v-html=“表达式”"----- 设置标签中的html(如果值是html标签的值,不会作为普通的文本使用,要识别html标签。)

• v-if(else else if)=“表达式”"----判断条件

• v-for=“表达式”"---- 循环

  语法:
  <标签 v-for="元素 in 数据源"></标签>
  
    数据源:   数组,
      元素:   数组中的一个元素,
  
    数据源:   对象
      元素:   对象中的一个属性名
  
  <标签 v-for="(元素,索引|键) in 数据源"></标签>
      当数据源是数组时,  ()的第二个参数值索引
      当数据源是对象时,  ()的第二个参数值键
  
  <标签 v-for="(元素,键,索引) in 对象"></标签>
  

• v-on=“表达式”"---- 注册事件

• v-bind=“表达式”"---- 绑定值

  将data中的数据绑定到标签上,作为标签的**属性.**
  为一个标签属性绑定一个值
  <标签 v-bind:标签属性名字="表达式"></标签>
  简写形式:
  <标签 :标签属性名字="表达式"></标签>
  为一个标签绑定一个对象作为该标签的多个属性
  <标签 v-bind="对象"></标签>
  

  • v-show =“表达式”

    <div id="app">
        <div v-show="show">你看到我了!</div>
        <div v-show="hidden">你看不到我了!</div>
        <div v-show="score>=90">优秀</div>
    </div>
    
    var app = new Vue({
    	el: "#app",
    	data: {
    		"show":true,
    		"hidden":true,
    		"score":90,
    	}
    });