class vue 添加图片_Vue学习01

• 介绍

• 安装

• 基本使用

  • data

  • methods

  • v-once

  • v-html

• 属性绑定

  • v-bind

• Style和class属性绑定

  • class绑定

  • style绑定

• 表达式和语句

  • 示例

• 条件判断

  • 示例

介绍

Vue是一套用于构建前后端分离的框架。由中国尤雨溪开发，是一套优秀的前端框架。

安装

有三种安装方式

• 通过script标签引用
• 通过npm进行安装
• 通过vue-cli进行安装

由于目前是处于基础阶段，那么我建议使用第一种或第三种安装方式

# 开发环境

# 或者是指定版本号

# 或者是下载代码保存到本地



# 生产环境，使用压缩后的文件

基本使用

data

使用Vue，首先创建一个Vue对象，在这个对象中el传递参数，el的全称是element(元素)。用来找一个给Vue渲染的根元素。并且我们可以传递一个data参数，data中的所有值都可以直接在根元素下使用{{...}}来使用。示例代码如下：

<div id="app">
    <p>{{username}}p>
div>
<script>let vm = new Vue({el: "#app",data: {"username": "子午"
        }
    });script>

注意：

• data中的数据只能在Vue的根元素下使用，在其他地方不能被vue所识别渲染

methods

在vue中对象可以添加elements，这个属性专门用来存储自己的函数。存储的函数也可以在标签中使用。并且methods中的函数访问data中的值，只需要通过this.属性名就可以访问到了，不需要额外的添加this.data.属性名

<div id='app'>
<p>{{username}}p>
<p>{{greet()}}p>
div>
<script>new Vue({el: '#app',data: {username: "子午"
  },methods: {
    greet() {return '你好世界' + this.username
    }
  }
})script>

v-once

第一次渲染完成后，不会跟着后期数据的更改而更改

{{username}}


"username='0026'">修改


v-html

读取变量的时候，不会当做普通的字符串，而是当做HTML元素进行解析

<div id="app">
    <div v-html="code">div>
div>
<script>let vm = new Vue({el: "#app",data: {"code": "百度一下，马上转到！"
        }
    });script>

属性绑定

v-bind

在html标签的属性上，如果想要读取vue.data中的属性，那么需要使用v-bind指令

  <div id="app">
 
    
    <img v-bind:src="logo" alt="">
  div>

  <script>new Vue({el: '#app',data: {logo:'https://cn.vuejs.org/images/logo.png'
      }
    })script>

Style和class属性绑定

class绑定

1. 通过数组的方式实现

   <div id='app'>
       <p :class="[pclass1,pclass2]">道可道，非常道p>
   div>
   <script>new Vue({el: '#app',data: {pclass1: 'title',pclass2: 'main-title'
           }
       })script>
   

2. 通过对象的方式实现

   <div id='app'>
       <p :class="{title:true,'main-title':strong}">子午p>
       <button @click="strong='true'">点击更改button>
   div>
   <script>new Vue({el: '#app',data: {pclass1: 'title',pclass2: 'main-title',strong: false
           }
       })script>
   

style绑定

1. 通过数组
   'app'>

   "[pStyle1,pStyle2]">道可道，非常道

   


2. 通过对象

   <div id='app'>
       <p :style="{'background-color':backgroundColor}">道可道，非常道p>
   div>
   <script>new Vue({el: '#app',data: {backgroundColor: 'red',
           }
       })script>
   

表达式和语句

JavaScript中的表达式和语句是有区别的，一个表达式会产生一个值，它可以放在任何需要一个值的地方，比如作为函数调用的参数：

3 + x
my var

语句可以理解成一个行为，循环语句和if语句就是典型的语句。

示例

在属性绑定和变量读取中。可以使用表达式。常见的表达式有：变量读取，变量运算，三目运算符，函数调用，取反等。

<div id='app'>
    
    <div :style="{color:danger?'red':'block'}">{{message.split(' ').reverse().join(' ')}}div>
    <p>{{greet()}}p>
    <p>{{!isAdult}}p>
div>
<script>new Vue({el: '#app',data: {'danger': true,message: 'hello world hello china',isAdult: true
        },methods: {
            greet() {return '子午'
            }
        }
    })script>

条件判断

• v-if , v-else, v-else-if
• 如果想要在某个条件下渲染多个元素，那么可以使用templates标签
• vue默认情况下会重用相同的标签来提高性能，有时候我们不需要它重用，那么可以在不需要重用的标签上添加key属性，不同的key就不会被重用。

示例

1. 判断年龄

<div id='app'>
    <p v-if='weather=="sun"'>去公园p>
    <p v-else-if='weather=="rain"'>看电影p>
    <p v-else>在家p>

    <template v-if='age<18'>
        <p>小于18p>
    template>
    <template v-else-if='age>18 && age<=22'>
        <p>18~22之间哦p>
    template>
    <template v-else='age>22'>
        <p>大于22p>
    template>
div>
<script>new Vue({el: '#app',data: {weather: 'sun',age: 20
        }
    })script>

2. 切换登录

<div id='app'>
    <template v-if='loginType=="username"'>
        <label for="">用户名label>
        <input type="text" name="username" placeholder="用户名" key="username">
    template>
    <template v-else-if='loginType=="email"'>
        <label for="">邮箱label>
        <input type="text" name="email" placeholder="邮箱" key="email">
    template>
    <button @click='changeLoginType'>切换登录button>
div>
<script>new Vue({el: '#app',data: {loginType: 'username'
        },methods: {
            changeLoginType() {this.loginType = this.loginType == 'username' ? 'email' : 'username'
            }
        }
    })script>

  文案   /    子午    责编  /   子午    技导  /   hy