Vue学习笔记——基础知识

最新推荐文章于 2024-05-06 17:37:51 发布

lwq_qqq

最新推荐文章于 2024-05-06 17:37:51 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/m0_48180834/article/details/119825793

版权

本文是Vue.js的基础教程，涵盖了Vue的概述、安装方法、简单应用、生命周期以及模板语法，包括文本插值、v-bind、v-on、条件渲染、列表渲染和class与style的绑定。通过实例介绍Vue如何实现数据驱动和DOM操作的简化。

摘要由CSDN通过智能技术生成

一、Vue概述

Vue是一个MVVM视图层框架，只关注视图层，采用自底向上增量开发的设计，因此也是一套构建用户界面的渐进式框架。

首先了解以下原生js

原生js:国内的原生js一般指不用任何框架和库的js(例如：jQuery),保持了js特性的最基本的js

vue和原生js（这里主要指的是jQuery）的区别：

jQuery是DOM驱动框架，没有摆脱DOM操作，只是将原生js做了封装

Vue是数据驱动框架，实现0 DOM操作

这里举个比较形象的例子了解下原生js、jQuery、Vue的区别

打扫卫生环境下

原生js 类似于纯手工工作，用扫帚、簸箕

jQuery 类似于由手工转为吸尘器（还是自己动手）

Vue 类似于雇个保洁

二、Vue安装方法

1.直接<script>标签引入：官网上直接下载vue.js，用<script>标签引入

<script src="vue.js路径"></script>

2.CDN

在cdn加速服务器中获取vue的库直接进行导入即可，这种方式更加便捷，另外当项目部署到服务器以后直接从cdn上获取资源要比直接从我们的云服务器上获取资源的速度快很多。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

3.NPM方法

npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm

首先要查看npm的版本，这里的npm版本需大于3.0

查看版本（如果版本低于3.0，则执行下列语句，升级npm）

npm -v

升级 npm

cnpm install npm -g

安装vue

cnpm install vue

三、Vue的简单应用

用Vue函数创建一个Vue实例

var vm = new Vue({})

Vue构造器中有一个el参数，它是DOM元素中的id,指定模板，因此上面会有一个含有id属性的div元素，该元素为模板渲染

Vue构造器中定义数据对象：

data：定义属性

methods:定义函数，通过return来返回函数值

{{}}：用于输出对象属性或函数返回值

简单实例代码：

   <div id="app">
        <!-- 文本插值 -->
      {{msg}}//输出值为hello vue
      <button v-on:click="clickHandler">修改数据</button>
    </div>
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue'
        },
        methods: {
          clickHandler() {
            this.msg = '你好 vue'
          }
        }
      })
</script>

修改数据前

点击修改数据按钮后

四、Vue生命周期

Vue的生命周期可以概括为：vue实例创建—>虚拟dom产生—>数据绑定—>数据监听—>数据渲染—>数据销毁

其生命周期涉及到8个钩子方法：

Vue实例初始化阶段

beforeCreate()

在初始化的时候调用了beforeCreate,完成了vue实例的生命周期相关属性的初始化以及事件的初始化。这个时候还不能直接访问data中的属性及method中的方法。

created()

在初始化完毕以后，完成了vue的数据注入及数据监听操作，该构造的执行意味着vue实例创建完毕，可以进行数据的访问操作

挂载阶段

beforeMount()

在created之后，vue会判断实例中是否含有el属性，如果没有会调用vm.$mount(el) ,接着会判断是否含有template属性，如果有将其解析为一个render function ，如果没有将el指定的外部html进行解析。这里只是完成了模板的解析但是数据并没有绑定到模板中。

mounted()

创建vm.$el替换el，实际上这里完成的是数据绑定操作，在期间执行了render函数，将模板进行了解析，将数据进行了动态绑定。

更新阶段（该阶段的vue已经将页面显示了出来。随着用户的操作会引起数据改变进而导致页面刷新）

beforeUpdate

更新虚拟dom节点。

updated

完成了页面的重新渲染。

销毁阶段

beforeDestroy

销毁之前调用，此时还是可以访问vue实例的

destroyed

完成了监听器，子组件，事件监听等移除，销毁vue实例对象

初始化界面会触发初始化构建阶段、挂载阶段的钩子函数，当点击修改数据按钮后，该按钮绑定的msg属性值进行了修改，触发了更新阶段的钩子函数，当点击销毁按钮时，该按钮绑定的方法为销毁钩子函数，会执行该函数。

生命周期的实例核心代码（此处需要引入vue.js）：

<body>
  <div id="app">
    {{msg}}
    <button v-on:click="clickHandler">修改数据</button>
    <button @click="destoryHandler">销毁</button>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue'
      },
      methods: {
        clickHandler() {
          this.msg = '你好 vue'
        },
        destoryHandler() {
          this.$destroy();
        }
      },
      // 初始化构建阶段
      beforeCreate() {
        console.log('before create');
      },
      created() {
        console.log('created');
        setTimeout(() => {
          this.clickHandler()
        }, 3000)
      },
      // 挂载阶段
      beforeMount() {
        console.log('before mount');
      },
      mounted() {
        console.log('mounted');
      },
      // 更新阶段
      beforeUpdate() {
        console.log('before update');
      },
      updated() {
        console.log('updated');
      },
      // 销毁阶段
      beforeDestroy() {
        console.log('before destroy');
      },
      destroyed() {
        console.log('destroyed');
      }
    })
  </script>
</body>

五、Vue模板语法

1.文本插值

{{}} 用双大括号将data数据模型中的字段渲染到页面中

{{ msg + 'Nihao' }} 双大括号内部可以放js表达式，msg为data数据模型中的字段

    {{msg}}
<p>{{msg+'你好'}}</p>

      data: {
        msg: 'hello vue',
      }

2.常用指令

（1） v-bind:动态绑定元素上的属性

v-bind:title 简写=> :title="title"

<p v-bind:title="title">v-bind指令</p>

      data: {
        title: '我是P标签',
      },

动态绑定p元素上的title属性

（2）v-html:绑定html代码片段附文本编辑器

有格式的内容 => 相应html代码片段

<div class="content" v-html="content"> </div>

      data: {
        content: '<h3>我是3级标题</h3>'
      },

（3）v-on:（等价于@）动态绑定事件

v-on:click="clickHandler"可简写 => @click="clickHandler"

<input type="text" v-on:input="inputHandler">

      methods: {
        inputHandler(event) {
          console.log(event.target.value);
        }
      }

这个是给input输入框添加动态点击事件，触发inputHandler()方法会在控制台输出在输入框输入的值。

3.条件渲染

（1）v-if v-else一般搭配使用（v-if也可以单独使用）

当v-if的返回true时，有该属性的标签元素的内容会渲染到页面，反之，有v-else的指令的标签的内容会渲染到页面。

这块的思路就是：isLogin的初始值为false,所以先执行msg文本插值，{{welcome}}不会同时出现，接着执行，会出现登录按钮，点击它，会触发它绑定的点击事件，接着isLogin会变为true,{{welcome}}和退出按钮就会出现，可通过这样的思路进行切换。

点击后——>

（2）v-show 只是简单地切换元素的CSS property display。

<div v-show="isLogin">{{welcome}}</div>
<div v-show="true">{{msg}}</div>
<button v-if="isLogin" @click="isLogin = false">退出</button>
<button v-else @click="loginHandler">登录</button>

两者的区别：

v-if v-else 通过控制dom节点的渲染，整个dom元素添加或删除，实现显示与隐藏

v-show 通过控制dom节点css样式中display，dom元素还在来实现显示与隐藏

频繁的显示与隐藏某个组件时，用v-show较好，因为 v-if会频繁渲染dom数，占用资源，影响代码运行效率。

4.列表渲染

列表渲染使用的是v-for指令，该指令基于一个数组进行列表渲染，语法为（item in(/of) items）,其中items表示的是定义的数组，item表示的是被迭代的数组元素的别名，除了遍历item每项，也可以输出其对应的索引，其索引和item用括号括起来，用逗号隔开作为遍历项。

5.class绑定和style绑定

v-bind可以动态绑定元素上的属性，那么对于class列表和内联样式可用其进行处理，只需将字符串结果计算出就行，但这里考虑的是拼接字符串容易出错，因此在使用vue.js时，表达式的结果除了以前的字符串类型外还有对象和数组类型。

v-bind:class 一个对象，以动态地切换 class：

内联样式（style）的绑定：
（1）对象语法：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

或者直接绑定一个对象：

<div v-bind:style="styleObject"></div>

data: {

  styleObject: {

    color: 'red',

    fontSize: '13px'

  }

}

（2）数组语法：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

若数组的项多余一项，并且都有样式填充的话，对于相同类型的属性，后者的属性会覆盖前者，后者没有的属性前者有，那么也是会显示该属性的值。