(1)vue基本使用

最新推荐文章于 2024-03-22 11:58:23 发布

liuyang___

最新推荐文章于 2024-03-22 11:58:23 发布

阅读量98

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/liuyang___/article/details/125118363

版权

vue学习笔记专栏收录该内容

15 篇文章 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 type="text/javascript" src="vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{1+2}}</div>
    </div>

<script>
    // vue的基本使用步骤
    // 1、需要提供标签用于填充数据
    // 2、需要引入vue.js库文件
    // 3、使用vue的语法做功能了
    // 4、把vue提供的数据填充到标签里面
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        }
        })
</script>
</body>

</html>

vue里面比较关键的两个属性

el:元素挂在位置（值可以是css选择器或者dom元素）

data:模型数据（值是一个对象）

---------------------------------------------------------------------------------------------------------------------------------

还有，我们这里面用到了一个叫插值表达式：

将数据填充到html标签种

插值表达式支持基本的计算操作（下面显示，我们计算成功了）