✊不积跬步，无以至千里；不积小流，无以成江海

项目搭建 - 目标1:搞出一个使用vue的项目

步骤

搜索@vue/cli - 引导至官网点击安装 - 在vscode中利用终端安装
安装后新建一个文件夹，并配置项目需要的功能选项

截屏2024-01-03 10.47.20.png

按照步骤cd/yarn serve后(如果需要中断的话点击ctrl+c)
点击localhost端口，打开后能看到如下图界面，第一个vue项目就创建成功了

截屏2024-01-03 11.31.49.png

项目搭建 - 目标2:做一个最简单的项目并把涉及到的文档看一下

展示计数器，点击+1按钮展示数字+1

Vue 两个版本的区别和使用方法

两个版本对应的文件名

Vue.js 和 Vue.runtime.js 都是 Vue 的库，但它们有不同的功能。

Vue.js 是 Vue 的完整版，包含编译器和运行时。编译器用于将模板字符串编译为 JavaScript 函数，运行时用于渲染视图。

Vue.runtime.js 是 Vue 的运行时版本，只有运行时功能。它不能编译模板，因此需要使用 Vue.compile() 方法来编译模板。

Vue.js 的优点是可以使用编译器来优化模板的性能，并减少对 DOM 的操作。

Vue.runtime.js 的优点是体积更小，更容易在浏览器中直接使用。

以下是vue.js 和 vue.runtime.js的对比

截屏2024-01-03 21.32.36.png

template 和 render 怎么用

Vue 的 template 和 render 都是用于渲染视图的，但它们有不同的使用方式。

template 是 Vue 的完整版中使用的渲染方式。它使用 HTML 标签和指令来描述视图。template 可以直接写在 JS 文件中，也可以写在单文件组件中的 template 属性中。

render 是 Vue 的运行时版本中（非完整版中）使用的渲染方式。它使用 JavaScript 代码来描述视图。render 函数需要返回一个虚拟 DOM 节点树。

比如，这两个示例都渲染了一个带有标题的 div 元素。

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>


//////

const App = {
  data() {
    return {
      message: "Hello, world!"
    };
  },
  render() {
    const h = this.$createElement;
    return h("div", { id: "app" }, [
      h("h1", {}, this.message)
    ]);
  }
};

用 codesandbox.io 写 Vue 代码

如果不方便在本地写vue代码，可以用codesandbox来写。create codesand之后选vue就可以了。

记得不建立账户的话可以一直写，建立了就只能写50个。

Vue学习笔记-vue2初尝试