标签：npm count vue const name 基础 Vue vue3

1. 网站开发Vue3基础上

1.1 什么是Vue【官网】

Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效的开发用户界面。无论是简单还是复杂的界面，Vue都可以胜任。
Vue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。

1.2 为什么要使用Vue

简单易学
渐进式框架
组件化开发
响应式数据绑定
性能好和轻量级

1.3 Vue初体验-实现计数器

<!DOCTYPE html>
<html>
    <!-- 导入vue的库，从公网CDN导入 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 创建一个带有id="app"的div，vue应用程序的根元素 -->
    <div id="app">
        <!-- vue语法中的插值表达式，可以直接显示vue定义的数据内容 -->
        <p>{{ message }}</p>
        <p>{{ count }}</p>
        <!-- 定义了一个按钮，绑定了一个指令click -->
        <button @click="count++">
            Count is :{{ count }}
        </button>
    </div>

    <script>
        // 从vue对象中提取出createApp这个函数
        // vue.createApp
    const { createApp } = Vue
    // 创建一个新的Vue应用实例，并将其挂载到id为app的这个元素上
    createApp({
        // data是用于定义组件或实例中的数据
        data() {
        // 把数据导出，可以被元素使用
        // 这些是双向绑定的
        return {
            message: 'Hello Vue',
            count: 0
        }
        }
    }).mount('#app')    
    </script>
</html>

1.4 Vue新一代脚手架Vite项目工程化

PS C:\Users\86152\Desktop\VUE基础> npm create [email protected] 
√ Project name: ... vue-study
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Scaffolding project in C:\Users\86152\Desktop\VUE基础\vue-study...

Done. Now run:

  cd vue-study
  npm install
  npm run dev

npm notice 
npm notice New major version of npm available! 9.5.1 -> 10.5.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.0
npm notice Run npm install -g [email protected] to update!
npm notice
PS C:\Users\86152\Desktop\VUE基础> cd .\vue-study\
PS C:\Users\86152\Desktop\VUE基础\vue-study> npm install 

added 25 packages, and audited 26 packages in 56s

4 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS C:\Users\86152\Desktop\VUE基础\vue-study> npm run dev

> [email protected] dev
> vite


  VITE v4.5.3  ready in 494 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

1.5 Vite项目工程化详解

目录结构介绍

node_modules: 存放项目依赖的其他模块
public: 用于存放静态文件，可以使用/xxxx进行访问，一般会把第三方的文件放在这个目录
src: 项目源代码目录

assets: 也是用来存放静态文件，比如说字体、图片、ocon等
components: 用于存放组件，一个个Vue文件
App.vue: 项目的根组件，index.html通过导入main.js实现
App.vue和index.html的内容绑定，同时其他组件也通过App.vue
进行导入。
main.js: 程序的入口文件，可以实现App.vue和index.html的绑定
style.css: 全局样式表，也是通过main.js导入的
package.json: 项目的描述文件，依赖的包、版本
没有被列出来的一些目录：
- src/
  - router: vue路由配置目录
  - store: 状态存储
  - views: 页面组件
  - utils: 封装的工具类
  - config: 程序配置
  - api: 后端接口配置

1.6 Vue中setup的ref和reactive的区别

// ref reactive 区别
// ref: 一般用于定义简单的响应式数据
// reactive: 一般用于创建一个响应式对象
const count = ref(0)
const name = ref("wer")
console.log(name)
name.value = "wer-new"
console.log(name)

// 定义一个对象
const info = reactive({
  name: "wer",
  age: 25,
  address: "beiJing"
})

1.7 Vue定义只读数据

// Vue定义一个只读数据
const readOnlyData = readonly("我是只读数据，不能修改")
console.log(readOnlyData)

1.8 Vue指令

1.8.1 v-on

// 定义一个事件函数
const plus1 = (step) => {
  count.value += step
}

v-on 可以简写成 @
    <button type="button" @click="plus1(2)">count is {{ count }}</button>

1.8.2 v-model

let inputValue = ref(1)
// 定义一个事件函数
const plus1 = () => {
  count.value += inputValue.value
  console.log("step:", inputValue.value)
}

</script>

<template>

  <div class="card">
    <!-- v-model: 用来实现数据的双向绑定的 -->
    <input v-model="inputValue" placeholder="请输入你要加的值" />
    <button type="button" @click="plus1(inputValue)">count is {{ count }}</button>
    <p>用户信息：{{ info }}</p>
    <p>用户姓名：{{ info.name }}</p>
  </div>

如果在输入框中修改的话，会将数字改成字符串，我们需要用修饰符去处理

1.8.3 v-model修饰符

  <div class="card">
    <!-- v-model: 用来实现数据的双向绑定的 -->
    <!-- 
      修饰符
      .number: 把value转成number类型
      .trim: 去除左右两边的空格
      .lazy: 当数据失去焦点或者回车时才会更新
     -->
    <input v-model.number="inputValue" placeholder="请输入你要加的值" />
    <button type="button" @click="plus1(inputValue)">count is {{ count }}</button>
    <p>用户信息：{{ info }}</p>
    <p>用户姓名：{{ info.name }}</p>
  </div>

1.8.4 v-show

const display = () => {
  boolValue.value = !boolValue.value
}

let boolValue = ref(true)
</script>

<template>

  <div class="card">
    <!-- v-model: 用来实现数据的双向绑定的 -->
    <!-- 
      修饰符
      .number: 把value转成number类型
      .trim: 去除左右两边的空格
      .lazy: 当数据失去焦点或者回车时才会更新
     -->
    <input v-model.number="inputValue" placeholder="请输入你要加的值" />
    <button type="button" @click="plus1(inputValue)">count is {{ count }}</button>
    <p>用户信息：{{ info }}</p>
    <p>用户姓名：{{ info.name }}</p>
    <!-- v-show: 可以帮助我们很简单的实现元素的显示和隐藏 -->
    <h1 v-show="boolValue">这是一个标题</h1>
    <button type="button" @click="display()" >{{ boolValue?"隐藏":"显示" }}</button>
  </div>

标签：npm,count,vue,const,name,基础,Vue,vue3
From： https://www.cnblogs.com/wangerrui/p/18088276

vue3基础上

1. 网站开发Vue3基础上

1.1 什么是Vue【官网】

1.2 为什么要使用Vue

1.3 Vue初体验-实现计数器

1.4 Vue新一代脚手架Vite项目工程化

1.5 Vite项目工程化详解

1.6 Vue中setup的ref和reactive的区别

1.7 Vue定义只读数据

1.8 Vue指令

1.8.1 v-on

1.8.2 v-model

1.8.3 v-model修饰符

1.8.4 v-show

相关文章

赞助商

阅读排行