一、引入`Vue`

<head>
  <title>初识Vue</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

二、准备好一个容器

2.1 为什么需要准备好一个容器

(1)之所以使用Vue，是需要Vue帮助我们构建用户界面。

(2)有一天，Vue构建出来界面了，但是界面摆放在什么位置呢？我们需要告诉Vue,界面摆放在这里，准备好一个容器，承接Vue的工作成果。

(3)认识其他框架，其实<div id="root"></div>很熟悉

2.2 编写代码在死容器里面

  <div id="root">
    <h1>按照常理分析，里面不应该写东西，准备好一个容器就行。</h1>
    <h1>全是写死的，死数据</h1>
    <h1>至于里面有什么内容，看Vue怎么工作的。</h1>
    <h1>如果这样写，Vue其实并没有工作。</h1>
    <h1>浏览器中开发者工具灯不会亮，Vue不承认在该页面中使用到了Vue。</h1>
    <h1>没有写出能够让Vue工作的代码</h1>
  </div>

2.3 控制台报错

【零基础入门Vue0006】_Hello小案例

HTTP的状态码是404

favicon.ico``网站的页签图标、网站的偏爱图标资源找不到。

浏览器打开任何一个网站时，都会默认请求页签图标，这里没有，就报404错误。

问题：浏览器找哪里要的页签图标？

（1）点击Network

（2）强制刷新：Shift+点击左上角刷新按钮。正常刷新会怎么样？正常刷新Network里面的数据都没有了，请求一次发现没有，就不再请求了。

（3）只有强制刷新才会出现favicon.icon

【零基础入门Vue0006】_Hello小案例

5500服务器哪里来的？

（1）没有写过代码开这台服务器

（2）VS Code中插件Live Server，鼠标在VS Code编辑器中右键选择Open with Live Server，会在本机5500端口号上开一台内置的小服务器，把整个工程里面所有的文件和文件夹都作为这台服务器的根资源去使用。

【零基础入门Vue0006】_Hello小案例

直接找5500服务器要东西，你看他给你的是什么？

【零基础入门Vue0006】_Hello小案例

三、创建`Vue实例`

3.1 构造函数解析

引入vue.js文件后，全局多了一个构造函数。

    // 调整整体的Vue的配置
    Vue.config.productionTip = false;//阻止Vue在启动时生成的生产提示
    // 先调整Vue，后使用Vue
    // 按照习惯，总喜欢在一个实例对象出现时，拿一个变量去接
    // const x = new Vue()  x是MVVM中的VM
    // 构造函数中只传一个参数，参数的类型是对象，该对象叫做配置对象
    const x = new Vue({})

一说配置对象，马上就得反应出来下列东西：

    // 想要使用axios发请求，也要发送配置对象
    axios({
      // 配置对象中第一组配置
      url:'http://具体给哪里发请求',
      ura:'http://ura人家不认识，key是不能随便改的',
      url:'http://值可以换地址',
      url:999,//配置对象的value值，数据类型是不能随便更改的，得用人家指定的那几种
    })

3.2 `el`配置项

【零基础入门Vue0006】_Hello小案例

el是element元素的简称。
el:'#root'中#root是容器中的CSS的ID选择器，通过这个选择器，找到了这个容器。el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串，可以是id选择器，也可以是class选择器。

还可以像下面这种写法，

      el:'#root',//给一个选择器自己找去。精简推荐。
      el:'.root',//使用类选择器也是可以的。
      el: document.getElementById('root'),//亲自找到这个元素配置到el中。复杂不推荐。

3.3 `data`配置项

把容器里面变化的数据交给Vue实例保管。

在Vue实例中通过data配置项，把变化的数据保存在data配置项中，然后通过插值表达式等办法，从data配置项中把变化的数据拿出来，放到模板中进行渲染。

表面上比较麻烦，但是当数据变化时，就会很简单了。以后需要修改这个数据，直接修改data配置项中的数据，页面中使用到这个数据的地方，自动就发生变化了。

只需要把数据维护好，用到数据的地方自然而然就发生变化了，省去了自己操作DOM。

data本质上就有“数据”的意思。存储的数据类型是什么呢？如果和el一样，存储字符串类型会怎么样呢？

<body>
  <div id="root">
    <h1>Hello,{{msg}}</h1>
    <!-- 换了数据就比较麻烦 -->
    <h1>Hello,中国</h1>
  </div>


  <script>
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: '#root',
      data: 'World'
    })
  </script>
</body>

写成一个对象：

data中用于存储数据，数据供el所指定的容器去使用。

<body>
  <div id="root">
    <!-- 插值语法：插入一个值，插值表达式 -->
    <h1>Hello,{{school}}</h1>
    <!-- 当年设计出来就是{{}} -->
    <!-- <h1>Hello,**msg**</h1> -->
  </div>

  <!-- 写到这里是看不到的。容器之外的东西Vue实例是管不了的。 -->
  <h2>{{schoolNum}}</h2>

  <script>
    Vue.config.productionTip = false;
    new Vue({
      el: '#root',
      // data值暂时先写成一个对象，以后写成对象，可能就玩不下去了。
      // 讲到组件时，data应该写为一个函数。
      data: {
        school: '世界',
        schoolNum: 3000
      }
    })
  </script>
</body>

展示效果：

【零基础入门Vue0006】_Hello小案例

3.4 总结

（1）想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。现在只有el配置项和data配置项。

（2）root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。例如：<pre>Hello,{{school}}</pre>

（3）root容器里的代码被称为Vue模板。解析流程如下：

先有容器，然后有Vue实例，当Vue实例开始工作时，发现写了el:'#root'配置，Vue实例知道了，然后把整个容器都拿过来放到Vue实例中，进行解析，进行扫描，有没有自己设计的特殊语法，如果扫描到了，就把data配置项中的value值，把root容器中有的Vue语法，全部替换掉了，然后生成一个全新的root容器，最后再把解析完的root容器，重新放到页面上，替换掉刚才的整个容器。一旦把动态的数据交给Vue实例，以后把动态数据更改了内容，在页面中，只要使用到动态数据的地方，就会自动更新，不用自己去操作DOM了。

模板经过解析，就变成一个正常的html片段。

（4）容器两个作用

作用1：为Vue提供模板

作用2：把Vue的工作成果知道往哪里放

3.5 如果页面上有两个容器

（1）一个Vue实例不能同时接管两个容器

<body>
  <!-- 第一个容器：DOM结构在前，有人解析 -->
  <div class="app">
    <h1>Hello,{{name}}!</h1>
  </div>

  <!-- 第二个容器：DOM结构在后 -->
  <div class="app">
    <!-- 没有解析，控制台不会报错，无人解析 -->
    <h1>Hello,{{name}}!</h1>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const root = new Vue({
      el: '.app',
      data: {
        name: '邓为'
      }
    })
  </script>
</body>

效果展示：

【零基础入门Vue0006】_Hello小案例

（2）多个Vue实例不能同时接管一个容器

<body>
  <div class="app">
    <h1>Hello,{{name}}，{{sex}}</h1>
  </div>

  <script src="./js/vue.js"></script>
  <script>
    // 第一个Vue实例：负责第一个容器
    const root = new Vue({
      el: '.app',
      data: {
        name: '邓为'
      }
    })
    // 第二个Vue实例：已经有上面的Vue实例接管了，这里的代码依旧执行，但是没有任何意义。
    new Vue({
      el: '.app',
      data: {
        sex: '男'
      }
    })
  </script>
</body>

效果展示：

【零基础入门Vue0006】_Hello小案例

（3）一个容器只能被一个Vue实例接管，容器和Vue实例之间的关系是一一对应的关系。

<body>
  <div class="app1">
    <h1>Hello,{{name}},{{sex}}</h1>
  </div>
  <div class="app2">
    <h1>Hello,{{name}},{{sex}}</h1>
    <!-- 获取当前时间的时间戳格式 -->
    <h1>{{Date.now()}}</h1>
  </div>

  <script src="./js/vue.js"></script>
  <script>
    const root = new Vue({
      el: '.app1',
      data: {
        name: '邓为'
      }
    })
    new Vue({
      el: '.app2',
      data: {
        sex: '男'
      }
    })
  </script>
</body>

效果展示：

【零基础入门Vue0006】_Hello小案例

3.6 插值表达式的规范

插值表达式里面的内容必须写成JS表达式。

JS表达式就是一种JS语句，JS语句也称为JS代码。

注意区分：JS表达式和JS代码（语句）

JS表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。例如:

(1) 变量a——>把a写到任何一个地方，就会读取a这个变量，拿到a这个变量所存储的值使用。

(2) a + b——>加法运算表达式

(3)demo(1)——>函数调用表达式。函数调用了一定会有返回值的。程序员如果不写return，返回值为undefined，undefined也是基本类型之一。

(4)x === y ? 'a' : 'b'———->三元(目)表达式

总结：使用一个变量在左侧接收，const x = 可以接到一个值。

JS代码【语句】

(1)if(){}———判断语句。控制走不走。

(2)for(){}———循环语句。控制走几次。

总结：这些东西不生成值，只是控制代码的走向。

3.7 使用`Vue开发者工具`

【零基础入门Vue0006】_Hello小案例

<body>
  <div id="root">
    <pre>小写表示：{{school}}</pre>
    <!-- 函数调用表达式 -->
    <pre>大写表示：{{school.toUpperCase()}}</pre>
  </div>

  <script>
    Vue.config.productionTip = false;
    new Vue({
      el: '#root',
      data: {
        school: 'world'
      }
    })
  </script>
</body>

3.8 总结

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

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

3、root容器里的代码被称为Vue模板

4、Vue实例和容器是一一对应的关系

5、真实开发中只有一个Vue实例，并且会配合着组件一起使用

6、{{xxx}}中的xxx要写js表达式,不能写成判断或循环，且xxx可以自动读取到data中所有属性，是Vue源码的底层已经做好的了，所以data中定义动态数据，就可以在Vue模板中使用动态数据。

7、一旦data中的数据发生改变，那么模板【页面】中用到该数据的地方也会自动更新。模板改变了，就会重新解析，解析完成后，重新放到页面上，页面就会发生改变，最终影响的是页面。

3.9 如果引用生产版本的Vue

(1)假设没有使用new关键字，去调用Vue({}),如果引用开发版本的Vue，控制台会报错：

【零基础入门Vue0006】_Hello小案例

(2)如果引用的是生产版本的Vue，就会导致刚才程序员看到的良好的提示信息没有了，直接报底层错误，很不友好。所以，开发的时候，一定要引入开发版本的Vue。

【零基础入门Vue0006】_Hello小案例

(3)为什么一定要使用new关键字，才能写该构造函数呢？

这是Vue的规矩，不用不行，Vue底层写了一个校验，校验Vue里面的this是不是实例对象。

可以查看vue.js的源码：

//定义了一个vue的构造函数
function Vue(options) {
    //如果这个function里面的this不是Vue实例里面的实例对象，就报如下错误
    //如果不使用new关键字调用vue,那么这个Vue里面的this就不可能是实例对象
    if (!(this instanceof Vue)) {
        //刚才看到的提示信息：Vue是一个构造寒素，应该使用new关键字去调用，我们可以进行更改
        warn$2('Vue is a constructor and should be called with the `new` keyword');
        warn$2('你干什么呢？怎么没有使用new关键字呢？');
    }
    this._init(options);
}

【零基础入门Vue0006】_Hello小案例

原文链接：https://juejin.cn/post/7262287627026350137 作者：小李在进步

【零基础入门Vue0006】_Hello小案例

一、引入Vue

二、准备好一个容器

2.1 为什么需要准备好一个容器

2.2 编写代码在死容器里面

2.3 控制台报错

三、创建Vue实例

3.1 构造函数解析

3.2 el配置项

3.3 data配置项

3.4 总结

3.5 如果页面上有两个容器

3.6 插值表达式的规范

3.7 使用Vue开发者工具

3.8 总结

3.9 如果引用生产版本的Vue

相关推荐

发表回复

一、引入`Vue`

三、创建`Vue实例`

3.2 `el`配置项

3.3 `data`配置项

3.7 使用`Vue开发者工具`