vue3的基本使用（步骤，架构模式，调试工具，指令）

想退休的搬砖人

已于 2024-09-11 16:34:20 修改

阅读量381

点赞数 5

文章标签： vue.js 前端 javascript

于 2024-09-11 15:04:15 首次发布

本文链接：https://blog.csdn.net/2301_79568779/article/details/142130816

版权

1.基本使用步骤

a.导入vue.js的script脚本文件（自动为window对象挂载vue构造函数）

b.在页面中声明一个将要被vue控制的Dom区域

c.创建vue实例对象

<body>
    <div id="app">
        {{msg}}
    </div>
</body>
</html>
<script src="./vue3.js"></script>
<script>
    let app = Vue.createApp({
        data(){
            return{
                msg:'123'
            }
        }
    })
    app.mount('#app')
</script>

data指向的对象是Model数据源

div是View视图区域

vue实例对象就是ViewModel

2.MVVM项目的架构模式

M：model，模型：

主要完成业务功能，在数据库相关的项目中，数据库的增删改查属于模型（重点）。(nodeJS中的db文件夹)，没有页面，是纯粹的逻辑

V：view，视图：

主要负责数据的显示（HTML+CSS，动态网页（jsp，含有html的php文件））页面的展示和用户的交互。

VM：ViewModel

主要完成M和V的数据通信，并且是双向绑定。而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

3.vue调试工具

a.chrome浏览器右上角三个点图标，点击设置，

b.点击扩展程序，在应用商店搜索扩展程序vue.js devtools,添加至chroma，

c.详情：允许此扩展程序读取和更改您在所访问的网站上留存的所有数据，在所有网站上，打开允许访问文件网址

d.重启浏览器

e.点击调试面板最右侧vue

4.vue指令

指令是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构

a.内容渲染指令v-text, v-html, {{}}

b.属性绑定指令v-bind

c.事件绑定指令v-on

d.双向绑定指令v-model

e.条件渲染指令v-if,v-else-if,v-else,v-show

f.列表渲染指令v-for

<body>
    <div id="app">
        <!--1. v-text和插值表达式只能渲染纯文本内容。v-html会把包含html标签的字符串渲染为页面的html元素 -->
        <p>{{msg}}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>
        <p>{{str}}</p>
        <p v-text="str"></p>
        <p v-html="str"></p>
        <!-- 2.为元素的属性绑定属性值,v-bind可省略 -->
        <input type="text" v-bind:placeholder="placeholder">
        <img v-bind:src="src" alt="">
        <!-- 3.事件绑定v-on:click,v-on:input,v-on:keyup，简写@click ,当事件处理函数中的代码简单，可简写到行内-->
        <button v-on:click="fn1">按钮1</button>
        <button v-on:click="msg+='123'">按钮1</button>
        <button v-on:click="fn2('123',$event)">按钮2</button>
        <!-- 事件修饰符.prevent阻止默认行为,.stop阻止事件冒泡,.capture以捕获方式处理当前事件,.once只触发一次,.self当前元素自身触发 -->
        <a href="http://www.baidu.com" @click.prevent="onLinkClick">百度</a>
        <div class="outer" @click="outerClick">
            <div class="inner"  @click.stop="innerClick"></div>
        </div>
        <!-- 事件默认以冒泡形式执行，加capture以捕获形式执行，从外到里 -->
        <div class="outer" @click.capture="outerClick">
            <div class="inner"  @click="innerClick"></div>
        </div>
        <div class="inner"  @click.once="innerClick"></div>
        <!-- 里中外冒泡执行，不执行以冒泡形式触发的事件加上self -->
        <div class="box" @click="boxClick" >
            <div class="outer" @click.self="outerClick">
                <div class="inner"  @click="innerClick"></div>
            </div>
        </div>
        <!-- 按键修饰符 -->
        <input type="text" @keyup.enter="submit" @keyup.esc="clear">
    </div>
</body>
</html>
<script src="./vue3.js"></script>
<script>
    let app = Vue.createApp({
        data(){
            return{
                msg:'123',
                str:'<b>b</b>',
                placeholder:'hello',
                src:"./001.png"
            }
        },
        methods:{
            fn1(e){
                console.log('按钮1');
                // 接受事件对象event
                const nowBgColor=e.target.style.backgroundColor;
                e.target.style.backgroundColor=nowBgColor==='red'?'':'red'
            },
            fn2(str,e){
                this.msg+=str;
                const nowBgColor=e.target.style.backgroundColor;
                e.target.style.backgroundColor=nowBgColor==='red'?'':'red'
            },
            onLinkClick(){
                alert('ok')
            },
            outerClick(){
                alert('outerClick')
            },
            innerClick(){
                alert('innerClick')
            },
            boxClick(){
                alert('boxClick')
            },
            submit(e){
                alert(`按键${e.target.value}`)
            },
            clear(e){
                e.target.value=''
            }
        }
    })
    app.mount('#app')
</script>

<body>
    <div id="app">
        <!-- 4.双向绑定 -->
        <!-- 输入框 -->
        <p><input type="text" v-model="value">{{value}}</p>
        <!-- 下拉选择框 -->
        <select v-model="num" name="" id="">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        {{num}}
        <!-- 单选框 -->
        <input type="radio" v-model="istrue" value="yes" id="yes"><label for="yes">yes</label>
        <input type="radio" v-model="istrue" value="no" id="no"><label for="no">no</label>
        <!-- 单个复选框 -->
        <p><input type="checkbox" v-model="isCheckd">xxxx</p>
        <!-- 复选框 -->
        <input type="checkbox" v-model="arr" value="aaaa">aaaa
        <input type="checkbox" v-model="arr" value="bbbb">bbbb
        <input type="checkbox" v-model="arr" value="cccc">cccc
        {{arr}}
        <!-- v-model指令修饰符.number,.trim,.lazy -->
        <p><input type="text" v-model.number="value">{{value}}</p>
        <p><input type="text" v-model.trim="value">{{value}}</p>
        <p><input type="text" v-model.lazy="value">{{value}}</p>
        <!-- 使用了lazy后，在失去焦点时更新value，而不是在输入时更新 -->
        <!--5.条件渲染  -->
        <button v-if="flag" @click="clickFn">按钮1</button>
        <button v-show="flag"@click="clickFn">按钮2</button>
        <p v-if="type==='A'">优秀</p>
        <p v-else-if="type==='B'">良好</p>
        <p v-else-if="type==='C'">一般</p>
        <p v-else>差</p>
        <!-- 6.列表渲染v-for -->
        <div v-for="(item,index) in arr1" :key="item">{{index}}{{item}}</div>
        <div v-for="(value,key) in obj">{{key}}{{value}}</div>
        <div v-for="(item,index) in str">{{index}}{{item}}</div>
        <!-- 嵌套循环 -->
        <div v-for="(item,index) in objArr">
          <p v-for="(v,k) in item">{{k}}{{v}}</p>
        </div>
        <div v-for="(item,index) in objArr" :key="item">
            <input type="checkbox">
          {{index}}{{item.a}}
        </div>
        <button @click="addFn">key</button>
    </div>
</body>

<script src="./vue3.js"></script>
<script>
    let app = Vue.createApp({
        data(){
            return{
                value:'',
                num:'',
                istrue:'no',
                isCheckd:true,
                arr:[],
                flag:true,
                type:'D',
                arr1:['1a','2b','3c','4d'],
                objArr:[{
                    a:"1aaaaaaaa",
                    b:"1bbbbbbbbbbbbb",
                    c:"1cccccccccccc",
                    d:"1dddddddddd"
                },{
                    a:"2aaaaaaaa",
                    b:"2bbbbbbbbbbbbb",
                    c:"2cccccccccccc",
                    d:"2dddddddddd"
                }],
                obj:{
                    a:"1aaaaaaaa",
                    b:"1bbbbbbbbbbbbb",
                    c:"1cccccccccccc",
                    d:"1dddddddddd"
                }
                    }
                },
        methods:{
            clickFn(){
                this.flag=!this.flag  
            },
            addFn(){
                this.objArr.unshift({
                    a:`${Math.random()*10}aaaaaaaa`,
                    b:`${Math.random()*10}bbbbbbbbbbbbb`,
                    c:`${Math.random()*10}cccccccccccc`,
                    d:`${Math.random()*10}dddddddddd`
                })
            }
        }
    })
    app.mount('#app')
</script>

v-if和v-show的区别

实现原理不同

v-if指令会动态的创建或移出dom元素，

v-show会动态添加或移出style="display:none;"样式

性能消耗

v-if有更高的切换开销，v-show有更高的初始渲染开销。

频繁切换使用v-show。如果运行时条件很少改变，使用v-if

v-for中的key

当列表的数据发生表示变化时，vue会尽可能地复用已存在的dom元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。需要为每项提供一个唯一的key属性。

key的值只能是字符串或数字类型，必须具有唯一性，建议把数据项id属性作为key,使用index的值作为key值没有任何意义。

5.简单案例

<body>
    <div id="app">
        <div class="top">
            <h4>添加品牌</h4>
            <p>
                <input class="goodVal" type="text" v-model.trim="goodVal">
                <button @click="addFn">添加品牌</button>
            </p>
        </div>
        <div class="bottom">
            <table>
                <tr>
                    <td class="goodId">#</td>
                    <td class="goodName">名称</td>
                    <td class="goodState">状态</td>
                    <td class="goodTime">时间</td>
                    <td class="goodAction">操作</td>
                </tr>
                <tr v-for="(item,index) in goods" :key="item.id">
                    <td class="goodId">{{index+1}}</td>
                    <td class="goodName">{{item.name}}</td>
                    <td class="goodState">
                        <input type="checkbox" v-model="item.state" :id="item.id">
                        <label :for="item.id">{{item.state===true?"上架":"下架"}}</label>
                    </td>
                    <td class="goodTime">{{item.time}}</td>
                    <td class="goodAction"><u @click="clearFn(item.id)">删除</u></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
<script src="./vue3.js"></script>
<script>
    let app = Vue.createApp({
        data(){
            return{
                msg:'hello',
                goodVal:"",
                goods:[{
                    id:'1',
                    name:'苹果',
                    state:true,
                    time:'2020-11-03 11:00:00'
                },
                {
                    id:'2',
                    name:'梨',
                    state:true,
                    time:'2020-11-03 11:00:00'
                },
                {
                    id:'3',
                    name:'香蕉',
                    state:true,
                    time:'2020-11-03 11:00:00'
                }]
            }
        },
        methods:{
            clearFn(id){
                this.goods = this.goods.filter((item)=>{
                    return item.id !== id;
                })
            },
            addFn(){
                if(this.goodVal==''){
                    alert('请输入添加内容');
                    return;
                }
                let obj={
                    id:  Math.random()*10,
                    name:this.goodVal,
                    state:true,
                    time: this.formatTime()
                }
                this.goods.push(obj);
                this.goodVal='';
            },
            formatTime(){
                let dt=new Date()
                let y=dt.getFullYear();
                let m=this.padZero(dt.getMonth()+1);
                let d=this.padZero(dt.getDate());
                let hh=this.padZero(dt.getHours());
                let mm=this.padZero(dt.getMinutes());
                let ss=this.padZero(dt.getSeconds());
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            },
            padZero(n){
                console.log(n);
                return n>9 ? n:'0'+ n
            }
        }
    })
    app.mount('#app')
</script>