Vue学习day01（vscode）

最新推荐文章于 2022-04-07 10:46:22 发布

秃头大学生破晓

最新推荐文章于 2022-04-07 10:46:22 发布

阅读量162

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43748856/article/details/118880496

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

0.课堂回顾

Vue Day 01

一. 邂逅Vuejs

1.1. 认识Vuejs

为什么学习Vuejs
Vue的读音
Vue的渐进式
Vue的特点

1.2. 安装Vue

CDN引入
下载引入
npm安装

1.3. Vue的初体验

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

1.4. Vue中的MVVM

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

el:
data:
methods:
生命周期函数

二.插值语法

mustache语法
v-once
v-html
v-text
v-pre: {{}}
v-cloak: 斗篷

三. v-bind

3.1. v-bind绑定基本属性

v-bind:sr
:href

3.2. v-bind动态绑定class

对象语法: 作业 :class=’{类名: boolean}’
数组语法:

3.3. v-bind动态绑定style

对象语法:
数组语法:

四. 计算属性

案例一: firstName+lastName
案例二: books -> price

1.vscode快速新建html文件并快速生成代码——输入!后按Tab键即可
2.在vscode怎么运行html文件？
首先点击扩展
在这里插入图片描述
搜索open in browser

点击安装，完成之后点击设置

扩展设置

搜索open-in-browser
填入Chrome

完成之后关闭vscode重启

右键点击Open inDefault Browser即可

3.v-for的使用

在控制台添加movies的数据

4.vscode注释快捷键
vscode注释的快捷键：“Ctrl + /”和“Alt+Shift+A”。vscode中进行注释的方法：1、单行注释，使用“Ctrl + /”，或者先按“CTRL+K”，再按“CTRL+U”；2、块注释，使用“Alt+Shift+A”。
5.v-on:click（语法糖:@click）/methods
在这里插入图片描述
6.MVVM

在这里插入图片描述
7.创建Vue实例传入的options

8.箭头函数

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(function(element) {
  return element.length;
}); // 返回数组：[8, 6, 7, 9]

// 上面的普通函数可以改写成如下的箭头函数
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数只有一个参数时，可以省略参数的圆括号
elements.map(element => {
 return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length); // [8, 6, 7, 9]

// 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构
// 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，
// 可以替换成任意合法的变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

9.Vue生命周期
在这里插入图片描述

*注意：
不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
在这里插入图片描述
10.插值操作-Mustache语法

在这里插入图片描述
11.插值操作-v-once指令的使用

该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变
12.插值操作-v-html指令的使用
在这里插入图片描述

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码
如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。
如果我们希望解析出HTML展示
可以使用v-html指令
该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染
13.插值操作-v-text指令的使用
在这里插入图片描述

v-text作用和Mustache比较相似：都是用于将数据显示在界面中,v-text会替换原本标签内的内容
v-text通常情况下，接受一个string类型

14.插值操作-v-pre指令的使用
在这里插入图片描述
v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

15.插值操作-v-cloak指令的使用

刚刷新网页时：

一秒后：

v-cloak可以通过设置style来设定在该div没被加载出来前显示的样式

15.动态绑定属性-v-bind的基本使用
在这里插入图片描述

v-bind语法糖(😃
v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)
在开发中，有哪些属性需要动态进行绑定呢？
还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
比如通过Vue实例中的data绑定元素的src和href

16.动态绑定属性-v-bind动态绑定class1
在这里插入图片描述

拓展：通过按钮改变style

17.动态绑定属性-v-bind动态绑定class2
通过绑定函数传入,方便管理

18.动态绑定属性-v-bind动态绑定class(数组语法)
在这里插入图片描述
19.作业（v-on和v-bind结合）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head> 
<script src="../../vue.js"></script>
<style>
  .change{
    color: red;
  }
</style>

<body>
  <!-- 作业需求：点击列表中的哪一项，那么该选项的文字变成红色 -->
<div id="app">
  <ul>
    <li v-for="(m,index) in movies"><a v-bind:class="getClass(index)" href="#" v-on:click="press(index)">{{index}}-{{m}}</a></li>
  </ul> 
</div>
</body>
<script>
    
    let app = new Vue({
        el:'#app',
        data:{
            movies:['海王','海尔兄弟','火影忍者','进击的巨人'],
            change:'change',
            NowIndex:-1,
        },
        methods: {
         press:function(index){
           this.NowIndex = index; 
         },
        
         getClass:function(index){
            if(this.NowIndex == index){
              return{
                change:true,
              }
            }else{
              return{
                change:false,
              }
            }
         }
        },
  
    })
</script>
</html>

在这里插入图片描述

20.动态绑定属性-v-bind动态绑定style（对象语法）

在这里插入图片描述

20.动态绑定属性-v-bind动态绑定style（数组语法）

21.计算属性的基本使用
在这里插入图片描述

22.计算属性的复杂使用
计算数组中的对象

秃头大学生破晓

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue学习day01（vscode）

1.vscode快速新建html文件并快速生成代码——输入!后按Tab键即可2.在vscode怎么运行html文件？首先点击扩展搜索open in browser点击安装，完成之后点击设置扩展设置搜索open-in-browser填入Chrome完成之后关闭vscode重启右键点击Open inDefault Browser即可3.v-for的使用在控制台添加movies的数据4.vscode注释快捷键vscode注释的快捷键：“Ctrl + /”和“Alt+
复制链接

扫一扫