js与vue基础学习-EW帮帮网

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的简写方式，不写function
    console.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

参考资料

学习视频：https://www.bilibili.com/video/BV1GC4y1p7Nu?spm_id_from=333.788.b_636f6d6d656e74.5

视频中代码：https://github.com/xiaozhoulee/xiaozhou-frontend

文档：https://xiaozhoubg.com/book/section/56

js与vue基础学习

vue创建项目

安装node

创建第一个vue项目

vue语法

vue文件说明

vue模板语法

组件嵌套

组件传值

参考资料

js基础

变量与运算符

函数

对象

面向对象

数组

正则表达式

DOM & BOM基础

参考资料

网站公告

今日签到

热门文章

最新发布