VUE快速入门-1

VUE基础

官方文档 https://cn.vuejs.org/v2/guide/

第一个vue程序

导入开发版本的vue.js
创建vue实例对象，设置el属性和data属性
使用模板语法把数据渲染到页面上

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue基础title>
head>

<body>
  <div id="app">
    {{ message }} 
  div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  <script>
    var app = new Vue({
      el:"#app", //id选择器
      data:{
        message:" 你好 小ddddddd黑! "
      }
    })
  script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

el:挂载点

Vue实例的作用范围是什么呢？

Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器？

可以使用其他的选择器,但是建议使用ID选择器

是否可以设置其他的dom元素呢？

可以使用其他的双标签,不能使用HTML和BODY

data:数据对象

Vue中用到的数据定义在data中

data中可以写复杂类型的数据

渲染复杂类型数据时,遵守js的语法即可

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>data:数据对象title>
head>

<body>
    <div id="app">
        {{ message }}
        <h2> {{ school.name }} {{ school.mobile }}h2>
        <ul>
            <li>{{ campus[0] }}li>
            <li>{{ campus[3] }}li>
        ul>
    div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好 小黑!",
                school:{
                    name:"黑马程序员",
                    mobile:"400-618-9090"
                },
                campus:["北京校区","上海校区","广州校区","深圳校区"]
            }
        })
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在这里插入图片描述

vue指令

v-text

设置标签的文本值(textContent)

v-text指令的作用是:设置标签的内容(textContent)

默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容

内部支持写表达式

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-text指令title>
head>

<body>
    <div id="app">
        <h2 v-text="message+'!'">深圳h2>  
        <h2 v-text="info+'!'">深圳h2>
        <h2>{{ message +'!'}}深圳h2>
    div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员",
                info:"前端与移动教研部"
            }
        })
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在这里插入图片描述

v-html

v-html指令的作用是:设置元素的innerHTML

内容中有html结构会被解析为标签

v-text指令无论内容是什么,只会解析为文本

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-html指令title>
head>

<body>
    <div id="app">
        <p v-html="content">p>
        <p v-text="content">p>
    div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                content:"黑马程序员"
            }
        })
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

v-on

v-on指令的作用是:为元素绑定事件

海康DS-19A00-BN(G)快速入门手册

PDF

0星超过10%的资源 2.18MB

下载

事件名不需要写on

指令可以简写为@

绑定的方法定义在methods属性中

方法内部通过this关键字可以访问定义在data中数据

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-html指令title>
head>

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click ="doit">
        <input type="button" value="v-on指令@" @click ="doit">
        <input type="button" value="v-on指令双击" @dblclick ="doit">
        <h2 @click="change">{{content}}h2>
    div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doit:function(){
                    alert("哈哈哈哈")
                },
                change:function(){
                    this.content+="你好！"
                }
            },
            data:{
                content:"黑马程序员"
            }

        })
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

在这里插入图片描述

案例：计数器

在这里插入图片描述

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Documenttitle>
    <style>
      #app {
        width: 480px;
        height: 100px;
        margin: 200px auto;
      }
      .input-num {
        margin-top: 20px;
        height: 100%;
        display: flex;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 4px black;
      }
      .input-num button {
        width: 150px;
        height: 100%;
        font-size: 40px;
        color: gray;
        cursor: pointer;
        border: none;
        outline: none;
      }
      .input-num span {
        height: 100%;
        font-size: 40px;
        flex: 1;
        text-align: center;
        line-height: 100px;
      }
    style>
  head>
  <body>
    <div id="app">
      
      <div class="input-num">
        <button @click="sub">-button>
        <span>{{num}}span>
        <button @click="add">+button>
      div>
    div>
  body>
html>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

<script>
  // 创建Vue实例
  var app = new Vue({
    el: "#app",
    data: {
      num: 1
    },
    methods: {
      add: function() {
        if(this.num>9){
            alert("已经最大");
            return;
        }
        this.num++;
      },
      sub: function() {
        if(this.num<1){
            alert("已经最小");
            return;
        }
        console.log(this.num)
        this.num--;
      }
    }
  });
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

源码下载

相关阅读:
让生活更加精致的APP？
安卓和ios设置自己的短链
PDF格式转换为翻页电子书，这种形式太酷辣！
国辰智企MES系统优化企业管理，让生产制造更高效
【LeetCode每日一题】【递归/位运算】2022-10-20 779. 第K个语法符号 Java实现
input,textarea隐藏边框
传统行业 CRUD 六年，疫情期间备战一个月，三面阿里巴巴定级 P7
React 为什么使用map来渲染列表而不是其他循环方法
clickhouse学习笔记05
11、【Qlib】【主要组件】元控制器:元任务、元数据集和元模型

原文地址：https://blog.csdn.net/weixin_44064908/article/details/126202162