带你学习Vue-总结篇

举报
zekelove 发表于 2021/08/26 14:05:29 2021/08/26
【摘要】 目前前端流行的三大框架React,Angular,Vue,那我们应该学习哪一个呢。通过对三个框架的了解,Vue相对来说入门比较简单,容易学习,但是要想达到精通还是需要一定时间和精力去学习和探索,还要通过实战项目不断积累开发经验。

目前前端流行的三大框架React,Angular,Vue,那我们应该学习哪一个呢。通过对三个框架的了解,Vue相对来说入门比较简单,容易学习,但是要想达到精通还是需要一定时间和精力去学习和探索,还要通过实战项目不断积累开发经验。

首先我们要了解Vue,这个框架能做什么,能为我们开发提供哪些便利,开发的环境需要哪些等等?

Vue官网:https://cn.vuejs.org/v2/guide/

Vue开发的两种模式

1.直接<script>引入

通过在页面引入CDN vue.js,也可以下载文件 vue.js

2.命令行工具(CLI)

通过安装 vue-cli,使用模板创建项目开发,参考 Vue-cli 文档指南

vue init webpack my-demo

注:使用vue-cli环境构建开发,需要 node 的构建环境,比较复杂。建议新手学习直接通过页面引入方式学习。

Vue实例

创建 vue 实例,传入选项对象(data:数据对象,methods:方法,computed:计算属性,mounted:生命周期钩子,watch:监视器等)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">{{message}}</div>
</body>
</html>
<script>
    // 创建 vue 实例
    var vm = new Vue({
      el: '#app',
      data: {
        showMsg: false,
        message: 'Hello Vue!',
        title: 'demo',
        rawHtml: "<a href='https://cn.vuejs.org/v2/guide'>超链接</a>"
      }
    })
</script>

模板语法

使用双大括号({{ xxx }})对文本内容进行数据绑定。

<h1>{{message}}</h1>

指令

v-bind:用于HTML标签的属性上面,也可以使用表达式。

<div v-bind:title="title">demo</div>
<div v-bind:title="title + '_test'">demo_test</div>

v-html:用于插入原始的 html。

<div><span v-html="rawHtml"></span></div>

v-on:用于监听DOM事件。

<input type="button" v-on:click="fun();" value="提交">

v-if,v-else,v-else-if:用于根据条件值渲染一块内容。

<h1 v-if="showMsg">{{message}}</h1>
<h3 v-else>{{message}} demo</h3>

v-show:用于根据条件显示或隐藏元素,元素始终保留在DOM中,是通过css属性 display 实现。

<h6 v-show="showMsg">{{message}} hidden</h6>

v-for:通过一个数组来渲染一个列表。

// html 数据绑定
<div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
</div>
// vue 实例 data 定义
data: {
    list: [
      { id: 1, name: 'name 1' },
      { id: 2, name: 'name 2' }
    ]
}

v-model:在表单元素input,textarea,select元素上实现双向数据绑定。

<input v-model="message" placeholder="please input text">

计算属性

计算属性是用于简单计算的,减少模板中的逻辑,是基于响应式依赖进行缓存,相关响应式依赖发生改变就会重新计算。

// html 绑定
<span> {{ count }}</span>
// vue 实例
var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        title: 'demo',
        rawHtml: "<a href='https://cn.vuejs.org/v2/guide'>超链接</a>",
        num: 0
      },
      // 计算属性
      computed: {
        count() {
            return this.num + 1;
        }
      },
      // 方法
      methods: {
        fun() {
            this.num++;
        }
      }
    })

监听器

当数据变化时执行异步或者开销较大,使用 watch 监听属性来响应数据变化。如果监听对象内部数据变化,需添加属性 deep: true 。

// html 数据绑定
<div>
    <input v-model="lastName" placeholder="please input lastName">
    <p>{{fullName}}</p>
</div>
// vue 实例
var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        fullName: "",
        lastName: ""
      },
      watch: {
        lastName: function(newVal, oldVal) {
            this.fullName = "Li " + newVal;
        }
      }
    })

样式绑定

操作元素的 class 和内联样式使用 v-bind 处理,通过表达式计算出字符串结果就可以实现绑定。

使用:v-bind:class,v-bind:style

// 使用对象赋值 v-bind:class
<div v-bind:class="{ active: isActive }"></div>
// 使用数组
<div v-bind:class="[activeCls, errorCls]"></div>
// 使用对象赋值 v-bind:style
<div v-bind:style="{ color: activeColor}"></div>
// 使用数组
<div v-bind:style="[styles]"></div>
// vue 实例的数据对象
data: {
  isActive: true,
  activeCls: 'active',
  errorCls: 'error',
  activeColor: 'red',
  styles: {color: 'red'}
}

生命周期

在创建Vue 实例时都要经过一系列的初始化过程,例如:需要编译模板、设置数据监听、将实例挂载到 DOM 并在数据变化时更新 DOM 等。在这个过程会执行一些生命周期钩子的函数。

beforeCreate:实例初始化之后,在数据和事件配置之前调用。

created:实例创建完成之后被调用,数据,方法,属性和事件已配置完成。

beforeMount:在挂载开始之前被调用,还未生成HTML到页面中。

mounted:挂载完成之后调用,模板中的html渲染到了HTML页面中。

beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。

updated:数据更改导致的虚拟 DOM 重新渲染和打补丁。

beforeDestroy:实例销毁之前调用,此时实例还可以使用。

destroyed:实例销毁后调用。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。