当前位置： 首页 > news >正文

js与vue基础学习

news 2025/7/15 8:01:42

vue创建项目

安装node

  1. 安装node、npm、cnpm

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

  2. 在node中执行JavaScript程序

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

创建第一个vue项目

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

  1. 全局安装vue-cli

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

  2. vue创建项目

    vue create hello

  3. 创建项目后，根据相应提示进入项目目录中，使用命令启动项目

    npm run serve
# 启动后根据提示的url访问

  4. 项目简介

    • node_modules：存放项目依赖包
    • public：存放静态文件(例如图片等)
    • src：项目源文件，后续开发几乎都在这个目录下进行
      • main.js为项目的入口文件
      • App.vue是单文件组件
    • 自定义组件一般在components目录中创建，命名用大驼峰的方式。

  5. 组件化开发

    • 以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模板语法

  1. 指令

    指令 (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>

  2. 条件判断

    通过v-if和v-show指令可以控制元素的显示与隐藏：

    • v-if='false'：不会渲染DOM，浏览器控制台查看元素不可见。
    • v-show='false'：会渲染DOM，查看元素可见，但是样式为display:none;，即前端样式用户不可见

  3. 显示列表v-for指令

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

组件嵌套

  1. 引入组件+注册组件

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

  2. 使用引入的组件

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

组件传值

  1. 组件传值3种情况

    • 父级向子级传递数据
    • 子级向父级传递数据
    • 非父子级传递数据

  2. 父级向子级传值

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

    • 创建子组件，在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>

  3. 子级向父级传递数据

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

    //父级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>

  4. 非父子级组件传值

    目录结构：

    • 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基础

变量与运算符

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

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

  2. 浏览器console控制台打印

    console.log(s1);

  3. 数据类型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）：{}

  4. 注意：运算符

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

函数

  1. 语句块用{}括起来

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

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

  3. 函数表达式

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

  4. 函数默认值

    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);

  5. 立即执行函数

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

  6. 箭头函数

    //原函数
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;

  7. 箭头函数中的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

对象

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

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

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

    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);

  3. 属性赋值

    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();   //输出”“我是小白

  4. 对象类型

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

面向对象

  1. 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();

  2. 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()；

  3. 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);

数组

  1. 定义数组

    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);

  2. 遍历数组

    //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);   //输出索引
});

  3. 数组的常用方法

    • 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

  4. 结合数组与对象

    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);

正则表达式

  1. 定义正则表达式

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

DOM & BOM基础

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

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

http://www.dtcms.com/a/279091.html

相关文章：

  • 鸿蒙应用开发： 鸿蒙项目中使用私有 npm 插件的完整流程
  • docker-compose 安装Alist
  • Cesium源码打包
  • 数字孪生技术驱动UI前端革新：实现产品设计的虚拟仿真与实时反馈
  • Django Admin 配置详解
  • 【更新至2024年】2009-2024年上市公司华证esg评级、评分数据（含细分项）（年度+季度）
  • 大数据在UI前端的应用深化：基于用户行为数据的界面布局优化
  • 来时路,零帧起手到Oracle大师
  • Faiss能解决什么问题？Faiss是什么？
  • DiffDet4SAR——首次将扩散模型用于SAR图像目标检测，来自2024 GRSL（ESI高被引1%论文）
  • 前端性能与可靠性工程系列: 渲染、缓存与关键路径优化
  • 【Python办公】Python如何批量提取PDF中的表格
  • 【Java笔记】七大排序
  • 基于MaxCompute MaxFrame 汽车自动驾驶数据预处理最佳实践
  • Excel常用快捷键与功能整理
  • QT tabWidget移除页面和隐藏表头
  • RabbitMQ的几个模式
  • Nginx基础
  • 【数据结构初阶】--单链表(二)
  • [spring6: ResolvableType TypeDescriptor ConversionService]-类型系统
  • [笔记] 动态 SQL 查询技术解析：构建灵活高效的企业级数据访问层
  • 131. Java 泛型 - 目标类型与泛型推断
  • VUE3 添加长按手势
  • Nacos 技术研究文档（基于 Nacos 3）
  • 国内MCP服务器搜索引擎有哪些？MCP导航站平台推荐
  • Docker配置国内镜像源
  • SpringBoot整合MongoDB
  • 链表算法之【获取链表开始入环的节点】
  • Codeforces Round 1019 (Div. 2) A-D
  • Windows下安装nvm管理多个版本的node.js