vue创建项目

安装node

安装node、npm、cnpm

node -v
npm -v
#npm服务器位置处于国外，下载包的速度会比较缓慢。阿里为国内用户提供的cnpm，他是npm的镜像，下载第三方包时，们完全可以使用cnpm来替代npm。
cnpm -v

在node中执行JavaScript程序

#输入命令node，按回车键即可进入node的终端，然后可以在这个终端输入JavaScript程序
node# 可以使用node命令执行js文件，例如我们在一个test目录中新建一个hello.js文件，然后在此目录下
node hello.js

创建第一个vue项目

目前前端开发最火热的三大框架分别是React、Angular和Vue

全局安装vue-cli

# -g指全局安装，安装在本机中，只安装一次
npm install -g @vue/cli

vue创建项目
```
vue create hello
```
创建项目后，根据相应提示进入项目目录中，使用命令启动项目
```
npm run serve
# 启动后根据提示的url访问
```
项目简介
- node_modules：存放项目依赖包
- public：存放静态文件(例如图片等)
- src：项目源文件，后续开发几乎都在这个目录下进行
  - main.js为项目的入口文件
  - App.vue是单文件组件
- 自定义组件一般在components目录中创建，命名用大驼峰的方式。

组件化开发

以vue为后缀的文件是vue的单文件组件，我们在开发vue应用的过程中，主要任务就是去编写这些以vue为后缀的文件。大家可以把组件理解成一个，可以自定义的，有更强大功能的标签。

//main.js文件说明
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false   //配置开发选项，开发过程中的错误提示new Vue({render: h => h(App),//上面render箭头函数相当于下面的return，h也是一个函数createElement，将App组件作为参数传入//作用：将App.vue组件传入，createElement可以将App组件渲染到#app（index.html中的id=app的DOM节点），//从而将组件加载到html文件中对应DOM节点中，这样，就成功地将单文件组件App.vue加载到index.html中了// return (createElement){//   return createElement(app);// }
}).$mount('#app')

vue语法

vue文件说明

<template><!-- 组件的应用 -->
</template><script>//  导入其他组件，定义该组件的数据、方法等
</script><style>/* 组件的样式  */
</style>

template标签中添加的是html代码，template内部所有内容都要包含在一个标签之内。
script标签中添加的是JavaScript代码
style标签中添加的是CSS样式。

例子：

<template><!-- template：网页模板，编写的是html代码，template内部所有内容都要包含在一个标签之内 --><div id="app"><img alt="Vue logo" src="./assets/logo.png"></div>
</template><script>
// script标签中添加的是JavaScript代码
import HelloWorld from './components/HelloWorld.vue'
//用模块化的语法export default将组件的示例暴露给外部,这样组件文件才能被使用
export default {name: 'App',components: {HelloWorld}
}
</script><style>
/* style标签中添加的是CSS样式 */
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

vue模板语法

指令

指令 (Directives) 是带有 v- 前缀的特殊属性

v-bind：绑定属性**（简写：）**
v-on：绑定事件**（简写@）**

绑定属性和事件的方法：

<template><div><h1 :title="message">hello world</h1><button @click="sayHi">say hi</button></div>
</template><script>
export default {data(){return {message:"hello vue"}},methods:{sayHi(){alert("Hi!")}}
}
</script>

条件判断

通过v-if和v-show指令可以控制元素的显示与隐藏：
- v-if='false'：不会渲染DOM，浏览器控制台查看元素不可见。
- v-show='false'：会渲染DOM，查看元素可见，但是样式为display:none;，即前端样式用户不可见
显示列表v-for指令

显示列表的功能在web应用中是非常常见的，例如文章列表、博客列表，学生列表等等，可以使用v-for指令将数据绑定在列表中

组件嵌套

引入组件+注册组件

<script>
import Hello from "@/components/Hello"
import HelloWorld from "@/components/HelloWorld"     //引入组件
export default {components:{Hello,HelloWorld      //注册组件}
}
</script>

使用引入的组件

<template><div><Hello img=“”></hello><HelloWorld></HelloWorld>    <!-- 该标签是自定义组件，引入后可当标签使用 --><!-- 在template中，组件的标签不区分大小写，切驼峰命名的组件可以使用 - 链接 ，下面的和HelloWorld是同一个标签--><Hello-World></Hello-World><hello-world></hello-world></div>
</template>

组件传值

组件传值3种情况
- 父级向子级传递数据
- 子级向父级传递数据
- 非父子级传递数据

父级向子级传值

父级可以通过属性向子级传递数据：

创建子组件，在src/components/文件夹下新建一个Child.vue
Child.vue的中创建props，然后创建一个名为message的属性

//父级App.vue
<template><div><h1>hello world</h1><!-- 父级通过属性向子级传递数据 --><child :msg="message"></child></div>
</template><script>
import Child from "./components/Child.vue"
export default{components:{Child},data(){return {message:"app.vue data"}}
}
</script><style></style>

//子级Child.vue
<template><div><h1>{{msg}}</h1></div>
</template><script>export default{// 子级获取父级的数据通过props属性，msg为子级标签自定义的属性props:["msg"]
}
</script>

子级向父级传递数据

子级想父级传递数据需要用自定义事件:

//父级App.vue
<template><div><h1>{{childData11}}</h1><!-- 父级通过属性向子级传递数据 --><child @myevent="changeData1" :msg="message"></child></div>
</template><script>
import Child from "./components/Child.vue"
export default{components:{Child},data(){return {message:"app.vue data",childData11:""             //默认值}},methods:{changeData1(childData1){this.childData11=childData1;}}
}
</script><style></style>

//子级Child.vue
<template><div><h1>{{msg}}</h1><!-- 点击按钮时触发sendData方法 --><button @click="sendData">向父级传递数据</button>   </div>
</template><script>export default{// 子级获取父级的数据通过props属性，msg为子级标签自定义的属性props:["msg"],data(){return {childData:"I am child"}},methods:{sendData(){this.$emit("myevent",this.childData)     //通过$emit方法可以触发父级的自定义事件,第二个参数是myevent调用函数的参数}}
}
</script>

非父子级组件传值

目录结构：

src
- components
  - Sister.vue
  - Brother.vue
- store.js
- main.js

//store.js
export default {state:{message:"hello vue"},setStateMessage(str){this.state.message = str;}
}<!-- sister组件 -->
<template><h1>{{state.message}}</h1>
</template><script>
import store from "../store.js"
export default {data(){return {title:"sister组件",state:store.state}}
}
</script><!-- brother组件 -->
<template><div><button @click="changeData">change data</button></div>
</template><script>
import store from "../store.js"
export default {methods:{changeData(){store.setStateMessage("122");console.log(store.state.message)}}
}
</script>

参考资料

文档资料：https://xiaozhoubg.com/book/section/145

视频：https://www.bilibili.com/video/BV1er4y1P7UN?p=6

vue官网：https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5

js基础

变量与运算符

var**（最新版本ES2015使用let，let语法更严谨）**

var s = "hello world";    //var用来声明变量
var s1 = "hello",s2="world";    //逗号可以连续声明变量

浏览器console控制台打印
```
console.log(s1);
```

数据类型6种

var s = "hello";     //字符串 String类型
var s2 = 100;     //数值  Number类型
var s3 = true;    //布尔类型  Boolean
//另外
//未定义类型（Undefined）：undefined，变量未赋值，值为undefined
var v;
console.log(v);   //v的值为undefined
//空类型（Null）：null，未初始化一个对象，可以暂时赋值null   
//对象（Object）：{}

注意：运算符

//==与===
console.log(20=="20");   //true,不比较数据类型
console.log(20==="20");   //false，常用
//!=与!==
console.log(20!="20");   //false
console.log(20!=="20");   //true，常用//逻辑与或时，常用===和!==

函数

语句块用{}括起来

函数通过function关键字声明，声明时不执行，调用时才执行；

//声明函数
function fun(){//语句
}
//调用函数，调用写在声明前也可以正常调用（函数提升特性）
fun();

函数表达式

//函数表达式，没有函数提升特性
const fun = function(n,m){return n+m;
}
let result = fun(10,20);    //直接用fun调用

函数默认值

function fun = function(n=10,m=20){return n+m;
}
let result = fun();   //没有实参时使用默认值
console.log(result);
let result = fun(30,5);    //有实参时使用实参
console.log(result);
let result = fun(100);    //也可以传一个实参，另一个使用默认值
console.log(result);

立即执行函数

//两个（），即声明完直接执行，只能调用一次
(function(){console.log("hello")
})()

箭头函数

//原函数
const fun = function(x){return x * x;
}
let result = fun(2); 
console.log(result);
//对应的箭头函数,删去function，在（）和{}之间加个箭头
const fun = (x) => { return x * x;
}
//一个参数时，还可以在简化
const fun = x =>  x * x;

箭头函数中的this；

普通函数中的this指向的是调用该函数的对象
箭头函数：this在哪里定义，就指向谁

const cat = {name:"miaomiao",sayName(){setInterval(function(){console.log(this.name)},1000)        //定时函数，每1000ms执行一次function}
}
cat.sayName();   //这时无法输出miaomiao，因为定时函数setInterval返回的是window类型，setInterval内部的this指向的是setInterval函数//使用箭头函数
const cat = {name:"miaomiao",sayName(){setInterval(() => {console.log(this.name)},1000)        }
}
cat.sayName();   //这时输出miaomiao

对象

js中的对象：是6种数据类型中的一种；属性的无序集合

//定义对象
var cat = {name: "miaomiao",age: 16
}
//使用属性
console.log(cat.age);   //.方式，一般常用
console.log(cat["age"]);   //[""]方式

对象的某个属性可以是函数值

var cat = {name: "miaomiao",age: 16,sayName: function(){console.log("我是苗苗")},sayName(){           //最新版本ES2015的简写方式，不写functionconsole.log("我是苗苗")},eat: function(food){console.log("吃"+ food);},computed:function(x,y){return x+y;}
}
//调用
cat.sayName()
cat.eat("鱼")
var result = cat.computed(1,3);
console.log(result);

属性赋值

var cat = {name: "miaomiao",sayName: function(){console.log("我是"+this.name)},eat: function(food){console.log("吃"+ food);},computed:function(x,y){return x+y;}
}//赋值使用
cat.name="小白"；
cat.sayName();   //输出”“我是小白

对象类型
- 自定义对象：封装
- 内置对象：例如Date，获取当前时间
- 宿主对象：document
- 第三方对象：jQuery、vue等

面向对象

ES5版本没有类的概念，通过构造函数实现，构造函数函数名首字母大写

function Dog(n,a){this.name=n;this.age=a;
}//通过原型对象prototype，为构造函数生成的对象赋予新的方法
Dog.prototype.sayName = function(){console.log('我的名字是${this.name}');
}var dog = new Dog("小白",2);
console.log(dog.name);var dog1 = new Dog("小白2",2);
dog1.sayName();

ES2015（ES6）的面向对象：class

class Dog{constructor(name,age){   //构造函数this.name=name;this.age=age;}sayName(){        //其他方法console.log('我的名字是${this.name}');}
}
let dog = new Dog("小白",2);
console.log(dog.name);
dog.sayName()；

ES6的继承

class Animal{constructor(name){   //构造函数this.name=name;}sayName(){        //其他方法console.log('我的名字是${this.name}');}
}class Dog extends Animal{      //继承constructor(name,age){   //构造函数super(name);this.age=age;}
}let dog = new Dog("小白");
dog.sayName()；let dog = new Dog("小白",2);
console.log(dog.age);

数组

定义数组

var list = ["a","b"];
var list = new Array("a","b");  //new 构造函数//使用
console.log(list);
var item=list[0];
console.log(item);
var length=list.length;
console.log(length);

遍历数组

//while\for循环
//for in 遍历:i是索引值
for(var i in list){console.log(list[i]);
}
//for of 遍历:i是元素值
for(var i of list){console.log(i);
}
//map方法遍历：参数是函数
list.map(function(value,index){console.log(value);   //输出值console.log(index);   //输出索引
});

数组的常用方法

map方法
push方法：在数组最后追加元素，list.push(“f”)
sort方法：排序

filter方法：过滤器

var list = [1,3,6,5,2];
var newList = list.filter(function(item){if(item>=3){return item;  //满足条件的放入newList里}
})
console.log(newList);   //过滤出大于等于3的组成新的数组

join方法：连接数组里元素成字符串

var list = ["a","b"];
var str = list.join("+");   //参数为连接符
console.log(str);   //输出字符串类型：a+b

结合数组与对象

var list = [{name:"小明",age:2,sex:"男"},{name:"小明2",age:3,sex:"女"},{name:"小明3",age:4,sex:"男"},
]console.log(list[0].name);
//遍历：找出所有男同学放入新数组
var newList = list.filter(function(item){if(item.sex==="男"){return item;  //满足条件的放入newList里}
})
console.log(newList);

正则表达式

定义正则表达式

var str = "123aa";
var reg = /^[a-z]$/;  //正则表达式，匹配字母
reg.test(str);   //正则表达式对象的test方法可以检测是否匹配，匹配成功返回true
reg.exec(str);   //exec方法可以输出匹配的内容

DOM & BOM基础

DOM

dom：文档对象模型（document对象）

//事件函数
<body><button>按钮</button><div class="box"> </div><div> <img src="image/1.jpg" alt=""></div><script>let btn = document.querySelector("button");btn.onclick = function(){     //事件监听函数,点击事件console.log("hello");img.src="image/2.jpg";      //改变图片，鼠标点击后切换图片}let box = document.querySelector(".box");box.onmouseenter = function(){     //事件监听函数,鼠标移入事件console.log("hello red");this.style.backgroundColor= "blue";    //设置样式，鼠标移入背景变蓝}box.onmouseleave = function(){     //事件监听函数,鼠标移出事件console.log("hello box");}</script>
</body>

BOM
- bom：浏览器对象模型
  - window对象（全局对象）
  - screen对象，包含用户屏幕信息
  - location对象，获取当前页面的url，并把浏览器重定向到新的页面
  - history对象，包含浏览器历史
  - navigator对象，包含有关访问者浏览器的信息
文档：https://www.w3cschool.cn/javascript/js-window-screen.html