vue基础、插值操作、计算属性、ES6补充

最新推荐文章于 2024-02-01 17:54:39 发布
最新推荐文章于 2024-02-01 17:54:39 发布
阅读量361 收藏 1
点赞数 1
文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44768794/article/details/114915376
版权

vue

vue基础

1.1 el:挂载点

该属性决定了Vue对象挂载到哪个元素上。

Vue实例的作用范围？

Vue会管理el选项命中的元素以及其后代元素

是否可以选择其他的选择器？

可以，推荐选择ID选择器，唯一性

是否可以设置其他的DOM元素？

可以，除body、html之外其他的双标签都可以使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'hello vue.js!'
            } 
        })

    </script>
</body>

</html>

在这里插入图片描述
在console窗口输入
在这里插入图片描述
页面数据同步更改
在这里插入图片描述

1.2 data:数据对象

■ Vue中用到的数据定义在data中
■ data中可以定义复杂数据类型
■ 渲染复杂类型数据时，遵循js的语法即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <ul>
            <li>{{beauty.name}}</li>
            <li>{{beauty.age}}</li>
            <li>{{beauty.lover}}</li>
            <li>{{campus[2]}}</li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script>
        new Vue ({
            el: '#app',
            data: {
                message: 'hello vue.js',
                beauty: {
                    name: 'zzy',
                    age: '18',
                    lover: 'lyf'
                },
                campus: ['丑鸭子','老鳄鱼','大狗勾']
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

1.3 vue 列表展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <!-- vue列表 -->
    <div id="app">
        <ul>
            <li v-for = "item in love">{{item}}</li>
        </ul>
    </div>
    <script src="/js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                love: ['l','y','f','l','o','v','e']
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

1.4 计数器（*）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>当前计数{{number}}</h2>
        <!-- 触发事件后调用函数 -->
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
    <script src="/js/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                number: 0
            },
            methods: {
                increment() {
                    this.number++;
                },
                decrement() {
                    this.number--;
                }
            }
        })
    </script>
</body>

</html>

1.5 Vue的生命周期

在这里插入图片描述

1.6 插值操作—mustache语法

mustache语法即双括号语法
mustache语法中不仅可以可以直接写变量，也可以写简单的表达式
详细请查询：https://www.cnblogs.com/happ0/p/8075562.html

插值操作

2.1 v-once指令

■ 该指令后面不需要跟任何表达式
■ 该指令表示组件和元素只渲染一次，不会随着数据的改变而改变

    <h2>{{message}}</h2>
    <!-- v-once只在第一次显示，之后不会改变 -->
    <h2 v-once>{{message}}</h2>

2.2 v-text指令

■ v-text指令的作用：设置标签的内容（textContent）
■ 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容

下列代码展示:
1.添加文本内容的方式
2.v-text在标签中间添加的内容不显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>你好啊{{message + '!'}}zzy</h2>
        <h2 v-text="message + '!'">zzy</h2>
        <h2 v-text="info + '!'">zzy</h2>
    </div>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script>
        new Vue ({
            el: '#app',
            data: {
                message: 'hello vue.js!',
                info: '前端我来惹!'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

2.3 v-html指令

■ v-html指令的作用是：设置元素的innerHTML
■ 内容中有html结构会被解析为标签

v-html 与 v-text 区别：

1.不加html结构时显示相同
2.v-html会将html结构转换为指令，v-text不会转换
3.解析文本使用v-text,解析html结构用v-html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p v-html="message"></p>
        <p v-text="message"></p>
    </div>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: "<a href = 'https://www.baidu.com'>百度<a/>"
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

2.4 v-pre指令

将html标签里面的内容原封不动的显示出来，不做任何解析

<body>
  <div id="app">
    <h2 v-pre>{{url}}</h2>
    <h2 v-html="url"></h2>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        url: '<a href="https://www.baidu.com">百度一下</a>'
      }
    })
  </script>
</body>

在这里插入图片描述

2.5 v-cloak指令

■ cloak“帐篷”，当mustache语法解析不成功时，隐藏标签内容
■ 加载之前cloak存在div中
■ 加载之后cloak不存在div中

2.6 v-on指令

■ 为元素绑定事件
■ 时间名不需要写 on
■ 指令可以简写为@
■ 绑定的方法定义在method属性中
■ 方法内部通过this关键字可以访问定义在data中的数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
</head>

<body>
    <div id="app">
        <input type="button" value="v-on单击指令" v-on:click='dolt'>
        <input type="button" value="v-on鼠标进入指令" v-on:mouseenter='dolt'>
        <input type="button" value="v-on双击指令" v-on:dblclick='dolt'>
        <input type="button" value="v-on双击简写" @dblclick='dolt'>
        <h2 @click='changeFood'>{{food}}</h2>
    </div>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                food: '西红柿炒蛋'
            },
            methods: {
                dolt: function () {
                    alert('做it');
                },
                changeFood: function () {
                    // console.log(this.food);
                    this.food += 'delicious!\t';
                }
            }
        }) 
    </script>
</body>

</html>

在这里插入图片描述

计数器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 150px;
            height: 30px;
            margin: 100px auto;
            border: 1px solid #777;
            border-radius: 5px;
        }
        span {
            /* display: block; */
            text-align: center;
        }
        button {
            width: 50px;
            height: 30px;
            font-size: 20px;
            color: rgb(180, 57, 57);
        }
        button:first-child {
            float: left;
        }
        button:nth-child(1) {
            float: right;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click='lose'>-</button>
        <span>{{number}}</span>
        <button @click='add'>+</button>
    </div>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script>
        //点加号数字递增,点减号数字递减
        var app = new Vue ({
            el: '#app',
            data: {
                number: 1
            },
            methods: {
                lose:function() {
                    if( this.number == 0) {
                        alert('不能再减啦');
                    }else {
                        this.number--;
                    }
                },
                add:function() {
                    if( this.number == 10) {
                        alert('不能再加啦');
                    }else {
                        this.number++;
                    }
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-bind 动态绑定

<body>
  <div id="app">
    <a v-bind:href="message">百度一下</a>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: "https://www.baidu.com/"
      }
    })
  </script>
  
</body>

3.1 v-bind动态绑定class(对象语法)

绑定对象：对象语法
■ 对象语法的含义：class后面跟的是一个对象
动态语法有几种用法，如以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2 v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>
    <!-- v-bind语法糖 -->
    <!-- 用法一：直接通过{}绑定一个类 -->
    <h2 :class="{'active': isActive}"></h2>
    <!-- 用法二：可以通过判断，传入多个值 -->
    <h2 :class="{'active': isActive,'line': isLine}">{{message}}</h2>
    <!-- 用法三：和普通的类同时存在，不冲突 -->
    <h2 class="text" :class="{'active': isActive,'line': isLine}"></h2>
    <!-- 用法四：如果过于复杂，可以放在methods和conputed中 注：classes是一个计算属性-->
    <h2 class="text" :class="classes">hello</h2>
    <div v-on:click="btnClick">按钮</div>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: "hello",
        isActive: true,
        isLine: true
      },
      methods: {
        btnClick: function() {
          this.isActive = !this.isActive
        }
      }
    })
  </script>
</body>
</html>

3.1 v-bind动态绑定class(数组语法)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2 class="title" v-bind:class='[active, line]'></h2>
    <h2 class="title" :class='getClasses()'></h2>
    <button v-on:click="btnClick">按钮</button>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello',
        active: 'aaaa',
        line: 'bbbb'
      },
      methods: {
        getClasses: function() {
          return [this.active, this.line]
        }
      }
    })
  </script>
</body>
</html>

3.3 v-bind和v-for结合 案例

3.4 v-bind动态绑定style(对象语法)

■ 利用v-bind:style绑定样式
■ 写属性名有两种，如font-size：
1.驼峰命名法： fontSize
2.短横线分隔：‘font-size’

:style="{key(属性名)：value(属性值)}"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- v-bind动态绑定style（对象语法） -->
    <!-- 12px不加单引号会报错，vue直接将他解析为变量，加上单引号解析为字符串再赋值给属性 -->
    <!-- <h2 :style="{fontSize: '12px'}">{{message}}</h2> -->
    <!-- 方法一： -->
    <h2 :style="{fontSize: finalSize + 'px', color: finalColor}">{{message}}</h2>
    <!-- 方法二： -->
    <h2 :style="{getStyles()}">{{message}}</h2>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'enheng',
        finalSize: 50,
        finalColor: 'red'
      },
      methods: {
        getStyles: function () {
          return {fontSize: this.finalSize + 'px',color: this.finalColor}
        }
      }
    })
  </script>
</body>
</html>

3.5 v-bind动态绑定style(数组语法)

:style="[数组元素1,数组元素2]"

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 数组语法 -->
    <!-- <h2 :style="[数组元素1,数组元素2]">{{message}}</h2> -->
    <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hh',
        baseStyle: {backgroundColor: 'pink'},
        baseStyle1: {fontSize: '50px'}
      }
    })
  </script>
</body>
</html>

计算属性

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

不经过计算属性，我们可以在 method 中定义一个相同的函数来替代它。对于最终的结果，两种方式确实是相同的。
然而，不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。
这就意味着只要 message 没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

4.1 计算属性的基本使用

字符串拼接形式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 打印全名的四种方式 -->
    <h2>{{firstName + ' '+ lastName}}</h2>
    <h2>{{firstName}} {{lastName}}</h2>
    <!-- 方法形式 -->
    <h2>{{getFullName()}}</h2>
    <!-- 计算属性 -->
    <h2>{{fullName}}</h2>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'ziyi',
        lastName: 'lv'
      },
      methods: {
        getFullName: function() {
          return this.firstName + ' ' + this.lastName
        }
      },
      computed: {
        fullName: function() {
          return this.firstName + ' ' + this.lastName
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

4.2 计算属性的复杂操作

数组形式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h2>总价：{{totalPrice}}</h2>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        books: [
          { id: 100, name: 'JavaScript', price: 119 },
          { id: 101, name: 'HTML', price: 118 },
          { id: 102, name: 'CSS', price: 117 },
          { id: 103, name: 'Vue.js', price: 116 }
        ]
      },
      computed: {
        totalPrice: function () {
          let result = 0
          for (let i = 0; i < this.books.length; i++) {
            result += this.books[i].price
          }
          return result
        }
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

4.3 计算属性的setter和getter

每个计算属性都包含一个getter和一个setter
正常情况下，我们只是使用getter来读取。
在某些情况下，你也可以提供一个setter方法（几乎不用）。

在需要写setter的情况下，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{fullName}}</h2>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        firstName: 'zzy',
        lastName: 'beauty'
      },
      computed: {
        fullName: {
          // 计算属性一般没有set，称为只读属性
          set: function(newValue) {
            // 当通过console给属性赋值时，会调用set方法
            // console.log('.....',newValue);
            const names = fullName.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
          },
          get: function() {
            return this.firstName + ' ' + this.lastName
          }
        }
        // 下列为简写的只读属性，省略了get
        // fullName: function() {
        //   return this.firstName + ' ' + this.lastName
        // }
      }
    })
  </script>
</body>
</html>

4.4 计算属性和methods的对比

计算属性在运行时会进行缓存，调用一次后会自动调用缓存，而不是重新加载
methods会反复加载，不进行缓存
注：不改变属性值的情况下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{getfullName()}}</h2>
    <h2>{{getfullName()}}</h2>
    <h2>{{getfullName()}}</h2>
    <h2>{{getfullName()}}</h2>

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

  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'zzy',
        lastName: 'girl'
      },
      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>

在这里插入图片描述

ES6语法(部分)

块级作用域
JS中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关.
针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题。
if和for没有作用域，变量可以覆盖
闭包可以解决变量覆盖：函数是一个作用域

5.1 const使用和注意

const主要作用是将某个变量修饰为常量，const修饰的标识符为常量，不可再次赋值
使用const的情况：当标识符不会再被赋值时，就可以使用const来保证数据的安全性
建议：在ES6开发中，优先使用const，只有需要改变某个标识符时才使用let
常量的含义是指向的对象不能修改，但是可以改变对象内部的属性

5.2 对象字面量增强写法

字面量：就是直观的写法

const obj = new Object()
const obj = {} 这里的{}就是字面量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="/js/vue.js"></script>
  <script>
   
    const app = new Vue({
      el: '#app',
    })
    // 1.属性的增强写法
    const name = 'zzy';
    const age = 18;
    const sex = 'girl';

    // ES5的写法
    // const obj = {
    //   name: name,
    //   age: age,
    //   sex: sex
    // }

    // ES6写法
    // const obj = {
    //   name,
    //   age,
    //   sex
    // }
    // console.log(obj);
    
    // 2.函数的增强写法
    // ES5写法
    // const obj = {
    //   run: function() {

    //   },
    //   eat: function() {

    //   }
    // }

    // ES6写法
    const obj = {
      run() {

      },
      eat() {
        
      }
    }
  </script>
</body>
</html>
cb++
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue，es6，前端面试题总结
04-27
在前端开发领域，Vue.js 和 ES6 是两个至关重要的技术，它们构成了现代Web应用程序的基础。Vue.js 是一个轻量级的渐进式框架，而ES6（ECMAScript 2015）则是JavaScript语言的一次重大更新，引入了许多新特性和语法糖...
vue的基础学习的部分代码
03-11
5. **计算属性与侦听器**：计算属性允许我们定义基于其他数据的衍生值，它们自动响应依赖数据的变化。而`watch`对象则用于监听数据变化并执行相应操作，适合在数据改变时执行复杂逻辑。 6. **生命周期钩子函数**：...
Vue学习笔记（一）——插值操作与计算属性
qq2297329956的博客
01-26 288
Vue学习笔记（一）——插值操作与计算属性 文章目录Vue学习笔记（一）——插值操作与计算属性一、插值操作1.基础的插值操作2.插值操作的实列二、计算属性1.注意事项2.计算属性的例子 一、插值操作 1.基础的插值操作 核心代码如下： <div class="title" :class="{active: isActive,line: isLine}">{{message}}</div> <div class="title" :class="classGet()">{
ES6语法：
light的博客~~~
09-06 523
ES6语法： 1.展开运算符（…） 1.1 数组展开 let arr = [1,2,3,4] let arr2 = ["a","b","c","d"]; #想要在arr2的b后面插入arr，使用ES6的方法 let arr3 = ["a","b",...arr,"c","d"] #其中...就是展开运算符 console.log(arr3) 剩余对象：跟解构赋值搭配使用，取出剩余参数 let arr = [1,2,3,4]; # 剩余参数 let [a,b,...c] = arr; #...c相
vue之computed计算属性
Luckyzhoufangbing的博客
07-31 298
(一) computed使用: 在遇到复杂的逻辑时官方不推荐使用插值表达式，而是使用计算属性把逻辑复杂的代码进行分离。 在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。（return） 计算属性还可以依赖多个Vue实例的 数据，只要其中任何一个数据变化，计算属性就会重新执行，视图也会更新 。 （二）使用举例 <template> ...
Vue基础语法-插值操作
好记性不如烂键盘
08-28 649
插值操作 插值运算符 语法： {{数据}} 插值运算符可以显示也可以对数据进行计算 代码： <div id="app"> <h2>{{firstName}} {{lastName}}</h2> <h2>年龄：{{count*2}}</h2> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ fi
Vue学习笔记（3）关于Vue的计算属性
XP and Altoria
01-11 2929
通过之前的学习，我们学习了模板之中的文本插值，这可以很好的实现数据的展示与绑定，但是这样的展示是有点缺陷的，比如当你想把数据做一定的复杂处理过后才展示的时候，当然你也可以继续地使用模板，可是这会显得特别难以维护。 Vue当然也是给出了解决方案，这就是计算属性，先给出代码 Vue {{message}} {{reverseMessage}} var vm=new Vue
summarize-es6-vue-jquery:es6,vue双向数据绑定，jquery
05-07
4. **计算属性和侦听器**：计算属性是基于其依赖缓存的结果，而侦听器可以监听数据变化并执行相应逻辑。 5. **虚拟DOM**：Vue使用虚拟DOM进行高效更新，减少对实际DOM的操作，提高性能。 最后，我们提到的是**...
Vue项目
02-14
5. **计算属性与侦听器**：计算属性用于基于其他数据进行计算，当依赖的数据改变时自动更新。而侦听器则监听特定数据的变化并执行相应操作。 6. **路由管理（Vuex或vue-router）**：在大型项目中，通常会使用Vue ...
Vue前端面试题合集含vue3
03-24
2. 响应式系统：了解Vue的依赖追踪和数据绑定机制，包括计算属性、侦听器等。 3. 模板语法：熟悉v-if/v-else、v-for、v-bind、v-on等指令，以及模板中的插值表达式。 4. 生命周期：掌握Vue实例和组件的生命周期钩子...
Vue 文本与属性绑定，计算属性computed，侦听器watch -- 柚子真好吃
java
02-07 255
Vue 文本与属性绑定，计算属性computed -- 柚子真好吃一、文本绑定(双向绑定)二、属性绑定 一、文本绑定(双向绑定) 下面为Vue官网教程： 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： <span>Message: {{ msg }}</span> Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论...
es6常用语法
sally18的博客
07-19 1620
一、let和const 在Java中咱们以前主要用关键var来定义变量，ES6之后，新增了定义变量的两个关键字，分别是let和const。 对于变量来说，在ES5中var定义的变量会提升到作用域中所有的函数与语句前面，而ES6中let定义的变量则不会，let声明的变量会在其相应的代码块中建立一个暂时性死区，直至变量被声明。 let和const都能够声明块级作用域，用法和var是类似的，let...
ES6的新增语法 解构赋值
王敬辉的博客
06-10 436
解构赋值 ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构； 按照一定模式，从数组中或对象中提取值，将提取出来的值赋给另外的值。 数组解构 //数组解构允许我们按照一一对应的关系从数组中提取值 let arr=[1,2,3]; let [a,b,c]=arr; console.log(a);//1 console.log(b);//2 console.log(c);//3 // 如果解构不成功，变量的值为undefined let arr=[1,2,3]; let [a,b,c,
前端插值语法总结
qq_35898059的博客
07-28 533
前端插值语法 MVC 框架 <%=key%> ejs 模板 <%=key%> ES6 ${key} less @{key} scss #{$key} 微信 {{key}} 伪 js 环境 vue {{key}}
了解Vue，Vue的基础语法
weixin_67696142的博客
07-14 647
Vue的基础语法
Vue的插值、指令、过滤器、计算属性及监听属性，包涵所有基础技术
SAME_LOVE的博客
09-19 275
Vue的插值是一种将数据动态绑定到HTML模板中的方式。通过插值，可以将Vue实例中的数据直接显示在HTML模板中，实现数据与视图的同步更新。过滤器提供了一种简单而灵活的方式来处理和格式化数据，使得页面输出更加清晰和易读。计算属性是一种方便而强大的特性，可以帮助我们处理和计算数据，使得代码更加简洁和易读。监听属性的使用方式是在Vue实例的`watch`选项中声明要监听的属性和对应的回调函数。回调函数会在被监听的属性发生变化时自动调用，并传入新值和旧值。
Vue中使用差值表达式{{}} , 差值闪烁问题
兮赫的博客
11-29 882
精选30+云产品，助力企业轻松上云！>>> 举例: ...
Vue插值表达式及常用指令
最新发布
qq_44741577的博客
02-01 1915
插值表达式是vue框架提供的一种在html模板中绑定数据的方式，使用。
Vue基础语法(插值、指令、过滤器、 计算属性和监听属性)
byg
08-01 699
Vue基础语法 插值.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>指令</ti...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值