Vue基础学习（1）列表显示，案例：计数器，MVVM，创建Vue实例传入的options，v-html，v-once指令，v-text,v-bind绑定class，v-bind绑定Style,

编程语言 2022-04-20 01:49:29 阅读次数: 0

邂逅Vue.js

为什么学习Vue.js?

Vue,biew不要读错
Vue是渐进式框架，渐进式，Vue作为应用的一部分，交互体验，
Vue包括了很多的高级功能，可复用组件，前端路由技术，状态管理，虚拟DOM，解耦视图和数据,渐进式框架

<!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>
    // let(变量)/const(常量)
    // 编程范式: 声明式编程
    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>

let(变量)const定义常量
let变量const
const app=new Vue({el:’#app’,
data:{message:‘你好啊,李银河’}});
元素js的做法：编程范式：命令式编程
阶段一：计算机专业的一名大学生
高等数据/离散数据/数据结构/C/Java/C#等

阶段二：公司做开发（Java/Android／iOS／Web / Python）
智慧杭州、新浪好声音、新浪秀场等等

阶段三：加入IT培训行业

在这里插入图片描述
认识Vuejs
为什么学习Vuejs
简单认识一下Vuejs
Vuejs安装方式
CDN引入
下载和引入
NPM安装管理
Vuejs初体验
Hello Vuejs
Vue列表展示
案例：计数器
Vuejs的MVVM
Vue中的MVVM

为什么学习Vuejs？

我相信每个人学习Vue的目的是各部相同的。
可能你的公司正要将原有的项目使用Vue进行重构。
也可能是你的公司新项目决定使用Vue的技术栈。
当然，如果你现在正在换工作，你会发现招聘前端的需求中，10个有8个都对Vue有或多或少的要求。
当然，作为学习者我们知道Vuejs目前非常火，可以说是前端必备的一个技能。

在这里插入图片描述

简单认识一下Vuejs

Vue (读音 /vjuː/，类似于 view)，不要读错。
Vue是一个渐进式的框架，什么是渐进式的呢？
渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
Vue有很多特点和Web开发中常见的高级功能
解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM
这些特点，你不需要一个个去记住，我们在后面的学习和开发中都会慢慢体会到的，一些技术点我也会在后面进行讲解。
学习Vuejs的前提？
从零学习Vue开发，并不需要你具备其他类似于Angular、React，甚至是jQuery的经验。
但是你需要具备一定的HTML、CSS、JavaScript基础。

Vue.js安装

使用一个框架，我们第一步要做什么呢？安装下载它
安装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的使用，我们使用该方式。

Hello Vuejs
我们来做我们的第一个Vue程序，体验一下Vue的响应式
代码做了什么事情？
我们来阅读JavaScript代码，会发现创建了一个Vue对象。
创建Vue对象的时候，传入了一些options：{}
{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
{}中包含了data属性：该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的，比如像上面这样。
也可能是来自网络，从服务器加载的。
浏览器执行代码的流程：
执行到10~13行代码显然出对应的HTML
执行第16行代码创建Vue实例，并且对原HTML进行解析和修改。
并且，目前我们的代码是可以做到响应式的。

将修改后的数据在这里插入图片描述
响应式代码
{}当中包含了el属性，该属性决定了这个Vue对象挂载到了哪一个对象上
let app=new Vue){el:’#app’,data:{name:‘VueJs’}})

Vue列表显示

现在，我们来展示一个更加复杂的数据：数据列表。
比如我们现在从服务器请求过来一个列表
希望展示到HTML中。
HTML代码中，使用v-for指令
该指令我们后面会详细讲解，这里先学会使用。
是不是变得So Easy，我们再也不需要在JavaScript代码中完成DOM的拼接相关操作了
而且，更重要的是，它还是响应式的。
也就是说，当我们数组中的数据发生改变时，界面会自动改变。
依然让我们打开开发者模式的console，来试一下

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

</body>
</html>

v-for指令，该指令我们后面会详细讲解
…/js/vue.js
const app=new Vue({
el:’’,

案例：计数器

现在，我们来实现一个小的计数器
点击 + 计数器+1
点击 - 计数器 -1
这里，我们又要使用新的指令和属性了
新的属性：methods，该属性用于在Vue对象中定义方法。
新的指令：@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)
你可能会疑惑？
这些@click是什么东西？
Vue对象中又是定义el/data/methods，到底都有哪些东西可以定义，以及它们的作用是什么？
这些疑惑在后续学习中都会一一解开。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

</body>
</html>

Vue中的MVVM

什么是MVVM呢？
通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科)
https://zh.wikipedia.org/wiki/MVVM
维基百科的官方解释，我们这里不再赘述。
我们直接来看Vue的MVVM
View层：
视图层
在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。
Model层：
数据层
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
VueModel层：
视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
在这里插入图片描述
Model层：数据层，
View

计数器的MVVM

计数器的MVVM
我们的计数器中就有严格的MVVM思想
View依然是我们的DOM
Model就是我们我们抽离出来的obj
ViewModel就是我们创建的Vue对象实例
它们之间如何工作呢？
首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。
有了Vue帮助我们完成VueModel层的任务，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作了。

创建Vue实例传入的options

你会发现，我们在创建Vue实例的时候，传入了一个对象options。
这个options中可以包含哪些选项呢？
详细解析： https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
目前掌握这些选项：
el:
类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。
data:
类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。
methods:
类型：{ [key: string]: Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

el:string|HTMLElement决定之后的Vue实例
data:Object|Function()
const app=new Vue({
el:’#app’,
dtata:obj

Vue的生命周期

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
生命周期：事物从诞生到消亡的整个过程。
const app=new Vue({
el:’#app’,
data:obj,
methods：{},
created:function(){console.log(’},
mounted:function(){}})
mounted:function(){}
callHook(vm,);
created:function(){
生命周期

模板语法

created:function(){console.log(‘creaetd’);}
const app=new Vue({
el:’#app’,
button v-on="

Mustache

如何将data中的文本数据，插入到HTML中呢？
我们已经学习过了，可以通过Mustache语法(也就是双大括号)。
Mustache: 胡子/胡须.
我们可以像下面这样来使用，并且数据是响应式的
在这里插入图片描述
const app=new Vue({
el:’#app’,
data:{
message：‘nihaoa’,
代码规范：缩进4个空格，2个空格
vm._isVue
Mustache,Mustache,Mustache胡子/胡须
{ {firstName}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
  {
    
    {
    
    message}}
</div>

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

</body>
</html>

v-once

但是，在某些情况下，我们可能不希望界面随意的跟随改变
这个时候，我们就可以使用一个Vue的指令
v-once:
该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。
代码如下：

在这里插入图片描述
在这里插入图片描述
发生改变的时候不想跟着一起变化

v-html

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

在这里插入图片描述
const app=new Vue({
el:’#app’,
data:{
message:‘你好啊’,
url:‘http://www.baidu.com’
}})

Mustache的语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</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>

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

</body>
</html>

02-v-once指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

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

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

</body>
</html>

03–vhtml指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

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

</body>
</html>

04-v-text指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

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

</body>
</html>

h2 v-html=“url”

v-text

v-text作用和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型
在这里插入图片描述
在这里插入图片描述

v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
比如下面的代码：
第一个h2元素中的内容会被编译解析出来对应的内容
第二个h2元素中会直接显示{ {message}}
跳过这个元素和他子元素的编译过程，用于显示原本的Mustache语法
第一个h2元素当中的内容会被编译解析出来对应的内容

在这里插入图片描述
在这里插入图片描述
const app=new Vue

v-cloak

在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。
cloak: 斗篷
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

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

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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>

</body>
</html>

解析html代码的时候从上往下解析
默认先把message先渲染出来，
v-clock原先有这个指令的，一旦Vue被解析
v-cloak
v-cloak:
【v-clock]{display:none;}
v-once
但是，在某些情况下，我们可能不希望界面随意的跟随改变
这个时候，我们就可以使用一个Vue的指令
v-once:
该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。
代码如下：

我们不希望界面随意的跟随改变，后面不需要跟任何表达式，该指令标识元素和组件只渲染一次，不会随着数据的改变而改变
在这里插入图片描述
在这里插入图片描述

v-bind介绍

前面我们学习的指令主要作用是将值插入到我们模板的内容当中。
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
比如动态绑定a元素的href属性
比如动态绑定img元素的src属性
这个时候，我们可以使用v-bind指令：
作用：动态绑定属性
缩写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)

下面，我们就具体来学习v-bind的使用。
v-bind基础
v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)
v-bind用于绑定一个或者多个属性值，或者向另一个组件传递props值，这个学到组件再价绍
在开发中，有哪些属性需要动态进行绑定呢？
还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
比如通过Vue实例中的data绑定元素的src和href，代码如下：
在这里插入图片描述
在这里插入图片描述
img src="" alt=""
v-bind
动态决定的，动态绑定属性
any(with argument)|Obejct
v-bind
重新创建文件加，动态绑定属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

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

</body>
</html>

错误做法不可以使用mustache语法，正确做法：使用v-bind指令
img v-bind:src="" alt=""
v-bind:src=“imgURL”
v-bind:src=“imgURL”
const app=new Vue({
el:’#app’,
img v-bind
img v-bind:src=“imgURL” alt=""
a href="">百度以下
const app=new
v-bind:href=“aHref”
v-bind:href=“aHref”
v-bind:冒号，语法糖， img :src=“imgURL” alt=""
app.isActive=true;
app.isActive=false;

v-bind语法糖

v-bind有一个对应的语法糖，也就是简写方式
在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。
简写方式如下：
在这里插入图片描述

v-bind绑定class（一）

methods:{btnClick:function(){this.isActive=!this.isActive},
getClasses：function(){return {active:this.isActive,}
h2 class=“title:class=”[‘active’,‘line’]"
message:‘你好啊’,
active:‘aaaaa’,
line:‘bbbb’}})
methods:{
getClasses:function(){return[this.active,this.line]}
getClasses:function(){return[thisactive,this.line]}

<!DOCTYPE html>
<html lang="en">
<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>-->
  <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>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

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

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--作业需求: 点击列表中的哪一项, 那么该项的文字变成红色-->
<div id="app">
  <ul>
    <!--<li v-for="m in movies">{
    
    {
    
    m}}</li>-->
    <li v-for="(m, index) in movies">{
    
    {
    
    index}}-{
    
    {
    
    m}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    
    
    el: '#app',
    data: {
    
    
      movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人']
    }
  })
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

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

</body>
</html>

很多时候，我们希望动态的来切换class，比如：
当数据为某个状态时，字体显示红色。
当数据另一个状态时，字体显示黑色。
绑定class有两种方式：
对象语法
数组语法

v-bind绑定class（二）

绑定方式：对象语法
对象语法的含义是:class后面跟的是一个对象。
对象语法有下面这些用法：

用法一：直接通过{
    
    }绑定一个类
<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>

v-bind绑定class（三）

绑定方式：数组语法
数组语法的含义是:class后面跟的是一个数组。
数组语法有下面这些用法：

用法一：直接通过{
    
    }绑定一个类
<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>

v-bind绑定style（一）

我们可以利用v-bind:style来绑定一些CSS内联样式。
在写CSS属性名的时候，比如font-size
我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’
绑定class有两种方式：
对象语法
数组语法

组件化的思想，单独封装成一个组件，一个文件当中.vue当中，,navbar.vue
li v-for="(m,index） in movies">
nav-bar bgc=“white”
nav-bar :style
对象语法，数组语法，

v-bind绑定style（二）

绑定方式一：对象语法

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

绑定方式二：数组语法

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

methods:{getStyle:function(){return {fontSize:this.finalSzie:‘px’,backgroundColor:this.finalColor;}

04-计算属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</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: 'Lebron',
      lastName: 'James'
    },
    // computed: 计算属性()
    computed: {
    
    
      fullName: function () {
    
    
        return this.firstName + ' ' + this.lastName
      }
    },
    methods: {
    
    
      getFullName() {
    
    
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</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: 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>

const app=new Vue(【
el:’#app’,
data；{forstName:‘Lebron’,
lastName:‘James’}});
div id=“app”
h2>{ {firstName+’’+lastName}}

猜你喜欢

转载自blog.csdn.net/weixin_43428283/article/details/124207587
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022