首页 > 其他分享 >Vue 快速入门

Vue 快速入门

时间:2024-05-30 21:55:49浏览次数:25  
标签:web Vue createApp 入门 url sum value reactive 快速

常用标签讲解

1.模块化开发 导入 createApp, reactive 

<div id="app">
    {{ msg }}

    <h2>{{ web.title }}</h2>
    <h3>{{ web.url }}</h3>
</div><script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'
    
    createApp({
        setup() {
            const web = reactive({
                title: "邓瑞编程",
                url: "dengruicode.com"
            })

            return {
                msg:"success",
                web
            }
        }
    }).mount("#app")
</script>

 

2.点击事件

 v-on 简写@click

    <!-- v-on:click 表示在 button 元素上监听 click 事件 -->
    <button v-on:click="edit">修改</button> <br>

    <!-- @click 简写形式 -->
    <button @click="add(20, 30)">加法</button> <br>

 

3.显示和隐藏 v-show

 <p v-show="web.show">邓瑞编程 dengruicode.com</p>

<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'
    
    createApp({
        setup() {
            const web = reactive({
                show: true
            })

            const toggle = () => {
                web.show = !web.show
            }

            return {
                web,
                toggle
            }
        }
    }).mount("#app")

</script>

 

4.条件渲染 v-if

    <p v-if="web.user < 1000">新网站</p>
    <p v-else-if="web.user >= 1000 && web.user < 10000">优秀网站</p>
    <p v-else-if="web.user >= 10000 && web.user < 100000">资深网站</p>
    <p v-else>超级网站</p>

 

5.动态属性绑定 v-bind 简写:

    <h3>v-bind:value="web.url"</h3>
    <input type="text" v-bind:value="web.url">

    <h3>简写 :value="web.url"</h3>
    <input type="text" :value="web.url">

 

6.遍历数组或对象 v-for

    <ul>
        <!-- <template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染  -->
        <template v-for="(value, key, index) in data.user">
            <li v-if="index == 1">
                index=> {{ index }} : key=> {{ key }} : value=> {{ value }}
            </li>
        </template>
    </ul>

 

    <ul>
        <li v-for="(value, key) in data.user">
            key=> {{ key }} : value=> {{ value }}
        </li>
    </ul>

 

7.双向数据绑定 v-model

    <input type="text" v-model="data.text">
    <input type="radio" v-model="data.radio" value="1">写作
    <input type="radio" v-model="data.radio" value="2">画画

 

8.v-model修饰符

<div id="app">
    <h3>url: {{ web.url }}</h3>
    <h3>user: {{ web.user }}</h3>

    实时渲染 <input type="text" v-model="web.url"> <br>

    在失去焦点或按下回车键之后渲染 <input type="text" v-model.lazy="web.url"> <br>

    <!-- 输入 100人, web.user 的值仍为 100 -->
    输入框的值转换为数字类型 <input type="text" v-model.number="web.user"> <br>

    去除首尾空格 <input type="text" v-model.trim="web.url">
</div>

 

9.渲染数据 v-text 和 v-html

<div id="app">
    <h3>{{ web.title }}</h3>

    <!-- v-text 将数据解析为纯文本格式 -->
    <h3 v-text="web.title"></h3>

    <!-- v-html 将数据解析为 html 格式 -->
    <h3 v-html="web.url"></h3>
</div>

 

10.计算属性 computed

    <h3>sum: {{ sum }}</h3>
    <h3>sum: {{ sum }}</h3>

    x <input type="text" v-model.number="data.x"> <br>
    y <input type="text" v-model.number="data.y">

    
  
     //计算属性-有缓存 [计算属性根据其依赖的响应式数据变化而重新计算]
      const sum = computed(() => {
               console.log("sum") //打印一次
               return data.x + data.y
       })

 

标签:web,Vue,createApp,入门,url,sum,value,reactive,快速
From: https://www.cnblogs.com/zhaoyingjie/p/18223310

相关文章

  • 工业组态软件Intouch(单机版)入门{第四篇}
    Intouch创建项目整体窗口结构一个Intouch项目是由多个窗口组合而成的。想要成功开发出一个界面优美、操作交互合理、运行流畅的项目,会搭配使用各种各样的窗口是前提。下文展示一个常用页面结构的开发。1、我们以1920*1080的项目为例(这是目前使用最多的分辨率),将画面分为三......
  • 数据结构学习笔记-快速排序
    快速排序的算法设计与分析问题描述:设计并分析快速排序【算法设计思想】选择基准值:从待排序数组中选择一个元素作为基准值(pivot)。在这个示例中,选择了数组中的最后一个元素作为基准值。分割数组:将数组分割为两部分,小于等于基准值的元素放在基准值的左边,大于基准值的元素放在右......
  • 快速入门列表与元组
    一、列表1.列表定义列表格式:列表名=[元素一,元素二,元素三......]如:创建列表l0,元素为1、2、a以及hello print:打印  type:判断数据类型2.列表索引与遍历列表索引即列表下标,表示元素在列表中的位置a:列表长度由图可知:列表长度为4b:索引分别为0,1,2,3c.遍历列表遍历即......
  • vue3 require动态加载图片及动态加载svg图
    以下是本地图片及引用本地的svg图报错//这里是获取本地的png图片报错<divclass="flex-itemsswiper-item"v-for="(item,index)inlist":key="index"><imgclass="brand-img":src="require(item.url)"/></......
  • Vue3快速上手(一)
    Vue3快速上手(一)!之前一直分享的是react的相关知识,很长时间没更新了,接下来我会更新关于Vue3的相关知识!!Vue3快速上手内容分为三部分,本次先去介绍一下关于Vue3的第一部分,希望我的分享能对大家学习Vue3有所帮助!!!1.Vue3简介2020年9月18日,Vue.js发布版3.0版本,代号:OnePiece(n......
  • 期中考试后总结-矩阵快速幂
    前言:总结了一下期中考试后OI和学习上的一些收获,以及需要接下来加强的地方———————————————————————————————————————————————————————————————————————————————————————————————......
  • 新版Python安装,新手入门必看,报错分析
    第一次接触Python的朋友,可能会在安装的过程中遇到很多问题,下面会详细的指出可能出现的各种状况、以及应对方法,让新入行的朋友也可上手安装,并且完成第一个Helloworld代码。【Python安装】一、打开python官网点击下载搜索并打开官网进入页面后点击导航中的Downloads进入下载......
  • 使用 Vue 导入和导出 Excel XLSX--SpreadJS
    使用Vue导入和导出ExcelXLSX2024年5月29日MESCIUS的SpreadJS使您能够将功能齐全的电子表格放入您的Web应用程序中,为用户提供熟悉的类似Excel的体验。MESCIUS的SpreadJS是一款高性能JavaScript电子表格组件,旨在将类似Excel的......
  • VUE3+jszip和file-saver如何实现下载多个文件导出为一个zip格式
    借鉴大佬写的文章,他这个是图片的https://www.jb51.net/javascript/31723515u.htm业务场景:后端会给在线文件地址,然后根据列表点击批量下载当前存在问题会有文件跨域的情况,这个我试过几个方案都不行,只能遵循同源政策,放一起插件安装npminstalljszipnpminstallfile-saver我......
  • ant design vue a-date-picker 控件问题
    遇见a-date-picker控件回显,不操作再保存报错问题,后台是date类型会报下面这个错误Fielderrorinobject'notice'onfield'endTime':rejectedvalue[2024-05-31T07:32:24.000+00:00];codes[typeMismatch.notice.endTime,typeMismatch.endTime,typeMismatch.java.util.Date,......