VUE学习笔记（1）

最新推荐文章于 2024-05-19 20:18:26 发布

会璇转地木马

最新推荐文章于 2024-05-19 20:18:26 发布

阅读量734

点赞数

分类专栏： VUE WEB 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46187519/article/details/121316773

版权

WEB 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

VUE

2 篇文章 0 订阅

订阅专栏

VUE创建实例：

<!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>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 注意区分：js表达式 和 js代码(语句)
        1，表达式：一个表达式会生成一个值 -->
    <div class="box">
        <h1>hello,{{name}}</h1>
    </div>
</body>
<script>
    // 创建Vue实例
    new Vue({
        el:'.box',  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        data:{      //data中用于存储数据，数据供el所指定的容器去使用。
            name:'肖',
            age: 18
        },
        methods: {
            
        },
    })
</script>
</html>

VUE数据绑定：

<!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>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        单向数据绑定：<input type="text" :value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name">
    </div>
</body>
<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el:'#root',
        // el的第二种写法
        // v.$mount('#root')
        data:{
            name:'学习'
        },

        // data的第二种写法
        // data:function() {
        //     return {
        //         name:'前端'
        //     }
        // },
    })
    
</script>
</html>

VUE数据代理：

<!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>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 1，Vue中的数据代理：
        通过vm对象来代理data对象中的属性（读/写）
    2，Vue中数据代理的好处：
        更加方便的操作data中的数据
    3，基本原理：
        通过Object.defineProperty()把data对象中所有属性添加到vm上。
        为每一个添加到vm上的属性，都指定一个getter/setter。
        在getter/setter内部去操作（读/写）data中对应的属性。 -->
    <div id="root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</body>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el:'#root',
            data:{
                name:'信息',
                address:'中路'
            }
        })
    </script>
</html>

VUE数据处理：

<!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>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- Vue中的事件修饰符：
        1.prevent：阻止默认事件（常用）；
        2.stop：阻止事件冒泡（常用）；
        3.once：事件只触发一次（常用）；
        4.capture：使用事件的捕获模式；
        5.self：只有event.target是当前操作的元素是才触发事件；
        6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
    -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="showInfo">提示信息</button>
        <button @click="showInfo2($event,66)">提示信息</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'尚硅谷'
        },

        methods: {
            showInfo(event){
                alert("你好");
            },
            showInfo2(event,number){
                alert("你好");
                console.log(number);
            }
        },

    })
</script>
</html>

会璇转地木马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习笔记（1）

VUE创建实例：<!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"> <t
复制链接

扫一扫