vue入门笔记（一）

最新推荐文章于 2023-08-14 20:08:27 发布
最新推荐文章于 2023-08-14 20:08:27 发布
阅读量442 收藏 1
点赞数 3
分类专栏： Vue入门 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43786818/article/details/104863715
版权

Vue Day 01

B站原视频地址
注：本文只是记录自己的学习过程

文章目录

一、邂逅Vuejs

1.1.认识Vuejs
  • 为什么学习Vuejs
  • Vue的渐进式

1.渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。2.或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。3.比如Core+Vue-router+Vuex，也可以满足你各种各样的需求

1.2.Vue的初体验
  • let(变量) / const(常量)
  • 声明式编程
  • mustache语法：{{message}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>

<div>{{message}}</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app', // 用于挂载要管理的元素
        data: { // 定义数据
            message: '你好啊,李银河!',
            name: 'coderwhy'
        }
    })

    // 元素js的做法(编程范式: 命令式编程)
    // 1.创建div元素,设置id属性

    // 2.定义一个变量叫message

    // 3.将message变量放在前面的div元素中显示

    // 4.修改message的数据: 今天天气不错!

    // 5.将修改后的数据再次替换到div元素
</script>

</body>
</html>

在这里插入图片描述

  • 案例一
    v-for：遍历打印数组所有数据
<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
        }
    })
</script>
  • 案例二
    v-on:click 表示监听一个click事件 绑定事件
<div id="app">
    <h2>当前计数: {{counter}}</h2>
    <!--<button v-on:click="counter++">+</button>-->
    <!--<button v-on:click="counter--;">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
    <!--下面是语法糖写法-->
    <!--<button @click="sub">-</button>-->
</div>
<script src="../js/vue.js"></script>
<script>
    // 语法糖: 简写
    // proxy
    const obj = {
        counter: 0,
        message: 'abc'
    }
    new Vue()
    const app = new Vue({
        el: '#app',
        data: obj,
        methods: {
            add: function () {
                console.log('add被执行');
                this.counter++
            },
            sub: function () {
                console.log('sub被执行');
                this.counter--
            }
        },
        beforeCreate: function () {
        },
        created: function () {
            console.log('created');
        },
        mounted: function () {
            console.log('mounted');
        }
    })
    // 1.拿button元素
    // 2.添加监听事件
</script>
1.3.创建Vue时, options可以放哪些东西
  • el:
  • data:
  • methods:
  • 生命周期函数

二、插值语法

  • mustache语法
<!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
  <h2>{{firstName + lastName}}</h2>
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
  • v-once(用的少)
    该指令表示元素和组件只渲染一次，不会随着数据的改变而改变
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>

在这里插入图片描述

  • v-html
    从服务器请求到的数据本身就是一个HTML代码 需要解析 不能直接用 {{}}
<div id="app">
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

在这里插入图片描述

  • v-text(用的少)
    和{{}}一样的效果，但是{{}}更好更灵活
<div id="app">
  <h2>{{message}}, 李银河!</h2>
  <h2 v-text="message">, 李银河!</h2>
</div>
  • v-pre: {{}}(用的少)
    1. 第一个h2元素中的内容会被编译解析出来对应的内容
    2. 第二个h2元素中会直接显示{{message}}
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>
  • v-cloak: 斗篷(了解 用得少)
    在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签
<style>
    [v-cloak] {
      display: none;
    }
  </style>

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

三、v-bind

3.1. v-bind绑定基本属性
  • v-bind:src
  • :href
<div id="app">
  <!-- 错误的做法: 这里不可以使用mustache语法-->
  <!--<img src="{{imgURL}}" alt="">-->
  <!-- 正确的做法: 使用v-bind指令 -->
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">百度一下</a>
  <!--<h2>{{}}</h2>-->
  <!--语法糖的写法-->
  <img :src="imgURL" alt="">
  <a :href="aHref">百度一下</a>
</div>
<script src="../js/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>
3.2. v-bind动态绑定class
  • 对象语法: 作业 :class=’{类名: boolean}’ (用的很多)
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <!--<h2 class="active">{{message}}</h2>-->
  <!--<h2 :class="active">{{message}}</h2>-->
  <!--<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="../js/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>
  • 数组语法:(用的很少)
<div id="app">
  <h2 class="title" :class="[active, line]">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/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>
  • 作业 v-for和v-bind的一起使用
    点击列表中的哪一项, 那么该项的文字变成红色
<style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
<!--作业需求: 点击列表中的哪一项, 那么该项的文字变成红色-->
<div id="app">
  <ul>
    <li v-for="(item, index) in movies" @click="change(index)" :class="{active:index==currentIndex}">
      {{item}}
    </li>
  </ul>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['星际穿越', '盗梦空间', '大话西游', '少年派的奇幻漂流'],
      currentIndex: 0
    },
    methods: {
      change:function(Index){
        this.currentIndex = Index;
      }
    }
  })
</script>
3.3. v-bind动态绑定style
  • 对象语法:(用的很多)
<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>
<script src="../js/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>
  • 数组语法:(用的很少)
<div id="app">
  <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      baseStyle: {backgroundColor: 'red'},
      baseStyle1: {fontSize: '100px'},
    }
  })
</script>

四. 计算属性

// computed: 计算属性() 性能比直接用函数更好 没有缓存

  • 案例一: firstName+lastName
<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: 'Lebron',
      lastName: 'James'
    },
    // computed: 计算属性()
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    },
    methods: {
      getFullName() {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>
  • 案例二: books -> price
<div id="app">
  <h2>总价格: {{totalPrice}}</h2>
</div>
<script src="../js/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>
  • 计算属性的setter和getter
    一般不希望计算属性有set方法
    我们一般写get方法，上面的
    fullName: function () { return this.firstName + ’ ’ + this.lastName }
    就是get方法的语法糖 ，这里只是介绍一下有set和get方法
<div id="app">
  <h2>{{fullName}}</h2>
</div>
<script src="../js/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>
  • 计算属性和method的对比
<div id="app">
  <!--1.直接拼接: 语法过于繁琐-->
  <h2>{{firstName}} {{lastName}}</h2>
  <!--2.通过定义methods-->
  <!--<h2>{{getFullName()}}</h2>-->
  <!--<h2>{{getFullName()}}</h2>-->
  <!--<h2>{{getFullName()}}</h2>-->
  <!--<h2>{{getFullName()}}</h2>-->
  <!--3.通过computed-->
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  // angular -> google
  // TypeScript(microsoft) -> ts(类型检测)
  // flow(facebook) ->
  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>

调用计算属性的方法只会执行一次，调用method方法回执行四次，可以通过浏览器控制台查看

附链接
vue入门学习(二)

Suarge
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门笔记以及项目源码
04-18
资源包括入门vue的ppt资料以及后期项目的源码，笔记全面比较详细，基本上讲述了vue的大部分内容，同时也包括了项目实战
Vue属性绑定
weixin_47345230的博客
12-03 465
Vue属性绑定测试
Vue.js绑定属性v-bind
tanxinji的博客
12-24 3695
将标签内的属性值绑定，使其在Vue对象内可以动态修改属性值。使用的就是v-blind:属性名 = "vue变量名" 来将属性绑定。可以缩写为:属性名 = "vue变量名"。如果只是纯文本的话就需要单引号括起来表示一个字符串而不是一个变量。 变量名可以有很多，如: href,src,name,class,style等等。 :属性名 = "vue变量名" 。 注意:" "里的变量需要是vue中存在的，vue的帮助下会自动替换为变量名所对应的值。 代码实...
动态绑定属性
qq_33879627的博客
09-21 3234
（四）动态绑定属性 4.1 v-bind的基本使用 ​ 某些时候我们并不想将变量放在标签内容中，像这样<h2>{{message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:sr
【Vue3实践】（二）Vue3开发基础：响应式变量、双向绑定、计算属性、监听器
积木成林，聚沙成塔
03-18 2488
本篇主要是讲了VUE开发中经常会使用到的响应式变量、双向绑定的使用方式，并举例说明了计算属性和监听器之间的使用差别及各自的作用，有了本篇的基础，已经可以使用VUE做一些简单的开发了。 需要注意这么几个细节： - 响应式与双向绑定的联系与区别，`v-model`的作用 - 计算属性的使用限制，生成的快照属性不能别其他功能修改 - 监听器`watch`与`watchEffect`的区别，`watchEffect`与`computed`的区别 - 监听器监听数据源为对象时需要注意两个问题：**深层监听**、`n
vue基础-动态属性、过滤器、计算属性、侦听器
ioncannontic的博客
05-27 656
转换格式，过滤器就是一个。
vue 3.0学习笔记(从入门到精通)
10-07
vue 3.0自我学习整理的笔记，有很大的参考价值，包括了所有的知识点，vue的开发环境搭建、组件开发、数据状态管理、vue route、组件之前数据传递等有关知识点
Vue入门day01笔记
10-27
我是新手，今天的笔记，看视屏自己做的笔记，记录一下第一次用这个
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
适合想要学习Vue.js前端框架的新人、复习资料，里面资料都是个人从0开始学习所总结的笔记（希望能帮到更多人）
JavaWeb03-Vue学习笔记
最新发布
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
vue使用动态样式与计算属性实现多变量判断
let us fly的博客
12-22 2219
使用动态样式与计算属性实现复杂判断的动态样式绑定
【vue】笔记三：Vue基础语法以及数据绑定
weixin_55846296的博客
05-29 2343
在Vue中，如果我们需要将一个变量绑定到视图中，并且在变量发生改变时自动更新视图，我们需要使用Vue提供的响应式数据特性。使用v-model指令实现，当视图中的数据变化时，模型中的数据也随之更新；指令是Vue中用来扩展HTML元素功能的特殊属性，通过指令我们可以动态地操作DOM，绑定事件、控制元素显示/隐藏等。v-model指令：实现表单输入元素的双向绑定，代表模板中表单控件的值与组件实例中的数据之间的关系。可以是一个变量，也可以是一个表达式，都可通过Vue的数据绑定机制进行双向数据绑定。
Vue的指令学习
qq_50260510的博客
06-07 722
Vue中的指令修饰符
vue绑定语法和指令
weixin_47198950的博客
08-08 386
vue
Vue动态绑定Class常用的几种方式
热门推荐
丑小喵的博客
10-20 1万+
总结Vue动态绑定Class常用的几种方式
vue动态绑定指令以及动态传参
qq_44052087的博客
11-15 723
vue动态绑定指令以及动态传参
Vue基础--Vue中的事件绑定指令详解
qq_44749491的博客
09-24 6037
详解Vue中的事件绑定
vue自定义指令--动态参数绑定
chenlim87的博客
08-14 711
在企业微信侧边栏应用中，给`dialog`添加了拖拽功能，但是因为`dialog`高度超过了页面高度，所以高度100%时拖拽有个bug--自动贴到窗口顶部而且企业侧边栏宽高都有限制，拖拽效果并不理想，所以就想缩小`dialog`再进行拖拽。拖拽的指令是自定义的，原本想像绑定`class`一样根据一个参数来动态绑定指令，发现没有这种功能。后来看了文档，可以给指令动态传递参数，根据传递的参数来判断之后的行为。：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。封装的指令在组件中引用。
尚硅谷vue md笔记
07-23
总之，尚硅谷Vue.md笔记是一份非常有价值的学习资料，对于想要学习Vue框架的开发者来说，它可以帮助我们快速入门和深入学习，并且提供了丰富的实例和相关资源，是一份非常推荐的学习材料。 ### 回答3： 《尚硅谷...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值