02-Vue核心-初识Vue

前置工作

1) 在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools，它允许你在一个更友好的界面中审查和调试 Vue 应用。

2) 直接下载开发版本的vue.js，并用 <script> 标签引入，Vue 会被注册为一个全局变量

3) 阻止 vue 在启动时生成生产提示

Vue.config.productionTip = false;

初始Vue：

1) 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

2) root容器里的代码，依然符合html规范，只不过混入了一些特殊的Vue语法

3) root容器里的代码，被称为【Vue模板】

4) Vue实例与容器是一一对应的关系，不能多个容器对应一个实例，也不能多个实例对应一个容器

5) {{xxxx}}中的 xxxx 要写成 js表达式，并且 xxxx 可以自动读取到 data 中的所有属性。

6) 当data中的数据发生变化，那么模板中用到该数据的地方也会自动更新。

 

一定要区分 js表达式 和 js代码（语句）

js表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

(1). a
(2). a+b
(3). demo(1)
(4). x == y ? 'a' : 'b'

js代码（语句）

(1). if(){}
(2). for(){}

 

注意：这里使用的是IDEA开发工具，通过浏览器打开页面

自定义创建的VUE script代码要写在body里面，写在head里面不生效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>马铃薯的Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!--
        初始Vue：
        1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
        2.root容器里的代码，依然符合html规范，只不过混入了一些特殊的Vue语法
        3.root容器里的代码，被称为【Vue模板】
    -->

    <!-- 准备好一个容器 -->
    <div id="root">
      <!--<h1>Hello,马铃薯</h1>-->
      <h1>Hello World, {{name}} {{address}}</h1>
    </div>

    <script type="text/javascript">
      // 阻止 vue 在启动时生成生产提示
      Vue.config.productionTip = false;

      //创建Vue实例
      new Vue({
        //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        // el:"#root"
        el:document.getElementById("root"),
        //data中用于存储数据，数据供el所指定的容器去使用
        data:{
          name:"马铃薯",
          address:"河北邯郸"
        }
      })
    </script>
  </body>
</html>

 

posted @ 2023-09-08 17:59  马铃薯1  阅读(4)  评论(0)  编辑  收藏  举报