Vue知识点整理（一）- Vue核心（1）- Vue安装、模板语法、数据绑定

JHY97

已于 2022-04-18 14:26:10 修改

阅读量802

点赞数

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

于 2022-04-08 16:33:54 首次发布

本文链接：https://blog.csdn.net/JHY97/article/details/123171386

版权

Vue笔记专栏收录该内容

34 篇文章 7 订阅

订阅专栏

1.3.3 浏览器安装Vue Devtools

1.3.4 关闭 productionTip（可选）

一、Vue简介

1.1 Vue是什么？

一套用于构建用户界面的渐进式JavaScript框架

构建用户界面：将用户数据变为用户可以看见的界面
渐进式：Vue可以自底向上逐层的应用

1.2 Vue的特点

采用组件化模式，提高代码复用率、且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

1.3 搭建Vue开发环境

1.3.1 下载Vue.js

安装 — Vue.js (vuejs.org)https://cn.vuejs.org/v2/guide/installation.html学习和开发过程中一般选择开发版本，生成版本即项目上线时使用

1.3.2 页面中引入Vue.js

方法一：引入本地已经下载完成的Vue.js

    <script type="text/javascript" src="../js/vue.js"></script>

方法二：对于制作原型或学习，引入Vue明确的版本号

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

方法三：对于生产环境，链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

Vue不同的版本号的浏览

vue CDN by jsDelivr - A free, fast, and reliable Open Source CDNhttps://cdn.jsdelivr.net/npm/vue/

1.3.3 浏览器安装Vue Devtools

Installation | Vue Devtools (vuejs.org)https://devtools.vuejs.org/guide/installation.html依据浏览器选择 Vue Devtools 插件的安装

注意：如果页面中插件没有生效，需在管理插件页面中，勾选插件允许访问文件网址

1.3.4 关闭 productionTip（可选）

如果引入的是开发版本的 Vue.js，在浏览器页面的控制台上会出现相关提示，可以选择关闭该提示

    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>

二、初识Vue

2.1 Hello小案例

    <div id="root">
      <h1>Hello, {{name}}</h1>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      // 创建Vue实例
      const x = new Vue({
        el: "#root", // el用于指定当前Vue实例为哪个容器服务
        data: {
          // data中用于存储数据，数据供el所指定的容器去使用
          name: "world",
        },
      });
    </script>

总结：

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

三、模板语法

3.1 模板理解

html页面中包含了一些js语法代码，语法分为两种，分别为：

插值语法（双大括号表达式）
指令语法（以v-开头）

3.2 插值语法

功能：用于解析标签体内容

写法：{{xxx}}，其中 xxx 是 js表达式，且可以直接读取到data中的所有属性

3.3 指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）

举例：v-bind:href="xxx" 或者 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性

注意：Vue中有很多指令，且形式都是以：v-开头

3.4 案例练习

  <body>
    <div class="root">
      <h1>插值语法</h1>
      <h3>Hello, {{name}}</h3>
      <hr />
      <h1>指令语法</h1>
      <a v-bind:href="test.url">点击前往{{test.name}}页面1</a>
      <a :href="test.url">点击前往{{test.name}}页面2</a>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
      el: ".root",
      data: {
        name: "tom",
        test: {
          name: "百度",
          url: "http://www.baidu.com",
        },
      },
    });
  </script>

四、数据绑定

4.1 单向数据绑定

v-bind

4.1.1 语法

v-bind:自定义命名 = '传输数据' 或者 可以采用简写的方式 :自定义命名= '传输数据'

4.1.2 特点

数据只能从data流向页面

4.2 双向数据绑定

4.2.1 语法

v-model:value = 'xxx' 或者可以采用简写的方式 v-model = 'xxx'

4.2.2 特点

数据不仅能从data流向页面，还可以从页面流向data
双向绑定一般都应用在表单元素上（如：input、select等）
v-model:value 可以简写为 v-model: ，因为v-model默认搜集的值就是value值

4.3 案例练习

单向绑定和双向绑定简单案例

  <body>
    <div id="root">
      单项数据绑定: <input type="text" :value="name" /><br />
      双向数据绑定： <input type="text" v-model="name" /><br />
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    new Vue({
      el: "#root",
      data: {
        name: "Test",
      },
    });
  </script>

单项绑定效果展示

双向绑定效果展示

五、el 与 data 的两种写法

5.1 el 第一种写法

new Vue的时候配置el属性

    new Vue({
      // el第一种写法
      el: "#root",
      data: {
        name: "world",
      },
    });

5.2 el 第二种写法

先创建Vue实例，随后通过vm.$mount('xxx')指定el属性

$mount 为挂载意思，第二种方式更加灵活，可以先写完Vue实例，再指定该实例对象为那个容器服务

    const v = new Vue({
      data: {
        name: "world",
      },
    });
    // el第二种写法
    v.$mount("#root");

5.3 data 对象式写法

    new Vue({
      el: "#root",
      //   data的第一种写法：对象式
      data: {
        name: "world",
      },
    });

5.4 data 函数式写法

在组件复用的时候，data必须使用函数式写法

    new Vue({
      el: "#root",
      //   data的第一种写法：对象式
      data: function () { // 可简写为data(){}
        return {
          name: "world",
        };
      },
    });

注意：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了