Vue 02 - 初识Vue

最新推荐文章于 2024-08-22 16:04:37 发布

大力pig

最新推荐文章于 2024-08-22 16:04:37 发布

阅读量61

点赞数

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

本文链接：https://blog.csdn.net/m0_53753920/article/details/129848355

版权

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

前言

当搭建好Vue开发环境之后，想让Vue开始工作，我们需要做如下步骤。

准备容器

1. 在html的body里准备一个div容器，有id，方便后续使用css id选择器定位。如下:

2. Vue插值语法介绍,当使用变量时候，可以使用{{X}}来代表变量，容器里变化的内容放到Vue实例里托管。

<!--准备好一个容器-->
<div id="root">
<!--    //使用插值语法， 两组{{}}， 里面直接写上名字。-->
    <h1>hello, {{name}}</h1>
    <h1>hello, {{age}}</h1>

<!--    //容器里变化的东西放到实例里面托管。-->
</div>

创建Vue实例

1. 在script中创建vue实例，并且与容器关联，通过el : '#root'去关联，i.e. 找到id为root的元素。

2. data : 容器的数据源，数据名字与容器内命名一致即可。

代码如下：

    //创建vue实例
    //实例对象与容器创建关系
    new Vue({
        el:'#root',  // 通过css id选择器找到root, 值为css选择器。 el用于指定当前vue实例为哪个容器服务，通常为css选择器去定位。
        data :{
            name : '大力pig',
            age : '18'
        }
    })

代码演示

整段代码如下，创建一个html文件即可。可以通过浏览器打开。

<!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>初识vue</title>
    <script type="text/javascript" src="../js/vue.js">
    </script>
</head>
<body>

<!--准备好一个容器-->
<div id="root">
<!--    //使用插值语法， 两组{{}}， 里面直接写上名字。-->
    <h1>hello, {{name}}</h1>
    <h1>hello, {{age}}</h1>

<!--    //容器里变化的东西放到实例里面托管。-->
</div>


<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue报生产提示
    //创建vue实例
    //实例对象与容器创建关系
    new Vue({
        el:'#root',  // 通过css id选择器找到root, 值为css选择器。 el用于指定当前vue实例为哪个容器服务，通常为css选择器去定位。
        data :{
            name : '大力pig',
            age : '18'
        }
    })

</script>
</body>
</html>