02-初识Vue

最新推荐文章于 2025-08-05 22:11:48 发布

搞钱自律

最新推荐文章于 2025-08-05 22:11:48 发布

阅读量207

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_43472934/article/details/129539051

vue 专栏收录该内容

12 篇文章

订阅专栏

文章介绍了Vue框架中Vue实例的创建和使用，强调每个实例与HTML容器的一一对应关系。在正常情况下，一个Vue实例对应一个容器，数据通过data属性进行绑定，并能在页面上实时更新。当使用类选择器或重复指定同一容器时，会导致预期外的结果，例如数据无法正确绑定。解决方法是为每个容器创建独立的Vue实例，或者在单个实例中包含所有相关数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初识Vue:
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
3.root容器里的代码被称为【Vue模板bili】
4.Vue实例和容器时一一对应的
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用
6.{{xxx}}中的xxx要写js表达式，并且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

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">
  <title>Document</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

  <!-- 
    初识Vue:
    1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
    2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
    3.root容器里的代码被称为【Vue模板bili】
   -->

  <!-- 准备一个容器 -->
  <div id="root">
    <h1>hello {{name}}</h1>
  </div>

  <!-- 
    引入Vue之后能怎么糟？当年引入jQuery，全局多了两个人，一个是$，一个是jQuery关键词
    那引入了Vue就多了一个人， Vue内置对象，也可以叫函数，因为函数本身就两个身份，一个是当作函数，一个当作对象
    如果你引用了Vue，全局就多了一个Vue构造函数
   -->
  <script type="text/javascript">
    Vue.config.productionTip=false;

    // 创建Vue实例
      new Vue({
      el:'#root', //el用于指定当前Vue实例为哪个容器，值通常为css选择器字符串
      data:{ //data中用于存储数据，数据供el所指定的容器去使用
        name:'嘻嘻'
      }
    });
  </script>
</body>
</html>

在这里插入图片描述

2.异常情况（两个容器对应一个Vue实例）

这里会存在一个问题，如果有两个div，使用类选择器来标识

<!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>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

  <!-- 
    初识Vue:
    1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
    2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
    3.root容器里的代码被称为【Vue模板bili】
   -->

  <!-- 准备一个容器 -->
  <div class="root">
    <h1>hello {{name}} 1</h1>
  </div>

  <div class="root">
    <h1>hello {{name}} 2</h1>
  </div>

  <!-- 
    引入Vue之后能怎么糟？当年引入jQuery，全局多了两个人，一个是$，一个是jQuery关键词
    那引入了Vue就多了一个人， Vue内置对象，也可以叫函数，因为函数本身就两个身份，一个是当作函数，一个当作对象
    如果你引用了Vue，全局就多了一个Vue构造函数
   -->
  <script type="text/javascript">
    Vue.config.productionTip=false;

    // 创建Vue实例
    new Vue({
    el:'.root', //el用于指定当前Vue实例为哪个容器，值通常为css选择器字符串
    data:{ //data中用于存储数据，数据供el所指定的容器去使用
      name:'嘻嘻'
      }
    });

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

在这里插入图片描述

上面是多个容器对应一个Vue实例，结果就是下方那个容器是无法解析到

3.异常情况（一个容器对应多个容器）

<!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>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

  <!-- 
    初识Vue:
    1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
    2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
    3.root容器里的代码被称为【Vue模板bili】
   -->

  <!-- 准备一个容器 -->
  <div id="root">
    <h1>hello {{name}} {{address}}</h1>
  </div>

  <!-- 
    引入Vue之后能怎么糟？当年引入jQuery，全局多了两个人，一个是$，一个是jQuery关键词
    那引入了Vue就多了一个人， Vue内置对象，也可以叫函数，因为函数本身就两个身份，一个是当作函数，一个当作对象
    如果你引用了Vue，全局就多了一个Vue构造函数
   -->
  <script type="text/javascript">
    Vue.config.productionTip=false;

    // 创建Vue实例
    new Vue({
    el:'#root', //el用于指定当前Vue实例为哪个容器，值通常为css选择器字符串
    data:{ //data中用于存储数据，数据供el所指定的容器去使用
      name:'嘻嘻'
      }
    });

    // 创建Vue实例
    new Vue({
    el:'#root', //el用于指定当前Vue实例为哪个容器，值通常为css选择器字符串
    data:{ //data中用于存储数据，数据供el所指定的容器去使用
      address:'北京昌平'
      }
    });

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

在这里插入图片描述

4.正常情况（一对一，多个容器的使用方式）

<!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>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

  <!-- 
    初识Vue:
    1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
    2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
    3.root容器里的代码被称为【Vue模板bili】
   -->

  <!-- 准备一个容器 -->
  <div id="root">
    <h1>hello {{name}} {{address}}</h1>
  </div>

  <div id="root2">
    <h1>hello {{name}} {{address}}</h1>
  </div>

  <!-- 
    引入Vue之后能怎么糟？当年引入jQuery，全局多了两个人，一个是$，一个是jQuery关键词
    那引入了Vue就多了一个人， Vue内置对象，也可以叫函数，因为函数本身就两个身份，一个是当作函数，一个当作对象
    如果你引用了Vue，全局就多了一个Vue构造函数
   -->
  <script type="text/javascript">
    Vue.config.productionTip=false;

    // 创建Vue实例
    new Vue({
    el:'#root', //el用于指定当前Vue实例为哪个容器，值通常为css选择器字符串
    data:{ //data中用于存储数据，数据供el所指定的容器去使用
      name:'嘻嘻',
      address:'上海'
      }
    });

    // 创建Vue实例
    new Vue({
    el:'#root2', //el用于指定当前Vue实例为哪个容器，值通常为css选择器字符串
    data:{ //data中用于存储数据，数据供el所指定的容器去使用
      name:'哈哈',
      address:'北京昌平'
      }
    });

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

在这里插入图片描述

{{}}用法

可以获取data里的数据
可以使用js表达式，如{{Data.now()}}，{{1+1}}，{{name.toUpperCase()}}
注意区分：js表达式和js代码（语句）
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
(1).a
(2). a+b
(3). demo(1)
(4). x === y ? ‘a’ : ‘b’
2.js代码（语句）
(1). if(){}
(2). for(){}