初识Vue

我不是女神ヾ 2022-09-13 15:22 202阅读 0赞

上一节搭建了vue的简单项目的开发环境，这一节来说说Vue的基本使用

>   初识Vue：

1.  想让程序运行，必须要创建一个Vue实例，且传入配置对象（el）
2.  root容器（命名可以更改，class也行）中的代码符合html规范，只是混入了Vue语法
3.  root容器中的代码被称为【Vue模板】

> 1、创建容器

这是一个容器，通过id区分，里面的al和22分别是姓名和年龄数据，这样看来其实就这样就行了，但是如果数据发生了动态变化，那我们怎么做动态展示呢

<div id="root">
      <h1>hello,al</h1>
      <h1>我的年龄是,22</h1>
    </div>

> 2、创建Vue实例

通过 new Vue(\{\}) 来创建一个Vue实例，通过el将实例与容器绑定，绑定之后，vue会自动将容器中用到的数据从data中解析，因为可能存在多个数据，所有我们把data暂时写成一个json对象

> 3、容器中使用Vue实例中的数据

使用插值语法 \{ \{\}\}  ，在 \{ \{\}\}  中写入js 表达式

<div id="root">
      <h1>hello,{
       {name}}</h1>
      <h1>我的年龄是,{
       {age}}</h1>
    </div>
    
    <script>
      new Vue({
        el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
        // el: document.getElementById('#root'), // 也可以通过document点出来
        data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
          name: 'al',
          age: '22'
        }
      })
    </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5YWL55qE5Zu-5biD_size_19_color_FFFFFF_t_70_g_se_x_16][]

这样的话，在更改了data中的属性之后，容器内所有用到这个属性的地方都会同步更改，做到了数据与视图分离

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5YWL55qE5Zu-5biD_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/961040ccae4547ae90e37817d59abc5e.png