VUE 笔记基础语法篇

最新推荐文章于 2025-05-13 14:34:18 发布

崔佳宇_

最新推荐文章于 2025-05-13 14:34:18 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

分类专栏： # vue.js 笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/nullccc/article/details/126160801

vue.js 笔记专栏收录该内容

4 篇文章

订阅专栏

VUE hello world 程序

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({ <!-- vue实例 -->
        template:`<div>hello world</div>`
    })
    app.mount("#root") <!-- 注册到 div root -->
</script>
</html>

1 插值表达式

在 “{{}}”中可以写入一行表达式，可以直接获取data的数据。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return{
                message:'hello world'
            }
        },
        template:`<div>{{message}}</div>`
    })
    app.mount("#root")
</script>
</html>

1.2 使用 v-html 进行html元素插值

<script>
    const app = Vue.createApp({
        data(){
            return{
                message:'<strong>hello world</strong>'
            }
        },
        template:`<div>{{message}}</div>`
    })
    app.mount("#root")
</script>

如果单纯插值表达式，会将 html 标签原样输出

此刻使用 v-html 可以解决这个问题，v-html 指令是设置 innerHTML

<script>
    const app = Vue.createApp({
        data(){
            return{
                message:'<strong>hello world</strong>'
            }
        },
        template:`<div v-html="message"></div>`
    })
    app.mount("#root")
</script>

1.3 对 html 元素名字进行插值

使用 [attributeName] 即可插值属性名

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({

        data(){
            return{
                name:'title',
                message:'dell'
            }
        },
        template:`
        <div v-bind:[name]="message"></div> <!-- 属性名插值语法 -->
        `
    })
    app.mount("#root")
</script>
</html>

2 数据绑定

Vue中有2种数据绑定的方式：

单向绑定（v-bind）：数据只能从data流向页面
双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：

双向绑定一般都应用在表单类元素上（如：<input>、<select>、<textarea>等）
v-model:value 可以简写为 v-model，因为 v-model 默认收集的就是 value 值

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({

        data(){
            return{
                mes11:"uuu"
            }
        },
        template:`
        <input type="text" v-bind:value="mes11"/> <!-- 单项绑定 -->
        <input type="text" v-model="mes11"/> <!-- 双向绑定 -->
        `
    })
    app.mount("#root")
</script>
</html>

2.1 checkbox表单的双向绑定

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data:function(){
            return({
                msg:[]
            })
        },
        template: `
        {{msg}}
        jack <input type="checkbox" v-model="msg" value="jack" />
        dell <input type="checkbox" v-model="msg" value="dell" />
        lee <input type="checkbox" v-model="msg" value="lee" />
        `
    })
    app.mount("#root")
</script>

</html>

使用数组类型可以获得 checkbox的合集

2.2 option表单的双向绑定

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data:function(){
            return({
                msg:'A'
            })
        },
        template: `
        {{msg}}
        <select v-model="msg">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        `
    })
    app.mount("#root")
</script>

</html>

3 计算属性 computed

computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({

        data(){
            return{
                message:"hello world",
                count:2,
                price:5
            }
        },
        computed:{
            total(){
                return this.count * this.price
            }
        },
        template:`
        <div>{{total}}</div>
        `
    })
    app.mount("#root")
</script>
</html>

结果输出 10

4 侦听器 watch

watch对象中，属性名为侦听的数据名，当数据被修改即可调用这个函数。

computed 和 watch 都能实现的功能建议使用conputed实现，更加简洁而且有缓存。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({

        data(){
            return{
                msga:"hello"
            }
        },
        watch:{
            msga(){
                setTimeout(()=>{
                    console.log(111)
                },1000)
            }
        },
        template:`
        <input v-model="msga"/>
        `
    })
    app.mount("#root")
</script>
</html>

5 事件绑定

v-on:click 等价于 @click 点击后触发事件

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: "1"
            }
        },
        methods:{
            handleBtnClick:function(event){
                console.log(event.target) <!-- target可以获得原生事件 -->
            }
        },
        template: `
        <div @click="handleBtnClick">{{counter}}</div>
        `
    })
    app.mount("#root")
</script>

</html>

5.1 事件绑定参数

事件绑定可以传递参数，$event 可以传递真实的dom

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: "1"
            }
        },
        methods:{
            handleBtnClick:function(num,event){
                console.log(event)
            }
        },
        template: `
        <div @click="handleBtnClick(2,$event)">{{counter}}</div>
        `
    })
    app.mount("#root")
</script>

</html>

5.2 事件绑定修饰符阻止冒泡

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: "1"
            }
        },
        methods:{
            handleDivClick:function(){
                console.log('dev')
            },
            handleBtnClick:function(){
                console.log('button')
            }
        },
        template: `
        <div @click="handleDivClick">
            <button @click="handleBtnClick">button</button>
        </div>
        `
    })
    app.mount("#root")
</script>

</html>

如果事件嵌套事件，会冒泡触发，内部的实现会触发外部事件。

对外层元素使用 .self 即可阻止冒泡

<div @click.self="handleDivClick">
    <button @click="handleBtnClick">button</button>
</div>

事件修饰符还有 .prevent 阻止默认行为，.capture 捕获模式，.once 只执行一次等...

6 按键修饰符

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        methods:{
            handleKeyDown:function(){
                console.log(1)
            }
        },
        template: `
        <input @keydown.delete="handleKeyDown" />
        `
    })
    app.mount("#root")
</script>

</html>

当进行指定的按键操作即可触发函数

常用有按键修饰符 enter tab delete esc up down left right

7 条件渲染 v-if v-show区别

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data:function(){
            return({
                show:false
            })
        },
        template: `
        <div v-if="show">hello world</div>
        <div v-show="show">bye world</div>
        `
    })
    app.mount("#root")
</script>

</html>

v-if 直接不渲染这个dom元素，v-show采用display:none的方式

8.0 列表循环

8.1 数组列表循环

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data:function(){
            return({
                list:['dell','les','teacher']
            })
        },
        template: `
        <ul>
            <li v-for="value in list">{{value}}</li>
        </ul>
        `
    })
    app.mount("#root")
</script>

</html>

效果如下：

还可以使用 value key 的形式输出

<li v-for="(value,key) in list">{{value}}--{{key}}</li>

8.2 对象列表循环

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data:function(){
            return({
                    listObject:{
                        firstName:'dell',
                        lastName:'lee',
                        job:'teacher'
                    }
            })
        },
        template: `
        <ul>
            <li v-for="(value,key,index) in listObject">{{value}}---{{key}}---{{index}}</li>
        </ul>
        `
    })
    app.mount("#root")
</script>

</html>

如果 v-for 一个对象可以获得 value，key，index 三个值