Vue基础实例

Vue引用

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

01.数据绑定{{ }}

想把文字在页面中显示
1.先定义一个data对象(必须叫data)，data就相当于一个数据库
2.data里面有一个对象叫message，当然也可以叫别的
3.获取message的值{{message}}
4.id的值必须跟el的值对应
5.引用必须放在id的这个div内

DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <title>数据绑定title>
head>
<body>
<div id="app">
  {{ message }}
div>

<script>
  var app = new Vue({
    el: "#app",
    data:{
      message: 'Hello Vue!'
    }
  })
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

在这里插入图片描述

02.动态绑定v-bind

鼠标移动到内容上时，显示页面加载时间
1.new Date().toLocaleString()
根据本地时间把 Date 对象转换为字符串
2.v-bind:title
把所在的元素的 title的值和message这个属性值绑定在一起

DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <title>动态绑定title>
head>
<body>

<div id="app">
  <span v-bind:title="message">
    鼠标悬停几秒钟，查看此处动态绑定的提示信息！
  span>
div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '页面加载于' + new Date().toLocaleString()
    }
  })
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

在这里插入图片描述

03.双向数据绑定v-model

message数据显示在了p标签，input输入内容后，直接改变message，同时改变p标签

DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <title>双向数据绑定title>
head>
<body>

<div id="app">
  <p>{{ message }}p>
  <input v-model="message">
div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
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

在这里插入图片描述

04.条件渲染v-if

如果满足条件就显示，否则就不显示

DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <title>条件渲染title>
head>
<body>

<div id="app">
  <p v-if="active === 0">{{active}}等于0p>
  <p v-else-if="active > 0">{{active}}大于0p>
  <p v-else="active < 0">{{active}}小于0p>
div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      active: 10
    }
  })
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

在这里插入图片描述

05.循环遍历(迭代)v-for

数组里面的每一项叫item，当然也可以叫别的名词，i，j，都可以，但items必须要与你需要遍历的对象名对应上，就是date里面的对象。
其实还可以遍历下标，index就是下标，当然也可以叫别的名词，i，j，都可以。

05.1普通数组遍历(迭代)

<div id="app">
  
  <p v-for="item in items">{{item}}p>
  
  <p v-for="(item, index) in items">{{index}}-------{{item}}p>
div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      items:[1,2,3,4,5,6,7,8]
    }
  })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述

05.2对象数组遍历(迭代)

遍历users对象，
user就相当于其中一项，
index就相当于其中一项的下标，
user.id就相当于其中一项的id的值，
user.name就相当于其中一项的name的值。

<div id="app">

  <p v-for="(user, index) in users">{{index}}，id：{{user.id}}，姓名：{{user.name}}p>
div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      users:[
        {id:1,name:"张三"},
        {id:2,name:"李四"},
        {id:3,name:"王五"},
        {id:4,name:"赵六"},
      ]
    }
  })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

05.3对象遍历(迭代)

遍历student对象，
index就相当于其中一项的下标，
value就相当于id，name，sex，age，class，result，
key就相当于1，张三，男，25，3年2班，100，

<div id="app">

  <p v-for="(value, key, index) in student">{{index}}，{{key}}：{{value}}p>
div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      student: {
        id: '1',
        name: '张三',
        sex: '男',
        age: 25,
        group: '3年2班',
        result: 100
      }
    }
  })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

05.4数字遍历(迭代)

<div id="app">

  <p v-for="count in 9">这是第{{count}}次循环p>
div>
1
2
3
4

在这里插入图片描述

06.按钮点击事件v-on

按钮点击事件v-on:click，简写@click
执行的动作写在methods下面，this.msg就相当于改变data里面的msg

DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <title>翻转字符串title>
head>
<body>

<div id="app">
  <p>{{ msg }}p>
  <button @click="reverseMsg">翻转字符串button>
div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      msg: 'Hello Vue.js!'
    },
    methods: {
      reverseMsg: function () {
        this.msg = this.msg.split('').reverse().join('')
      }
    }
  })
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

在这里插入图片描述

07.组件component

定义组件的目的是一次封装，多次使用
使用方法：Vue.component(tagName, options)
tagName为组件名，options为配置选项。
在这里插入图片描述

07.1全局组件

所有实例都能用
组件名：diy，组件内容都写在templates里
然后在div里面就可以引用模板了

DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <title>组件title>
head>
<body>

<div id="app">
  <diy>diy>
div>

<script>
  //全局组件
  Vue.component('diy', {
    template: '自定义组件！
'
  })

  var app = new Vue({
    el: '#app'
  })
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

07.2局部组件

只能在当前实例使用
定义了两个实例app和ppa，
app实例下有一个diy组件，
ppa实例下有一个yid组件，
在div里可以看出
app实例想要引入yid子组件是无法引入的，同样
ppa实例想要引入diy子组件是无法引入的。

DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <title>局部组件title>
head>
<body>

<div id="app">
  <diy>diy>
  <yid>yid>
div>
<hr>
<div id="ppa">
  <diy>diy>
  <yid>yid>
div>

<script>
  //3.定义app子组件
  var Diy = {
    template:'app实例
子组件diy
\''
  }
  //3.定义ppa子组件
  var Yid = {
    template:'ppa实例
子组件yid
'
  }
  //1.实例1
  var app = new Vue({
    el: '#app',
    //2.实例1的组件
    components:{
      'diy': Diy
    }
  })
  //4.实例2
  var ppa = new Vue({
    el: '#ppa',
    //5.实例2的组件
    components:{
      'yid': Yid
    }
  })
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
40
41
42
43
44
45
46
47
48

在这里插入图片描述

07.3组件props

props是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

在app实例里面有一个全局组件diy，组件的template内通过props属性msg，name进行了双向绑定。
这样的好处是：不用对子组件进行修改，就可以将数据传递给子组件。

DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <title>组件propstitle>
head>
<body>

<div id="app">
  <diy msg="Hello," name="Vue!">diy>
div>

<script>
  //全局组件
  Vue.component('diy',{
    props:['msg','name'],
    template:'{{msg}}{{name}}
'
  })
  //根实例
  var app = new Vue({
    el: '#app'
  })
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

在这里插入图片描述

07.4动态props

感觉有点像双向绑定啊
v-model的数据改变了data，v-bind通过props显示出来，v-bind通过props属性显示了data中的数据
注意：props是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <title>动态propstitle>
head>
<body>

<div id="app">
  <input v-model="parentMsg">
  <input v-model="parentName">
  <diy v-bind:msg="parentMsg">diy>
  <diy v-bind:name="parentName">diy>
div>

<script>
  //注册全局组件
  Vue.component('diy',{
    props:['msg','name'],
    template:'{{msg}}{{name}}
'
  })
  //根实例
  var app = new Vue({
    el: '#app',
    data:{
      parentMsg:'父组件Msg',
      parentName:'父组件Name'
    }
  })
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

在这里插入图片描述

07.5props遍历实例

v-for负责遍历websites每一项（遍历data里面websites的每一项），v-bind通过props传递绑定项，v-bind:web="item"。
所以template里面要写web.site，web.url。
引用组件要写组件名web-list。

DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <title>遍历实例propstitle>
head>
<body>

<div id="app">
<ol>
  <web-list v-for="item in websites" v-bind:web="item">web-list>
ol>
div>

<script>
  //全局组件
  Vue.component('web-list',{
    props: ['web'],
    template: '{{web.site}}
{{web.url}}
'
  })
  //根实例
  var app = new Vue({
    el: '#app',
    data:{
     websites:[
       {site:'百度',url:'https://www.baidu.com'},
       {site:'腾讯',url:'https://www.qq.com'},
       {site:'B站',url:'https://www.bilibili.com'}
     ]
    }
  })
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

在这里插入图片描述

相关阅读:
Linux进程终止
 【从头构筑C#知识体系】1.1 类
 CesiumJS 2022^ 原理[2] 渲染架构之 Primitive - 创建并执行指令
 servlet的生命周期
 新电脑配置前端环境
 体验昇腾Ascend C 编程语言极简易用的算子开发
 如何解決開機後出現BitLocker修復畫面/取得BitLocker金鑰
 haddop shuffle最详细的解释
 树状数组逆序对
 【云原生Kubernetes系列第二篇】Kubernetes（k8s）核心组件（对的人兜兜转转最后还是会遇见）
原文地址：https://blog.csdn.net/weixin_45853406/article/details/126527352