vue学习笔记

目录

1.运行vue

2.入口文件

3.return下大括号

4.export default

5.v-model

6.Array.push

7.Array.filter

8.

9.计算属性

10.props

11.插槽

12.回调函数

13.Promise

分三次输出字符串

Promise的构造函数

14.路由(ChatGPT)

1. 定义路由映射

2. 导航和链接

3. 动态路由和参数

4. 编程式导航

5. 路由守卫

总结

15.路由(尚硅谷)

16.插槽和组件的区别

17.侦听器

停止侦听器

S.失败经验

---

1.运行vue

如果你打算启动一个新项目，你可能会发现使用 create-vue 这个脚手架工具更容易，它能创建一个基于 Vite 的项目，并包含加入 Vue Router 的选项：

npm create vue@latest

通常，使用 Vue CLI（Vue 的命令行工具）来创建 Vue.js 项目会自动生成 package.json 文件。如果你没有使用 Vue CLI 或者其他类似工具，那么可能需要手动创建这个文件。

以下是一些建议的步骤，帮助你解决这个问题：

1. 确认你使用的是 Vue CLI：确保你使用的是 Vue CLI 来创建项目。你可以通过运行 vue --version 来检查 Vue CLI 是否已经安装以及安装的版本。

2. 使用 Vue CLI 创建项目：如果你还没有使用 Vue CLI 创建项目，请按照以下步骤操作：

npm install -g @vue/cli  
vue create my-project

1. 这将会创建一个名为 my-project 的新 Vue.js 项目，并自动生成 package.json 文件。

2. 手动创建 package.json 文件：如果你出于某种原因无法使用 Vue CLI，你可以手动创建一个 package.json 文件。在项目的根目录下，使用文本编辑器创建一个名为 package.json 的新文件，并添加以下内容：

{  
  "name": "my-vue-project",  
  "version": "1.0.0",  
  "description": "My Vue.js project",  
  "author": "Your Name",  
  "private": true,  
  "scripts": {  
    "serve": "vue-cli-service serve",  
    "build": "vue-cli-service build",  
    "lint": "vue-cli-service lint"  
  },  
  "dependencies": {  
    "vue": "^2.6.11"  
  },  
  "devDependencies": {  
    "@vue/cli-plugin-babel": "~4.5.0",  
    "@vue/cli-plugin-eslint": "~4.5.0",  
    "@vue/cli-service": "~4.5.0",  
    "vue-template-compiler": "^2.6.11",  
    "eslint": "^6.7.2",  
    "eslint-plugin-vue": "^6.2.2",  
    "babel-eslint": "^10.1.0"  
  }  
}

安装依赖：一旦你有了 package.json 文件，你可以使用 npm install 命令来安装列在 dependencies 和 devDependencies 中的依赖项。

webstorm创建vue.js项目后，

打开命令行或终端，然后使用 cd 命令来切换到你的项目目录。如果 my-project 在你当前的工作目录下，那么只需输入：

cd my-project

如果 my-project 不在当前目录下，你需要提供完整的路径

在切换到项目目录后，你可以运行以下命令来启动 Vue.js 的开发服务器：

npm run serve

这将会启动一个热重载的开发服务器，通常会在 localhost:8080（或类似地址）上运行。你的浏览器会自动打开一个窗口或标签页，显示 Vue.js 应用的初始页面。

如果一切顺利，你应该能看到 Vue 的欢迎页面，以及一个控制台输出，显示开发服务器正在运行。

2.入口文件

入口文件是应用程序的起点，通常是加载和运行整个应用程序所需的第一段代码。在Web应用程序中，特别是在使用像Node.js这样的服务器端JavaScript环境时，入口文件通常是app.js、index.js或server.js等。然而，在前端框架如Vue.js中，入口文件的概念略有不同。

在Vue.js项目中，入口文件通常是main.js。这个文件是构建应用程序的起点，它负责初始化Vue实例，并配置Vue路由器（如果使用）、状态管理（如Vuex）以及其他插件或库。main.js文件通常会导入Vue库、应用程序的主要组件、路由配置以及其他必要的设置，并最终创建和挂载Vue实例到DOM上。

3.return下大括号

当你在 return 关键字下面另起一行放置大括号时，JavaScript 会认为 return 语句已经结束，而大括号内的代码块将作为独立的语句执行，这并不是你想要的。

正确的格式应该是：

return {  
  // ...  
}

4.export default

• export default { ... }: 这是 ES6 的模块导出语法，它表示这个对象是默认导出的内容。在 Vue.js 中，一个组件通常是这样导出的。   vue2的写法

5.v-model

v-model： 在表单元素上创建双向数据绑定。

<script>
export default 
{
  data() 
  {
    return {
      text: ''
    }
  }
}
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

v-model 会将被绑定的值与 <input> 的值自动同步，这样我们就不必再使用事件处理函数了。

v-model 不仅支持文本输入框，也支持诸如多选框、单选框、下拉框之类的输入类型。

6.Array.push

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// Expected output: 4
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

7.Array.filter

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

8.

<form @submit.prevent="addTodo">
    <!-- @submit.prevent="addTodo": 这是一个 Vue 事件监听器。
    当表单提交时（即用户点击提交按钮或按 Enter 键），addTodo 方法会被调用。
    .prevent 修饰符确保表单的默认提交行为（即页面跳转或刷新）被阻止。 -->

    <input v-model="newTodo">
    <!-- 这是 Vue 的双向数据绑定。它确保 newTodo 数据属性与输入框的值保持同步。
    当用户在输入框中输入内容时，newTodo 的值会更新；
    反之，如果 newTodo 的值在代码中更改，输入框的内容也会相应更改。 -->
    <button>Add Todo</button>    
  </form>

9.计算属性

computed: 
  {
    filteredTodos() 
    {
      return this.hideCompleted
        ? this.todos.filter((t) => !t.done)
        : this.todos
    }
  },
  //我们可以使用 computed 选项声明一个响应式的属性，它的值由其他属性计算而来
  //filteredTodos: 一个计算属性，根据 hideCompleted 的值来返回过滤后的待办事项列表。
  //如果 hideCompleted 为 true，则只返回未完成的待办事项；否则，返回所有待办事项。

10.props

子组件可以通过 props 从父组件接受动态数据。

11.插槽

除了通过 props 传递数据外，父组件还可以通过插槽 (slots) 将模板片段传递给子组件：

<slot> 插口中的内容将被当作“默认”内容：它会在父组件没有传递任何插槽内容时显示

12.回调函数

回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

function print() 
{
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);

这段程序中的 setTimeout 就是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 "print"，在命令行输出 "RUNOOB!"。

当然，JavaScript 语法十分友好，我们不必单独定义一个函数 print ，我们常常将上面的程序写成：

setTimeout(function () 
{
    document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);

setTimeout(function () 
{
    document.getElementById("demo1").innerHTML="RUNOOB-1!";  // 三秒后子线程执行
}, 3000);
document.getElementById("demo2").innerHTML="RUNOOB-2!";      // 主线程先执行

13.Promise

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。

分三次输出字符串

第一次间隔 1 秒，第二次间隔 4 秒，第三次间隔 3 秒

new Promise(function (resolve, reject) 
{
    setTimeout(function () 
    {
        console.log("First");
        resolve();
    }, 1000);
}).then(function () 
{
    return new Promise(function (resolve, reject) 
    {
        setTimeout(function () 
        {
            console.log("Second");
            resolve();
        }, 4000);
    });
}).then(function () 
{
    setTimeout(function () 
    {
        console.log("Third");
    }, 3000);
});

Promise的构造函数

Promise 构造函数是 JavaScript 中用于创建 Promise 对象的内置构造函数。

Promise 构造函数接受一个函数作为参数，该函数是同步的并且会被立即执行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject，分别表示 Promise 成功和失败的状态。

起始函数执行成功时，它应该调用 resolve 函数并传递成功的结果。当起始函数执行失败时，它应该调用 reject 函数并传递失败的原因。

Promise 构造函数返回一个 Promise 对象，该对象具有以下几个方法：

• then：用于处理 Promise 成功状态的回调函数。
• catch：用于处理 Promise 失败状态的回调函数。
• finally：无论 Promise 是成功还是失败，都会执行的回调函数。

下面是一个使用 Promise 构造函数创建 Promise 对象的例子：

当 Promise 被构造时，起始函数会被同步执行：

const promise = new Promise((resolve, reject) => 
{
  // 异步操作
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('success');
    } else {
      reject('error');
    }
  }, 1000);
});
 
promise.then(result => {
  console.log(result);
}).catch(error => {
  console.log(error);
});

14.路由(ChatGPT)

路由（Routing）在Web开发中是一个核心概念，特别是在构建单页面应用（SPA）或客户端渲染的应用时。路由负责根据用户请求的URL地址来显示不同的页面或组件内容。在Vue.js这样的前端框架中，路由通常是通过一个专门的路由库（如vue-router）来管理和配置的。

以下是路由在Vue.js中的一些关键概念和用法：

1. 定义路由映射

路由映射是一个将URL路径映射到组件的列表。在Vue.js中，你通常会定义一个路由配置文件（如router/index.js），并在其中定义这些映射关系。

javascript复制代码

	import Vue from 'vue';
	import Router from 'vue-router';
	import HomeComponent from '@/components/HomeComponent';
	import NewsComponent from '@/components/NewsComponent';
	Vue.use(Router);
	export default new Router({
	routes: [
	{
	path: '/',
	name: 'home',
	component: HomeComponent
	},
	{
	path: '/news',
	name: 'news',
	component: NewsComponent
	}
	// 其他路由...
	]
	});

在这个例子中，当用户访问应用的根路径/时，会显示HomeComponent组件；当用户访问/news路径时，会显示NewsComponent组件。

2. 导航和链接

在Vue应用中，你可以使用<router-link>组件来创建导航链接，这些链接会触发路由变化并渲染相应的组件。

html复制代码

	<template>
	<div>
	<router-link to="/">Home</router-link>
	<router-link to="/news">News</router-link>
	</div>
	</template>

当用户点击这些链接时，应用的URL会改变，并且对应的组件会被渲染到<router-view>占位符中。

3. 动态路由和参数

Vue Router还支持动态路由，这意味着你可以根据URL中的参数来渲染不同的内容。例如：

javascript复制代码

	{
	path: '/user/:id',
	name: 'user',
	component: UserComponent
	}

在这个例子中，:id是一个动态部分，它可以根据实际的URL来变化（例如/user/123）。你可以在UserComponent中通过$route.params.id来访问这个参数。

4. 编程式导航

除了使用<router-link>进行声明式导航外，你还可以使用Vue Router的API进行编程式导航。例如，你可以使用this.$router.push({ name: 'user', params: { id: 123 } })来导航到/user/123路径。

5. 路由守卫

Vue Router还提供了路由守卫（Route Guards）功能，允许你在路由变化前、后或过程中执行一些逻辑，比如检查用户是否登录、获取数据等。

总结

路由是Vue.js应用中非常重要的一部分，它使得你可以根据URL的不同来展示不同的内容，从而构建出功能丰富、交互性强的单页面应用。通过合理使用Vue Router，你可以有效地管理应用的页面结构，并提升用户体验。

15.路由(尚硅谷)

16.插槽和组件的区别

插槽和动态组件虽然都是用于组件之间通信的机制，但它们之间有一些不同之处。

首先，插槽是用于父组件向子组件传递内容的机制，而动态组件是用于动态地切换组件的机制。插槽允许父组件传递任意内容，包括 HTML、组件和其他数据，而动态组件只能切换组件本身。因此，插槽更适合用于构建复杂的组件结构，而动态组件更适合用于动态地加载和销毁组件。

其次，插槽是静态的，不能动态地改变子组件的结构，只能静态地传递内容。而动态组件是动态的，可以根据不同的条件选择不同的组件，并在运行时动态地加载和销毁组件。因此，插槽更适合用于静态的组件结构，而动态组件更适合用于动态的组件切换。

最后，插槽的作用域是在子组件内部，不能在父组件中访问子组件的数据和方法。而动态组件的作用域是在父组件中，可以访问父组件的数据和方法。因此，插槽更适合用于父子组件之间的通信，而动态组件更适合用于组件之间的动态切换。

17.侦听器

停止侦听器

在 setup() 或 <script setup> 中用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。因此，在大多数情况下，你无需关心怎么停止一个侦听器。

一个关键点是，侦听器必须用同步语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。如下方这个例子：

<script setup>
import { watchEffect } from 'vue'

// 它会自动停止
watchEffect(() => {})

// ...这个则不会！
setTimeout(() => {
  watchEffect(() => {})
}, 100)
</script>

要手动停止一个侦听器，请调用 watch 或 watchEffect 返回的函数：

const unwatch = watchEffect(() => {})

// ...当该侦听器不再需要时
unwatch()

S.失败经验

1.一些配置文件的报错，关闭visual studio重进或许就能好使 

新建一个程序，如果没有npm install ，就会报很多错。   npm install 原理分析

2.总能出现

只要npm install vue-router@4一遍，再退出重启就好使了

光npm install不管用