Vue3案例详解(二)

最新推荐文章于 2024-07-19 10:30:06 发布

flame.liu

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量192

点赞数 2

分类专栏：前端文章标签： vue.js 前端 html

本文链接：https://blog.csdn.net/qq_29862655/article/details/131549396

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

此篇文章编写于2023年7月5日.如果查阅时间太久请注意版本的迭代.

本篇文章主要针对于初学VUE的新手,对vue网站上的案例进行了详细解释.

在此之前你可以先学习:

我比较喜欢用详细的注释来进行学习,所以话不多,代码和注释管够.

Vue代码的组织格式有两种:选项式,组合式,官方虽然没有明确表示哪种跟好一些,但是从实际情况来说,组合式代码更加的简洁(没有那么多大括号),而且与js代码组织形式更加的类似,所以我推荐使用组合式,当然,熟练了其中一个,另外一个也不会有问题.

好了,不废话,我们开始.

1.使用VSCode创建好项目,在src/compenonts下创建demo2.vue

<!-- 
    本示例演示html控件与vue对象之间的双向绑定 
    所谓的双向绑定就是当其中一个值发生变化时,另外也会一起变化.
    双向绑定的前提是使用ref或者reactive定义变量.
    ref用来定义简单类型,在vue中需要用.value获取值.
    reactive用来定义复杂数据类型.
-->
<script setup>
import { ref,reactive } from 'vue'

const str = ref('试试修改这段文字')
const checked = ref(true)
// 使用[]表示是一个数组
const checkedNames = ref(['Jack'])
// 如果这里使用const picked = 'One',那么就不是响应式对象,就不能发生双向绑定
const picked = ref('One')
const selected = ref('A')
const multiSelected = ref(['A'])
</script>
<!-- template是一个模板,它的好处是,不会在html中产生任何多的标签 -->
<template>
  <h2>Text Input</h2>
<!-- 
    以v-开头的表示是Vue的属性(例如:v-model),等号后面是vue定义的对象
    v-model自动匹配控件的value属性,所以在控件中,不能同时使用value属性.
    str对象是由ref封装的,获取值应该使用str.value,但是在template中自动解封.
 -->
  <input v-model="str" />{{ str }}

  <h2>Checkbox</h2>
  <!-- checked为true,所以复选框默认被选中 -->
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">Checked: {{ checked }}</label>

  <!--
    多个复选框可以绑定到相同的 v-model 数组:checkedNames
    数组和复选框的值相互映射,数组的值会反应在复选框中,复选框的值也会反馈给数组.
  -->
  <h2>Multi Checkbox</h2>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <p>Checked names: <pre>{{ checkedNames }}</pre></p>

  <h2>Radio</h2>
  <!-- 当v-model中的值遇控件value的值一致时,单选按钮为选中状态 -->
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>

  <h2>Select</h2>
  <!-- 下来列表的v-model表示被选中的值, disabled属性表示这个选项禁止选择-->
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
<!-- 多选列表中v-model是一个数组,按住ctrl键可以多选 -->
  <h2>Multi Select</h2>
  <select v-model="multiSelected" multiple style="width:100px">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ multiSelected }}</span>
</template>

2. 在项目的src文件夹下创建text2.html页面代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo2示例</title>
</head>
<body>
    <!-- <template id="item">这个写法是错的</template> -->
    <div id="item"></div>
    <script type="module">
        import {createApp} from 'vue'
        // ./表示当前文件夹下
        import demo2 from './components/demo2.vue'
        //将组件创建为一个名为demo2的app,并将其挂载(加载)到id为item的标签中.这里不能是template
        createApp(demo2).mount("#item")
    </script>
</body>
</html>

3.在终端运行:npm run dev

执行成功后,根据给出端口打开浏览器查看你的页面.

flame.liu

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue3案例详解(二)

此篇文章编写于2023年7月5日.如果查阅时间太久请注意版本的迭代.本篇文章主要针对于初学VUE的新手,对vue网站上的案例进行了详细解释.我比较喜欢用详细的注释来进行学习,所以话不多,代码和注释管够.Vue代码的组织格式有两种:选项式,组合式,官方虽然没有明确表示哪种跟好一些,但是从实际情况来说,组合式代码更加的简洁(没有那么多大括号),而且与js代码组织形式更加的类似,所以我推荐使用组合式,当然,熟练了其中一个,另外一个也不会有问题.好了,不废话,我们开始.
复制链接

扫一扫