Vue学习の Day01

最新推荐文章于 2024-07-25 17:11:44 发布

菜鸟Player

最新推荐文章于 2024-07-25 17:11:44 发布

阅读量74

点赞数

分类专栏： VueStudy 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46800734/article/details/118393669

版权

VueStudy 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

VUE学习资料来源于此链接
以下是学习视频中的内容以及对老师提供的资料进行了归纳总结

Vue的学习笔记

Vue Day 01

Vue Day 01

一. Vuejs

1.1. 认识Vuejs

为什么学习Vuejs?
可能公司正要将原有的项目使用Vue进行重构。
也可能是公司新项目决定使用Vue的技术栈。
Vue的读音
读音 /vjuː/，类似于 view
Vue的渐进式
渐进式意味着可以将Vue作为开发应用的一部分嵌入其中，带来更丰富的交互体验。即一点点的对项目进行重构，比如将项目里的jQuery一点一点去掉用vue替代。
或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
Vue的特点
解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM
PS：用了vue一般都不用jQuery了，只有老项目还存在jQuery

1.2. 安装Vue

CDN引入
为了快，不用随时调用，前期学习建议下载引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

下载引入（官方网站—安装）
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
npm安装（主流）
后续通过webpack和CLI的使用，我们使用该方式。

1.3. Vue的初体验

Hello Vuejs PPT*6
- mustache -> 体验vue响应式
Vue列表展示 PPT*7
- v-for
- 后面给数组追加元素的时候, 新的元素也可以在界面中渲染出来
Vue计数器小案例 PPT*8
- 事件监听: click -> methods

1.4. Vue中的MVVM

详细看 PPT*9
Model–view–viewmodel
通常我们学习一个概念，最好的方式是去看维基百科(千万别看成了百度百科)
https://zh.wikipedia.org/wiki/MVVM
可查看维基百科的官方解释

1.5. 创建Vue时, options可以放那些东西

option
详细解析 vue api文档

开发中什么时候称之为方法, 什么时候称之为函数?
- 方法: method(类里的东西)
- 函数: function
el:
- 类型：string | HTMLElement
- 作用：决定之后Vue实例会管理哪一个DOM。
data:
- 类型：Object | Function （在组件当中data必须是一个函数）
- 作用：Vue实例对应的数据对象。
methods:
- 类型：{ [key: string]: Function }
- 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
生命周期函数 PPT*12
Vue源码:https://github.com/vuejs/vue/tree/v2.6.14
开发过程中分两个版本:debug/release
GitHub上下载release版本

代码规范

代码规范:缩进4个空格, 2个空格.
CLI -> 自动创建.editconfig用于规范代码 2个空格.

vue的template :vscode在用户片段里设置,详细看http://mtw.so/5TnpAu

二.插值语法

mustache语法
- 就是双大括号
- 翻译:胡子/胡须

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

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

v-once PPT*16
- 该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
- 该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。
  用console不会被渲染
  与v-for不一样
v-html
- 如果我们直接通过{{}}来输出，会将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
- v-text作用和Mustache比较相似：都是用于将数据显示在界面中
- v-text通常情况下，接受一个string类型
- 不好用,拼接很麻烦,会覆盖

<div id="app">
  <h2>{{message}}, 李银河!</h2>
  <h2 v-text="message">, 李银河!</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

v-pre: {{}}
- v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>

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

v-cloak: 斗篷
- 在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>

<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<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绑定基本属性

除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
比如动态绑定a元素的href属性
比如动态绑定img元素的src属性

v-bind
- 作用：动态绑定属性
- 缩写：:
- 预期：any (with argument) | Object (without argument)
- 参数：attrOrProp (optional)
v-bind:sr
:href
- 作用：动态绑定属性
- 缩写：:
- 预期：any (with argument) | Object (without argument)
- 参数：attrOrProp (optional)
v-bind语法糖
- <img :src="imgURL" alt="">

<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

v-bind动态绑定class(对象)语法
- 当数据为某个状态时，字体显示红色。
- 当数据另一个状态时，字体显示黑色。
对象语法: 作业 :class=’{类名: boolean}’
- 用法一：直接通过{}绑定一个类
  <h2 :class="{'active': isActive}">Hello World</h2>
- 用法二：也可以通过判断，传入多个值
  <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
- 用法三：和普通的类同时存在，并不冲突
  注：如果isActive和isLine都为true，那么会有title/active/line三个类
  <h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
- 用法四：如果过于复杂，可以放在一个methods或者computed中
  注：classes是一个计算属性
  <h2 class="title" :class="classes">Hello World</h2>

<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <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>-->
  <!-- class和动态绑定,最后会一起合并 -->
  <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: '你好啊',
      //默认为true
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick: function () {
        //每次取反
        this.isActive = !this.isActive
      },
      getClasses: function () {
        return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>

数组语法:
- 用法一：直接通过{}绑定一个类
  <h2 :class="['active']">Hello World</h2>
- 用法二：也可以传入多个值
  <h2 :class=“[‘active’, 'line']">Hello World</h2>
- 用法三：和普通的类同时存在，并不冲突
  注：会有title/active/line三个类
  <h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
- 用法四：如果过于复杂，可以放在一个methods或者computed中
  注：classes是一个计算属性
  <h2 class="title" :class="classes">Hello World</h2>

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

3.3. v-bind动态绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式。
我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

对象语法:
绑定方式一：对象语法
:style="{color: currentColor, fontSize: fontSize + 'px'}"
style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .title {
      font-size: 50px;
      color: red;
    }
  </style>
</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>

<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 v-bind:style="[baseStyles, overridingStyles]"></div>
- style后面跟的是一个数组类型
- 多个值以，分割即可

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

四. 计算属性

在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
- 比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}
我们可以将上面的代码换成计算属性：
- 而计算属性是写在实例的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

<body>

<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>
</body>

菜鸟Player

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习の Day01

VUE学习资料来源于此链接以下是学习视频中的内容以及老师提供的资料进行了归纳总结Vue的学习笔记Vue Day 01一. Vuejs1.1. 认识Vuejs1.2. 安装Vue1.3. Vue的初体验1.4. Vue中的MVVM1.5. 创建Vue时, options可以放那些东西代码规范二.插值语法三. v-bind3.1. v-bind绑定基本属性3.2. v-bind动态绑定class3.3. v-bind动态绑定style四. 计算属性Vue Day 01一. Vuejs1.1. 认识Vu
复制链接

扫一扫

专栏目录