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

最新推荐文章于 2024-05-10 18:15:56 发布

java冯坚持

最新推荐文章于 2024-05-10 18:15:56 发布

阅读量464

点赞数

分类专栏： vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_40036754/article/details/126084655

版权

vue 专栏收录该内容

25 篇文章 8 订阅

订阅专栏

文章目录

导言
一、01-初体验
二、02-插值表达式、指令
三、==v-bind指令==:03-动态绑定属性
四、==computed属性==：04-计算属性

导言

一、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

v-on指令：点击指令，等价于 @
可以直接写函数内容，也可以直接写函数名

<!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

methods 会执行 4 次
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>