Vue 快速入门

基于Vit快速创建Vue3项目

npm create vite@latest
Ok to proceed? (y) » y
               Project name: » demo
               Select a framework: » Vue
               Select a variant: » JavaScript
Done. Now run:
                       cd demo
                       npm install
                       npm run dev

 Local: http://localhost:5173
删除文件
    src\style.css
    src\components\HelloWorld.vue

删除代码
    main.js
    import './style.css'

修改代码
src\App.vue

　　<script setup>
    </script>

    <template>
        dengruicode.com
     </template>

     <style scoped>
     </style>

 

 

常用标签讲解

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
       })