vue3基础

每天进步一点(๑• . •๑)

已于 2025-01-07 20:05:38 修改

阅读量754

点赞数 2

文章标签：前端

于 2023-01-18 16:41:06 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43842848/article/details/128727115

版权

4. 安装vue命令行工具，即vue-cli 脚手架

二、新建项目

三、vue模板语法

1. 文本插值

2. Attribute绑定 v-bind 或者:

2. 新建路由配置文件：src/router/index.js

3. 路由器跳转

一、环境安装

1. 安装node.js

（1）什么是node.js?

node.js 是一个基于 Chrome V8 引擎的 JavaScirpt 运行环境

——Node.js不是一种独立的语言，也不是一个JavaScript的框架，Node.js只是一个让JavaScript运行在浏览器之外的平台。

（2）node.js安装教程

https://blog.youkuaiyun.com/qq_43557395/article/details/124325563

安装成功后，node -v可以查看版本

E:\nginx-1.20.2>node -v

v16.13.1

2. 安装cnpm（淘宝镜像）

（1）什么是npm和cnpm？

npm(ndoe package manager)是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
cnpm:因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以我们乐于分享的淘宝团队分享了使用国内镜像来代替国外服务器，国内的淘宝镜像则称之为cnpm

（2）npm的安装

新版的NodeJS已经集成了npm，可以在cmd命令行输入" npm -v"来测试是否成功安装。

（3）cnpm的安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 安装vue

cnpm install vue -g

4. 安装vue命令行工具，即vue-cli 脚手架

cnpm install @vue/cli -g

二、新建项目

1. 新建项目

 vue create XX

2. 安装依赖模块

npm install 或者 cnpm instal

3. 运行项目

npm run serve 或者 cnpm run serve

三、vue模板语法

1. 文本插值

最基本的数据绑定形式就是文本插值，双大括号中的msg会被替换为msg的值，当msg的值发生变化时，大括号中的值也会同步更新。

<span>Message: {{ msg }}</span>

2. Attribute绑定 v-bind 或者:

双大括号不能在html的 attributes中使用，要想响应式的绑定一个attribute，应该使用v-bind指令，如果绑定的值是null或者undefined，那么attribute将会从渲染的元素上移除。

<div v-bind:id="dynamicId"></div>
可以简写为：
<div :id="dynamicId"></div>

3. 条件渲染 v-if

（1）v-if

v-if指令用于条件性的渲染一块内容，这块内容只有在指令后的表达式为真的时候，才会被传染

<h1 v-if="awesome">Vue is awesome!</h1>

（2）v-else

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no </h1>

（3）v-else-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

（4）v-show

也可以用v-show来决定是否显示一个元素

<h1 v-show="false">Hello!</h1>

当条件为false时，在渲染后显示为：

<h1 style="display: none;">Hello!</h1>

（5）v-if 和v-show的区别

v-if 是“真实的”按条件渲染，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换
v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

4. 列表渲染 v-for

（1）我们可以用v-for来渲染一个列表，语法：

<li v-for="item in items" :key="item.id">
  {{ item.message }}
</li>
<li v-for="(item, index) in items" :key="item">
  PP - {{ index }} - {{ item.message }}
</li>
 
    
# items: [{ message: 'Foo' }, { message: 'Bar' }]

（2）也可以来渲染一个字典

<li v-for="(value, key, index) in myObject" :key="value">
  {{ index }} - {{ key }} - {{ value }} 
</li>
<br>
<li v-for="(value, key) in myObject" :key="key">
  {{ value }}*** {{ key }}
</li>
  
myObject: {
    title: 'How to do lists in Vue',
    author: 'Jane Doe',
    publishedAt: '2016-04-10'
  }

（3）v-for也可以接受一个整数值

<span v-for="n in 10" :key="n">{{ n }}</span>

注意：同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显

5，事件处理 v-on或者@

用法：v-on:click="methodName" 或 @click="handler"。

（1）内联事件处理器

# 事件被触发时，执行的是内联的js语句

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

data() {
  return {
    count: 0
  }
}

（2）方法事情处理器

v-on接受的是方法名

 <button @click="say('hello')">Say hello</button>
 <button @click="say('bye')">Say bye</button>

 methods: {
    say(msg) {
      alert(msg)
    }
  }

6. 表单输入绑定v-model

v-model可以将表单输入框中的内容同步给js中的变量，

（1）文本

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

<template>
  <p>Message is: {{ message }}</p>
  <input v-model="message" placeholder="edit me" />
</template>

（2）复选框

<script>
export default {
  data() {
    return {
      checked: true
    }
  }
}
</script>

<template>
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
</template

（3）单选按钮

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

<template>
    <div>Picked: {{ picked }}</div>
    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>

    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>
</template>

（4）选择器

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

<template>
  <span> Selected: {{ selected }}</span>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</template>

7. 生命周期钩子

注册周期钩子：mounted ，在组件完成渲染，并创建DOM节点后，运行代码

export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

四、组件基础

1. 定义组件

我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)。

*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html,js,css

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

2. 使用组件

要使用一个子组件，我们需要在父组件中导入它，并且在components中注册

<script>
import ButtonCounter from './ButtonCounter.vue'  # 导入组件

export default {
  components: {
    ButtonCounter  # 注册组件
  }
}
</script>

<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />  #使用组件
</template>

3. 传递props

props是一种特别的attributes，需要给组件传递参数，必须在组件的props列表上声明

<!-- BlogPost.vue -->
<script>
export default {
  props: ['title']  # 使用字符串数组声明props
}
</script>

<template>
  <h4>{{ title }}</h4>
</template>

<BlogPost title="My journey with Vue" />
<BlogPost title="Blogging with Vue" />
<BlogPost title="Why Vue is so fun" />

# 使用字典的形式来声明props，

# key 是 prop 的名称，而值则是该 prop 预期类型

export default {
  props: {     
    title: String,
    likes: Number
  }
}