VUE学习一:初识VUE、指令、动态绑定、计算属性

简介: 这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。

导言

一、01-初体验

1. ch01_helloworld.html

vue 的第一个hello world。

  • 元素 js 的做法(编程范式:命令式编程
    1. 创建div元素,设置 id 属性
    2. 定义一个变量叫 message
    3. 将message变量(通过插值表达式)放在前面的div元素中显示
    4. 修改message的数据:今天天气不错
    5. 将修改后的数据再次替换到div元素
  • 知识点:
    1. let(变量) const(常量)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
    <script src="../../lib/vue.js"></script>
</head>
<body>
<div id="app">{
  { message }}</div>
</body>
<script>
    // let(变量) const(常量)
    // 编程范式:声明式编程
    const app = new Vue({
        el: '#app', // 用于挂载要管理的元素
        data: {     // 定义数据
            message: 'Hello Vue!'
        }
    })
</script>
</html>

2. v-for指令:ch02_vue列表展示_v-for.html

v-for指令:循环遍历。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue列表展示</title>
    <script src="../../lib/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li>{
  {movies[0]}}</li>
        <li>{
  {movies[1]}}</li>
        <li>{
  {movies[2]}}</li>
        <li>{
  {movies[3]}}</li>
    </ul>
    <br>
    <ul>
        <li v-for="item in movies" >{
  {item}}</li>
    </ul>
</div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
        }
    })
</script>
</html>

3. v-on指令:ch03.1_vue案例_计数器_v-on.html

  1. v-on指令:点击指令,等价于 @
  2. 可以直接写函数内容,也可以直接写函数名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue案列-计数器</title>
    <script src="../../lib/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>当前技术: {
  {counter}}</h2>
    <!-- v-on指令 等价于 @-->
   <button v-on:click="counter++">+</button>
   <button @click="counter--">-</button>

   <button v-on:click="counter++">+</button>
   <button @click="counter--">-</button>

    <button v-on:click="add">+</button>
    <button v-on:click="subtract">-</button>
</div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                this.counter++;
                console.log('add 被执行')

            },
            subtract: function () {
                this.counter--;
                console.log('subtract 被执行')
            }
        }
    })
</script>
</html>

4. 介绍MVVM、方法 和 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
MVVM: vue就是一个MVVM框架, M:model 就是 data里的数据,v: view 就是 HTML代码, VM :就是vue实例

开发中什么时候称之为方法,什么时候称之为函数呢?
方法:method
函数:function

js 中 定义 function abs(){} 为 函数
js 在 在定义类中 function Person{} 中定义的为 方法
一般  方法 是和某个实例对象挂钩的。

有时候 方法和函数也是等价的。

所以:
methods 中定义的 是方法

-->
</body>
</html>

5. ch04_template.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>template</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="../../lib/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        }
    })
</script>"
</html>

二、02-插值表达式、指令

1. { {}}:01-Mustache语法-插值表达式.html

mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mustache 插值表达式</title>
</head>
<body>
<div id="app">
  <h2>{
  {message}}</h2>
  <h2>{
  {message}}, 李银河!</h2>

  <!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
  <h2>{
  {firstName + lastName}}</h2>
  <h2>{
  {firstName + ' ' + lastName}}</h2>
  <h2>{
  {firstName}} {
  {lastName}}</h2>
  <h2>{
  {counter * 2}}</h2>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      firstName: 'kobe',
      lastName: 'bryant',
      counter: 100
    },
    methods: {

    }
  })
</script>
</html>

2. v-html指令:02-v-once指令.html

当在浏览器开发者工具的 console 控制台,输入 app.message='哈哈哈', 上面改变,下面不改变

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on</title>
</head>
<body>
<div id="app">
  <h2>{
  {message}}</h2>
  <!--当在浏览器开发者工具的 console 控制台,输入 app.message='哈哈哈', 上面改变,下面不改变-->
  <h2 v-once>{
  {message}}</h2>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {

    }
  })
</script>
</html>

3. v-html指令:03-v-html指令.html

插入 html 片段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-html</title>
</head>
<body>

<div id="app">
  <h2>{
  {url}}</h2>
  <h2 v-html="url"></h2>
</div>

<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

</body>
</html>

4. v-text指令:04-v-text指令.html

输出文本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-text</title>
</head>
<body>

<div id="app">
  <h2>{
  {message}}, 李银河!</h2>
  <h2 v-text="message">, 李银河!</h2>
</div>

<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>
</html>

5. v-pre指令:05-v-pre指令.html

展示死数据,是啥就显示啥

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-pre</title>
</head>
<body>

<div id="app">
  <h2>{
  {message}}</h2>
  <!--直接显示 内容,不取model 里面的数据:{
  {message}}-->
  <h2 v-pre>{
  {message}}</h2>
</div>

<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>
</html>

6. v-cloak指令:06-v-cloak指令.html

v-cloak作用:

  • 如果不加的话,如js中延迟一秒(模拟网络延迟),则会先显示 { {message}} 一秒钟,然后显示:你好啊,
  • 如果加了 v-cloak,并加上上面的 样式,则一秒内什么都不显示,一秒后显示:你好啊
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-cloak</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
<!--v-cloak作用:
    如果不加的话,如js中延迟一秒(模拟网络延迟),则会先显示 {
  {message}} 一秒钟,然后显示:你好啊,
    如果加了 v-cloak,并加上上面的 样式,则一秒内什么都不显示,一秒后显示:你好啊-->
<div id="app" v-cloak>
  <h2>{
  {message}}</h2>
</div>

<script src="../../lib/vue.js"></script>
<script>
  // 在vue解析之前, div中有一个属性v-cloak
  // 在vue解析之后, div中没有一个属性v-cloak
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  }, 1000)
</script>

</body>
</html>

三、v-bind指令:03-动态绑定属性

1. 01-v-bind的基本使用.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind 和 冒号</title>
</head>
<body>

<div id="app">
  <!-- 错误的做法: 这里不可以使用mustache语法-->
  <!--<image src="{
  {imgURL}}" alt="">-->

  <!-- 正确的做法: 使用v-bind指令 -->
  <img v-bind:src="imgURL" alt="" ></img>
  <a v-bind:href="aHref">百度一下</a>

  <br>

  <!--语法糖的写法-->
  <img :src="imgURL" alt="" ></img>
  <a :href="aHref">百度一下</a>
</div>

<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL: 'https://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',
      aHref: 'http://www.baidu.com'
    }
  })
</script>

</body>
</html>

2. 02-v-bind动态绑定class(对象语法).html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind动态绑定class(对象语法)</title>

  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <h1>这两个普通写法</h1>
  <h2 class="active">{
  {message}}</h2>
  <h2 :class="active">{
  {message}}</h2>

  <h1>对象的形式 写入</h1>
  <!-- <h2 v-bind:class="{key1: value1, key2: value2}">{
  {message}}</h2> -->
  <!-- <h2 v-bind:class="{类名1: true, 类名2: boolean}">{
  {message}}</h2> -->
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{
  {message}}</h2>
  <h2 class="title" v-bind:class="getClasses()">{
  {message}}</h2>

  <button v-on:click="btnClick">按钮</button>
</div>

<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive
      },
      getClasses: function () {
        return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>

</body>
</html>

在这里插入图片描述

3. 03-v-bind动态绑定class(数组语法).html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind动态绑定class(数组语法)</title>
  <style>
    .aaaaaa {
      color: red;
    }
    .bbbbbbb {
      font-size: 50px;
    }
  </style>
</head>
<body>

<div id="app">
  <h2 class="title" :class="[active, line]">{
  {message}}</h2>
  <h2 class="title" :class="getClasses()">{
  {message}}</h2>
</div>

<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active: 'aaaaaa',
      line: 'bbbbbbb'
    },
    methods: {
      getClasses: function () {
        return [this.active, this.line]
      }
    }
  })
</script>

</body>
</html>

在这里插入图片描述

4. 04-作业(v-for和v-bind的结合).html

作业需求: 点击列表中的哪一项, 那么该项的文字变成红色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作业(v-for和v-bind的结合)</title>

  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<h1>作业需求: 点击列表中的哪一项, 那么该项的文字变成红色</h1>
<div id="app">
  <ul>
    <!--<li v-for="m in movies">{
  {m}}</li>-->
    <li v-for="(m, index) in movies" @click="change(index)" :class="{active: currentIndex === index}">
      {
  {index}}-{
  {m}}
    </li>
  </ul>
</div>

<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],
      currentIndex: 0
    },
    methods: {
      change: function (index) {
        this.currentIndex = index
      }
    }
  })
</script>

</body>
</html>

在这里插入图片描述

5. 05-v-bind动态绑定style(对象语法).html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind动态绑定style(对象语法)</title>
</head>
<body>

<div id="app">
  <!--<h2 :style="{key(属性名): value(属性值)}">{
  {message}}</h2>-->

  <!--'50px'必须加上单引号, 否则是当做一个变量去解析-->
  <h2 :style="{fontSize: '50px'}">{
  {message}}</h2>

  <!--finalSize当成一个变量使用-->
  <h2 :style="{fontSize: finalSize}">{
  {message}}</h2>
  <h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{
  {message}}</h2>
  <h2 :style="getStyles()">{
  {message}}</h2>
</div>

</body>
<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      finalSize: 100,
      finalColor: 'red',
    },
    methods: {
      getStyles: function () {
        return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
      }
    }
  })
</script>
</html>

在这里插入图片描述

6. 06-v-bind动态绑定style(数组语法).html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bind动态绑定style(数组语法)</title>
</head>
<body>

<div id="app">
  <h2 :style="[baseStyle, baseStyle1]">{
  {message}}</h2>
</div>

<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      baseStyle: {backgroundColor: 'red'},
      baseStyle1: {fontSize: '100px'},
    }
  })
</script>

</body>
</html>

在这里插入图片描述

四、computed属性:04-计算属性

1. 01-计算属性的基本使用.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-计算属性的基本使用</title>
</head>
<body>

<div id="app">
  <h2>{
  {firstName + ' ' + lastName}}</h2>
  <h2>{
  {firstName}} {
  {lastName}}</h2>

  <h2>{
  {getFullName()}}</h2>

  <h2>{
  {fullName}}</h2>
</div>

<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Lebron',
      lastName: 'James'
    },
    // computed: 计算属性()
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    },
    methods: {
      getFullName() {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

</body>
</html>

在这里插入图片描述

2. 02-计算属性的复杂操作.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-计算属性的复杂操作</title>
</head>
<body>

<div id="app">
  <h2>总价格: {
  {totalPrice}}</h2>
</div>

<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {id: 110, name: 'Unix编程艺术', price: 119},
        {id: 111, name: '代码大全', price: 105},
        {id: 112, name: '深入理解计算机原理', price: 98},
        {id: 113, name: '现代操作系统', price: 87},
      ]
    },
    computed: {
      totalPrice: function () {
        let result = 0
        for (let i=0; i < this.books.length; i++) {
          result += this.books[i].price
        }
        return result

        // for (let i in this.books) {
        //   this.books[i]
        // }
        //
        // for (let book of this.books) {
        //
        // }
      }
    }
  })
</script>

</body>
</html>

在这里插入图片描述

3. 03-计算属性的setter和getter.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-计算属性的setter和getter</title>
</head>
<body>

<div id="app">
  <h2>{
  {fullName}}</h2>
</div>

<script src="../../lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Kobe',
      lastName: 'Bryant'
    },
    computed: {
      /*
      * 这是计算属性的 简写方式
      * */
      // fullName: function () {
      //   return this.firstName + ' ' + this.lastName
      // }

      /*
      * 这是计算属性的原始写法
      * */
      // name: 'coderwhy'
      // 计算属性一般是没有set方法, 只读属性.
      fullName: {
        set: function(newValue) {
          // console.log('-----', newValue);
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get: function () {
          return this.firstName + ' ' + this.lastName
        }
      },

      // fullName: function () {
      //   return this.firstName + ' ' + this.lastName
      // }
    }
  })
</script>

</body>
</html>

在这里插入图片描述

4. 04-计算属性和methods的对比.html

  1. methods 会执行 4 次
  2. computed 会执行 1 次, 其效率会高于 methods
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-计算属性和methods的对比</title>
</head>
<body>

<div id="app">
  <h1>1.直接拼接: 语法过于繁琐</h1>
  <h5>{
  {firstName}} {
  {lastName}}</h5>

  <h1>2.通过定义 methods</h1>
  <h5>{
  {getFullName()}}</h5>
  <h5>{
  {getFullName()}}</h5>
  <h5>{
  {getFullName()}}</h5>
  <h5>{
  {getFullName()}}</h5>

  <h1>3.通过 computed</h1>
  <h5>{
  {fullName}}</h5>
  <h5>{
  {fullName}}</h5>
  <h5>{
  {fullName}}</h5>
  <h5>{
  {fullName}}</h5>

  <!--
    methods 会执行 4 次
    computed 会执行 1 次, 其效率会高于 methods

  -->
</div>

<script src="../../lib/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Kobe',
      lastName: 'Bryant'
    },
    methods: {
      getFullName: function () {
        console.log('getFullName');
        return this.firstName + ' ' + this.lastName
      }
    },
    computed: {
      fullName: function () {
        console.log('fullName');
        return this.firstName + ' ' + this.lastName
      }
    }
  })

</script>

</body>
</html>

在这里插入图片描述

相关文章
|
1天前
|
编解码 Java 程序员
写代码还有专业的编程显示器?
写代码已经十个年头了, 一直都是习惯直接用一台Mac电脑写代码 偶尔接一个显示器, 但是可能因为公司配的显示器不怎么样, 还要接转接头 搞得桌面杂乱无章,分辨率也低,感觉屏幕还是Mac自带的看着舒服
|
3天前
|
存储 缓存 关系型数据库
MySQL事务日志-Redo Log工作原理分析
事务的隔离性和原子性分别通过锁和事务日志实现,而持久性则依赖于事务日志中的`Redo Log`。在MySQL中,`Redo Log`确保已提交事务的数据能持久保存,即使系统崩溃也能通过重做日志恢复数据。其工作原理是记录数据在内存中的更改,待事务提交时写入磁盘。此外,`Redo Log`采用简单的物理日志格式和高效的顺序IO,确保快速提交。通过不同的落盘策略,可在性能和安全性之间做出权衡。
1540 5
|
1月前
|
弹性计算 人工智能 架构师
阿里云携手Altair共拓云上工业仿真新机遇
2024年9月12日,「2024 Altair 技术大会杭州站」成功召开,阿里云弹性计算产品运营与生态负责人何川,与Altair中国技术总监赵阳在会上联合发布了最新的“云上CAE一体机”。
阿里云携手Altair共拓云上工业仿真新机遇
|
7天前
|
人工智能 Rust Java
10月更文挑战赛火热启动,坚持热爱坚持创作!
开发者社区10月更文挑战,寻找热爱技术内容创作的你,欢迎来创作!
577 22
|
3天前
|
存储 SQL 关系型数据库
彻底搞懂InnoDB的MVCC多版本并发控制
本文详细介绍了InnoDB存储引擎中的两种并发控制方法:MVCC(多版本并发控制)和LBCC(基于锁的并发控制)。MVCC通过记录版本信息和使用快照读取机制,实现了高并发下的读写操作,而LBCC则通过加锁机制控制并发访问。文章深入探讨了MVCC的工作原理,包括插入、删除、修改流程及查询过程中的快照读取机制。通过多个案例演示了不同隔离级别下MVCC的具体表现,并解释了事务ID的分配和管理方式。最后,对比了四种隔离级别的性能特点,帮助读者理解如何根据具体需求选择合适的隔离级别以优化数据库性能。
201 3
|
10天前
|
JSON 自然语言处理 数据管理
阿里云百炼产品月刊【2024年9月】
阿里云百炼产品月刊【2024年9月】,涵盖本月产品和功能发布、活动,应用实践等内容,帮助您快速了解阿里云百炼产品的最新动态。
阿里云百炼产品月刊【2024年9月】
|
10天前
|
Linux 虚拟化 开发者
一键将CentOs的yum源更换为国内阿里yum源
一键将CentOs的yum源更换为国内阿里yum源
571 5
|
23天前
|
存储 关系型数据库 分布式数据库
GraphRAG:基于PolarDB+通义千问+LangChain的知识图谱+大模型最佳实践
本文介绍了如何使用PolarDB、通义千问和LangChain搭建GraphRAG系统,结合知识图谱和向量检索提升问答质量。通过实例展示了单独使用向量检索和图检索的局限性,并通过图+向量联合搜索增强了问答准确性。PolarDB支持AGE图引擎和pgvector插件,实现图数据和向量数据的统一存储与检索,提升了RAG系统的性能和效果。
|
6天前
|
XML 安全 Java
【Maven】依赖管理,Maven仓库,Maven核心功能
【Maven】依赖管理,Maven仓库,Maven核心功能
233 3
|
9天前
|
存储 人工智能 搜索推荐
数据治理,是时候打破刻板印象了
瓴羊智能数据建设与治理产品Datapin全面升级,可演进扩展的数据架构体系为企业数据治理预留发展空间,推出敏捷版用以解决企业数据量不大但需构建数据的场景问题,基于大模型打造的DataAgent更是为企业用好数据资产提供了便利。
327 2