Vue3

最新推荐文章于 2024-06-13 15:12:44 发布

上晴下雪

最新推荐文章于 2024-06-13 15:12:44 发布

阅读量295

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/xueerkeji/article/details/114784704

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

前言

构建用户界面的渐进式框架
只关注视图层，采自底向上增量开发的设计。
目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

一、安装

1.独立版本安装

我们可以在 Vue.js 的官网上直接下载最新版本, 并用

2.CDN 方法

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/3.0.5/vue.global.js
unpkg：https://unpkg.com/vue@next, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js

3.NPM 方法

npm 安装速度慢，推荐使用淘宝镜像及其命令 cnpm，安装介绍：使用淘宝 NPM 镜像。

$ npm -v #查看版本 npm版本必须大于3.0
cnpm install npm -g  #升级 npm 
npm install cnpm -g  # 升级或安装 cnpm

$ cnpm install -g @vue/cli # 全局安装 vue-cli
$ vue --version # 安装完后查看版本

$ cnpm i -g @vue/cli-init # 安装 @vue/cli-int：

#创建项目
$ vue init webpack runoob-vue3-test

#进入项目，安装并运行
$ cd runoob-vue3-test
$ cnpm run dev
  DONE  Compiled successfully in 2558ms          

 I  Your application is running here: http://localhost:8080

4.Vite (推荐使用)

**优势：**Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

$ cnpm i -g create-vite-app # 全局安装 create-vite-app：
$ create-vite-app runoob-vue3-test2 # 创建项目 runoob-vue3-test2：

# 运行项目:
$ cd runoob-vue3-test2
$ cnpm install
$ cnpm run dev
> runoob-vue3-test2@0.0.0 dev /Users/tianqixin/runoob-test/vue3/runoob-vue3-test2
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Local:    http://localhost:3000/

二、目录结构

目录文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue:项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。 index.css:样式文件。
static	静态资源目录，如图片、字体等。
public	公共资源目录
test	初始测试目录，可删除
.xxxx文件	配置文件，包括语法配置，git配置等。

三、模板语法

1.插值

文本

/**格式**/
/** v-once 不随值改变**/
<div id="app">
	<p>{{message}}</p>
	<span v-once>{{message}}</span>
</div>

Html

/** v-html **/
<div id="example1" class="demo">
    <p>使用双大括号的文本插值: {{ rawHtml }}</p>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>

属性
HTML 属性中的值应使用 v-bind 指令,v-model 指令

<div id="example1" class="demo">
    <div v-bind:id="dynamicId"></div>
    <button v-bind:disabled="isButtonDisabled">按钮</button>
      <div v-bind:class="{'class1': use}">
    		v-bind:class 指令
  	</div>
</div>

表达式
Vue.js 都提供了完全的 JavaScript 表达式支持(每个绑定只能包含单个表达式)。

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
const HelloVueApp = {
  data() {
    return {
      ok: true,
      message: 'RUNOOB!!',
      id: 1
    }
  }
}
 
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

指令
指令是带有 v- 前缀的特殊属性。
v-if ,v-for
参数
在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

2.用户输入

v-model 指令用在input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定。
v-on 按钮监听事件，并对用户的输入进行响应

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<script>
const app = {
  data() {
    return {
      message: 'Runoob!'
    }
  }
}
Vue.createApp(app).mount('#app')
</script>

3.缩写

v-bind: 缩写 :
v-on 缩写 @

四、条件语句

1.条件判断

v-if，v-else，v-else-if：动态添加，为false,dom树中不存在该元素。
v-show ：基于 CSS 切换。dom树中一直存在该元素

五、循环语句

格式：v-for=“stie in sites”
格式2：v-for=" ( value , key ) in object "
格式3：v-for=" (value , key , index ) in object "
格式4：v-for=“n in 10” 迭代整数
案例：
显示过滤/排序后的结果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="n in evenNumbers">{{ n }}</li>
  </ul>
</div>
 
<script>
const app = {
    data() {
        return {
            numbers: [ 1, 2, 3, 4, 5 ]
	     }
    },
    computed: {
        evenNumbers() {
            return this.numbers.filter(number => number % 2 === 0)
        }
    }
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>

在组件上使用 v-for

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">添加 todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="例如：明天早上跑步"
    />
    <button>添加</button>
  </form>
  <ul>
    <todo-item
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="todos.splice(index, 1)"
    ></todo-item>
  </ul>
</div>
 
<script>
const app = Vue.createApp({
  data() {
    return {
      newTodoText: '',
      todos: [
        {
          id: 1,
          title: '看电影'
        },
        {
          id: 2,
          title: '吃饭'
        },
        {
          id: 3,
          title: '上 RUNOOB 学习'
        }
      ],
      nextTodoId: 4
    }
  },
  methods: {
    addNewTodo() {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

app.component('todo-item', {
  template: `
    <li>
      {{ title }}
      <button @click="$emit('remove')">删除</button>
    </li>
  `,
  props: ['title'],
  emits: ['remove']
})

app.mount('#todo-list-example')
</script>
</body>
</html>

六、组件

介绍：

组件（component）可以扩展 HTML 元素，封装成可重用的代码。可以用复用的小组件构建大应用，所有应用可抽象为一个组件数。
语法格式：

const Rootcomponent = {/* 选项 */}
const app = Vue.createApp(Rootmponent)
app.component('my-component',{
/* ..... */
})
const vm = app.mount('#app');

全局组件：
局部组件：

Prop

prop 是子组件用来接受父组件传递过的数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件，子组件需要显示地用 props 选项声明 “prop”。

<div id="appo">
  <site-name title="Google"></site-namet>
  <site-name title="Runoob"></site-namet>
  <site-name title="Taobao"></site-name>
</div>
 
<script>
const app = Vue.createApp({})
 
app.component('site-name', {
  props: ['title'],
  template: `<h4>{{ title }}</h4>`
})
 
app.mount('#app')
</script>

动态Prop

<div id="app">
  <site-info
    v-for="site in sites"
    :id="site.id"
    :title="site.title"
  ></site-info>
</div>
 
<script>
const Site = {
  data() {
    return {
      sites: [
        { id: 1, title: 'Google' },
        { id: 2, title: 'Runoob' },
        { id: 3, title: 'Taobao' }
      ]
    }
  }
}
 
const app = Vue.createApp(Site)
 
app.component('site-info', {
  props: ['id','title'],
  template: `<h4>{{ id }} - {{ title }}</h4>`
})
 
app.mount('#app')
</script>

Prop 验证

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

type 可以是下面原生构造器：

String
Number
Boolean
Array
Object
Date
Function
Symbol

type 也可以是一个自定义构造器，使用 instanceof 检测。

七、计算属性

computed: 计算属性
computed 与 methods 比较
两个效果一样，computed 基于依赖缓存，methods 渲染时调用。

八、监听属性

watch 来响应数据的变化

九、样式绑定

1.class 属性绑定

v-bind:class=“value” 可以是数组和对象

<div class="static" :class="{ 'active' : isActive, 'text-danger' : hasError }">
</div>

2.style 内联样式

v-bind:style="" 可以是数组和对象

<div id="app">
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

3.组件上使用 class 属性

组件上使用 class 属性，会添加到元素中。

十、事件处理

v-on 指令监听DOM事件，从而执行 JavaScript 代码。缩写@。
<button @click=“greet”>点我
<button @click=“counter += 1”>增加 1
<button @click=“one( $e v e n t), t w o ($ event)”>点我
事件修饰符：
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：还有很多

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

.exact 修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

十一、表单

输入框：text 和 textarea 元素使用 value 属性和 input 事件；
复选框：checkbox 和 radio 使用 checked 属性和 change 事件；复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组；
单选按钮：
select 列表：select 字段将 value 作为属性并将 change 作为事件。select 中增加multiple：多选时会绑定到一个数组。
值绑定：把值绑定到当前活动实例的一个动态属性上，这时可以用 v-bind 实现，此外，使用 v-bind 可以将输入值绑定到非字符串。

修饰符：
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

总结

后期再完善。。。

上晴下雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、安装1.独立版本安装2.CDN 方法3.NPM 方法4.Vite (推荐使用)二、目录结构二、目录结构1.引入库2.读入数据总结前言构建用户界面的渐进式框架只关注视图层，采自底向上增量开发的设计。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件一、安装1.独立版本安装我们可以在 Vue.js 的官网上直接下载最新版本, 并用 2.CDN 方法Staticfile CDN（国内） :
复制链接

扫一扫