【模板语法+数据绑定+el与data的两种写法+MVVM模型】

模板语法+数据绑定+el与data的两种写法+MVVM模型

1 模板语法
- 1.1 插值语法
- 1.2 指令语法
2 数据绑定
- 2.1 单向数据绑定
- 2.2 双向数据绑定
3 el与data的两种写法
4 MVVM模型

1 模板语法

1.1 插值语法

双大括号表达式
功能：用于解析标签体内容
语法：{{xxx}}，xxxx 会作为 js 表达式解析

1.2 指令语法

以 v- 开头
功能：解析标签属性、解析标签体内容、绑定事件
举例：v-bind:href = 'xxxx'，xxxx 会作为 js 表达式被解析
v-bind可简写为:
说明：Vue 中有有很多的指令，此处只是用 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>模板语法title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    {xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
			2.指令语法：
				功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
				举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
				备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
	-->

    
    <div id="root">
        <h1>插值语法h1>
        <h3>你好，{{name}}h3>
        <hr/>
        <h1>指令语法h1>
        
        
        
        <a v-bind:href="school.url">点我去{{school.name}}CSDN1a>
        <a :href="school.url">点我去{{school.name}}CSDN2a>
    div>
body>
<script>
    Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            name:'jack',
            school:{
                name:'小王',
                url:'https://blog.csdn.net/weixin_64875217?type=blog'
            }
        }
    })
script>
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
49
50

在这里插入图片描述

2 数据绑定

2.1 单向数据绑定

语法：v-bind:href ="xxx"或简写为:href
特点：数据只能从 data 流向页面

2.2 双向数据绑定

语法：v-model:value="xxx"或简写为v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data

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>数据绑定title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    

    
    <div id="root">
        
        单向数据绑定：<input type="text" v-bind:value="name"><br/>
        双向数据绑定：<input type="text" v-model:value="name"><br/>

        
        
        

        
        
    div>
body>
<script>
    Vue.config.productionTip = false // 阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            name:'小王'
        }
    })
script>
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

3 el与data的两种写法

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>el与data的两种写法title>
    
    <script src="../JS/vue.js">script>
head>
<body>
    

    
    <div id="root">
        <h1>您好，{{name}}h1>
    div>
body>
<script>
    Vue.config.productionTip = false // 阻止vue在启动时生成生产提示

    // el的两种写法
    /* const v = new Vue({
        // el: '#root', // 写法一
        data: {
            name:'小王'
        }
    })
    console.log(v);

    v.$mount('#root') // 写法二 */


    // data的两种写法
    new Vue({
        el: '#root',
        // data的第一种写法：对象式
        /* data: {
            name:'小王'
        } */

        // data的第二种写法：函数式
        data:function() {
            console.log('@@@',this); // 此处的this是Vue实例对象
            return{
                name:'小王'
            }
        }
    })
script>
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62

在这里插入图片描述

4 MVVM模型

M：模型(Model) ：对应 data 中的数据
V：视图(View) ：模板
VM：视图模型(ViewModel) ： Vue 实例对象

相关阅读:
【开源微服务项目】论如何在微服务中优雅的实现Redis序列化配置
 ubuntu18.04安装pcl1.9.1
zabbix部署，安装zabbix-agent监控linux和windows
压缩感知学习
 WPF Flyout风格动画消息弹出消息提示框
 聚合函数的知识
 Vue+nodejs服装库存管理系统-vscode前后端分离
 vue2踩坑之项目：Swiper轮播图使用
 SQLAlchemy使用教程
 .NET Conf China 2023 活动纪实抢先看
原文地址：https://blog.csdn.net/weixin_64875217/article/details/133437938