三、基础语法

最新推荐文章于 2022-05-05 15:06:20 发布
最新推荐文章于 2022-05-05 15:06:20 发布
阅读量196 收藏
点赞数
分类专栏： Vue2.*学习笔记 文章标签： vue 基础语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28238383/article/details/81155461
版权

一、创建第一个vue实例

1.引入vue.js

　　<script src="./vue.js"></script>

2.创建实例

　　a.通过el属性确定挂载点(即页面dom对象)
　　b.data属性设置数据

<head>
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
    <div id="root">{{name}}</div>
    <script>
    var vm = new Vue({
        el: '#root',
        data: {
        name: 'Schuyler'
        }
    });
    </script>
</body>

二、模板

1.模板内容是指挂载点内部的内容

　　<div id="root"><h1>hello {{msg}}</h1></div>

2.模板也可以放在实例的tamplate属性中，如

　　template: '<h1>hello {{msg}}</h1>'
此时不需要再在挂载点中读取数据

<div id="root"></div>
<script>
    new Vue({
        el: '#root',
        template: '<h1>{{msg}}</h1>',
        data: {
            msg: 'hello vue'
        }
    });
</script>

三、数据的使用

1.插值表达式{{}}：<div id="root">{{msg}}</div>

2.v-text属性：<div v-text="msg"></div> 会将msg中的标签转义为字符串

3.v-html属性：<div v-html="msg"></div>将msg中的标签当正常标签使用

<div id="root">
<div v-html="msg"></div>
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            msg: '<h1>hello vue</h1>'
        }
    });
</script>

四、方法与事件

　　vue中的方法写在实例的methods属性中，如

methods: {
    handleClick: function() {
        this.msg= "world"';
    }
}

　　事件的触发可以在标签中使用v-on属性来绑定，如

<div id="root" >
    <div v-on:click="handleClick">{{msg}}</div>
</div>

　　也可以用简略形式@click

<body>
<div id="root" >
    <div @click="handleClick">{{msg}}</div>
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            msg: 'hello vue'
        },
        methods: {
            handleClick: function() {
                this.msg= "world";
            }
        }
    });
</script>
</body>

五、属性绑定与双向数据绑定

　　可以通过v-bind指令进行属性的绑定，绑定后，属性的值相当于js的表达式，其对象为实例中data属性的值，v-bind:指令可简写为:
　　可以通过v-model指令进行双向数据绑定

<div id="root">
    <div :title="'标题:'+title">hello world</div>
        <input type="text" v-model="msg"/><br/>
        {{msg}}
    </div>
<script>
    new Vue({
        el: '#root',
        data: {
        msg: 'model',
        title: 'this is title'
        }
    });
</script>

六、计算属性与侦听器

　　1.通过在Vue实例中设置computed属性，来得到计算属性，computed属性的值是一个对象，对象中是一个返回计算值的函数。计算属性中有缓存的概念，经过第一次计算后，会将计算结果缓存起来，下次使用时，如果计算涉及的属性没有发生变化，就直接使用缓存的结果而不会再次进行计算，因此可以提高性能
　　在下面例子中可以看到，当第一次加载页面时控制台会打印出“经过一次计算”，然后刷新或者在控制台中输入vm.age = 27时，不会再打印，当输入vm.firstName = "ok"时则会再次打印

<body>
    <div id="root">
        {{fullName+" "+age}}
    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            data: {
                firstName: 'Schyler',
                lastName: 'Cai',
                age: 28
            },
            computed: {
                fullName: function () {
                    console.log("经过一次计算");
                    return this.firstName+" "+this.lastName;
                }
            }
        });
    </script>
</body>

　　此外，计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ，计算属性可以写成getter和setter的形式，当获取计算属性时会自动调用get方法，当给计算属性赋值时会自动调用set方法。在下述例子中，通过在控制台输入vm.fullName = "Cai Shunfeng"则可以对fullName进行赋值

<body>
    <div id="root">
        {{fullName+" "+age}}
    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            data: {
                firstName: 'Schyler',
                lastName: 'Cai',
                age: 28
            },
            computed: {
                fullName: {
                    get: function () {
                        return this.firstName+" "+this.lastName;
                    },
                    set: function (value) {
                        var arr = value.split(" ");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        });
    </script>

　　2.通过在Vue实例中设置watch属性来监听目标属性的变化，watch属性是一个object对象，其中定义了一个个函数，函数名是监听目标属性的名字

<div id="root">
    firstName:<input type="text" v-model="firstName"/>
    lastName:<input type="text" v-model="lastName"/>
    <br/>
    {{fullName}}
    <br/>
    {{count}}
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            firstName: '',
            lastName: '',
            count: 0
        },
        computed: {
            fullName: function(){
                return this.firstName+" "+this.lastName;
            }
        },
        watch: {
            fullName: function(){
                this.count ++;
            }
        }
    });
</script>

七、条件渲染

　　1.v-if：当值为true时才创建dom对象，false时会从dom树种删除该元素

<body>
    <div id="root">
        <div v-if="show == 'a'">A</div>
        <div v-else-if="show == 'b'">B</div>
        <div v-else>C</div>
    </div>
    <script>
        var vm =new Vue({
            el: '#root',
            data: {
                show: 'a'
            }
        }); 
    </script>
</body>

　　需要注意的是，在使用条件渲染的时候，vue会尽量复用已存在的元素来提升效率，因此会出现以下情况，如下例中，当你在输入框输入信息后，在浏览器控制台改变show的值为’b’时，会发现之前在输入框中输入过的值依然存在

<body>
    <div id="root">
        <div v-if="show == 'a'">a：<input/></div>
        <div v-else-if="show == 'b'">b：<input/></div>
    </div>
    <script>
        var vm =new Vue({
            el: '#root',
            data: {
                show: 'a'
            }
        }); 
    </script>
</body>

　　解决这个问题需要为input标签添加一个key属性，当vue检测到该标签有key属性且其值唯一时，就会知道这两个标签是不同的，就不会进行复用

<body>
    <div id="root">
        <div v-if="show == 'a'">a:<input key="InputA"/></div>
        <div v-else-if="show == 'b'">b:<input key="InputB"/></div>
    </div>
    <script>
        var vm =new Vue({
            el: '#root',
            data: {
                show: 'a'
            }
        }); 
    </script>
</body>

　　2.v-show：当值为true时显示dom值，false时会隐藏该元素，与v-if的区别在于当值为false时，标签元素已经渲染到页面了，只是隐藏起来

<div id="root">
    <div v-show="show">hello world</div>
    <button @click="handleClick">toggle</button>
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            show: true,
            list: [1,2,3]
        },
        methods: {
            handleClick: function() {
                this.show = !this.show;
            }
        }
    });
</script>

八、列表渲染

1.v-for

　　v-for：遍历对象，遍历时添加:key属性能提高遍历效率，但:key值要求不可重复，例如当遍历对象为数组arr = [1,2,3]时，可以写成

<ul>
    <li v-for="(item, index) of arr" :key="item">{{item}}<li>
<ul>

　　也可以利用遍历的index属性来作为:key的值，但会出现一些问题(自己查)，建议可以在后台返回的数组中的每个数据中加上唯一编号来作为key值

2.数组操作

　　在Vue中当需要对数组数据进行操作时，如果直接对数组对应的下标进行操作，即使数组的数据修改成功，vue也不会将修改后的数据同步渲染到页面中

<body>
    <div id="root">
        <ul>
            <li v-for="item of list">
                {{item}}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            data: {
                list: [
                    "Schuyler",
                    "Cai"
                ]
            }
        });
    </script>
</body>

　　在控制台中输入vm.list[1] = ['change']; 页面不会有变动

(1).想要将修改后的数组数据渲染到页面中，第一种方法是使用vue提供的数组变异方法
  • push()：增加一项数据
  • pop()：删除最后一项
  • shift()：删除第一项
  • unshift()：往数组第一项加入内容
  • splice(index, index, data)：数组接出及插入
  • sort()：数组排序
  • reverse()：数组取反
    在控制台中输入vm.list.pop()页面会进行渲染
(2)第二种方法是改变数组的引用，既是直接将一个新的数组赋值给目标数组，例如在控制台中执行：vm.list = ['Cai','Schuyler'];
(3).第三种方法是使用Vue提供的全局或实例set方法，例如在控制台中输入：
vm.$set(vm.list, 1, 'change');
Vue.set(vm.list, 1, 'change');

3.模板占位符template

　　在遍历时，我们可以使用template占位符，这样可以使template所在的标签不渲染到页面中，例如

<body>
    <div id="root">
        <ul>
            <div v-for="item of list">
                <li>{{item}}</li>
            </div>
            <template  v-for="item of list">
                <li>{{item}}</li>
            </template>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            data: {
                list: [
                    "Schuyler",
                    "Cai"
                ]
            }
        });
    </script>
</body>

　　代码中出现了两次遍历，而他们渲染到页面中的结果是

//前者
<div>
    <li>Schuyler</li>
</div>
<div>
    <li>Cai</li>
</div>
//后者
<li>Schuyler</li>
<li>Cai</li>

4.对象遍历

　　(1).在vue中对对象进行遍历时，可以使用三个遍历属性值，item、key、index，分别为对象的值、键、下标，当然这里只是为了形象分别用了这三个属性名，不是固定使用的属性名，只要使用的时候位置对应就可以了

<body>
    <div id="root">
        <ul>
            <li v-for="(item, key, index) of userInfo">
                {{item}}-----{{key}}-----{{index}}
            </li>
        </ul>
    </div>
    <script>
    var vm = new Vue({
            el: '#root',
            data: {
                userInfo: {
                    name: 'Schuyler',
                    age: 25,
                }
            }
        });
    </script>
</body>

　　(2).在对遍历的对象进行数据操作时，直接对对象已存在的属性的值进行修改，修改后的数据会同步渲染到页面上，如在控制台中：vm.userInfo.name = 'Cai'。但是如果想给对象新增一项属性时，需要使用Vue提供的全局或实例set方法，或者改变对象的引用才可以使数据同步渲染到页面中，例如在控制台中：

    vm.userInfo = { name = 'Schuyler', age: 25, sex: 'man'}
    vm.$set(vm.userInfo, 'address', 'ShangHai');
    Vue.set(vm.userInfo, 'address', 'Shanghai');

九、在vue实例之外操作vue实例的数据

　　有些时候需要在vue实例之外去操作vue实例中的数据，需要前缀 $，以便与用户定义的属性区分开来，例如设置定时器指定时间对数据进行操作，这时可以通过vueName.$data.target来对数据进行操作

<!DOCTYPE html>
<html>
<head>
    <title>vue</title>
    <meta charset="utf-8">
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        {{content}}
    </div>
    <script>
        var app = new Vue({
            el: "#root",
            data: {
                content: 'NO'
            }
        });
        setTimeout(function() {
            app.$data.content = 'OK';
        },2000);
    </script>
</body>
</html>
啤酒黑咖啡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python 入门学习与实践1-2
zjxfly的专栏
04-05 985
2.1　运行hello_world.py时发生的情况 运行hello_world.py时，Python都做了些什么呢？下面来深入研究一下。实际上，即便是运行简单的程序，Python所做的工作也相当多：hello_world.py print("Hello Python world!") 运行上述代码时，你将看到如下输出： Hello Python world! 运行文件hello_world...
2.3基础语法
qq_65461674的博客
05-30 1009
如果输入值小于 0 ，则丢弃当前像素，常用于判定范围（不仅仅针对 0，返回值为 void ）常用于测试 alpha，如果么个分量代表到平面的距离，还可以用力爱模拟剪切平面 sign(x) 返回x 的正负性，如果 x 小于 0 返回 -1，如果 x 等于 0 返回 0， 如果 x 大于0 返回 1。在渲染中有极大的用处，当我们渲染远景的时候并不希望使用最高的Mipmap来渲染，在开放世界，半开放世界中有极大的性能消耗，这时我们就需要使用他准备不同等级的 Mipmap 远处使用的越小，占用的性能就与小。
Python 学习：函数
Lailai同学的博客
05-05 754
Python 学习之函数的学习 一、简介 函数即带名字的代码块，主要用于完成具体的工作。当要执行函数定义的特定任务，可调用函数。需要在程序中多次执行同一项任务时，我们无需反复编写完成该任务的代码，只要调用执行该任务的函数就可以了。通过调用函数，可以简化整个程序的编写，修改，测试… 二、函数的定义 1.定义函数 """ 简单的hello_world()函数""" def hello_world(): print("Hello!") #打印 Hello！ hello_world() 这里展示了一个最简
【Linux】基础IO 知识点
ly_6699的博客
07-21 184
C文件 1. 写入文件 ... 6 FILE *fp=fopen("myfile","w"); ... 11 const char*msg="hello world!\n"; 12 int count=5; 13 while(count--) 14 { 15 fwrite(msg,strlen(msg),1,fp); ...
基础语法
cl66666666的博客
11-04 139
基础语法 注释 单行注释： // 多行注释： /* / 注意：多行注释里面不能嵌套使用 文档注释：文档注释以/* 开始，以 */ 结 /* java程序中最基本的组成单位是类 类的定义格式： public class 类名 { } 这是我定义的类 */ public class HelloWord{ /* 这是我定义的方法 main方法是程序的入口方法，代码的执行是从main方法开始的 */ public static void main(String[] rags){
python入门之基础语法学习笔记
12-20
在学习Python的基础语法时，有几个关键概念需要了解。 首先，关于Python的中文编码问题。在处理包含中文字符的Python文件时，由于Python默认使用ASCII编码，这可能导致在读取或打印汉字时出现错误。为了解决这个...
Python基础语法合集.pdf
06-06
这份文档资料主要涵盖了Python的基础语法，包括输入输出、变量命名规则、条件判断以及数据类型。 首先，让我们了解一下Python中的输入和输出。`print()`函数是用于输出信息到控制台的基本工具。它可以打印出括号内...
python基础语法合集68页.pdf
05-08
在实际编程中，了解这些基础知识是学习Python的第一步，它们构成了Python语法的核心，为后续的进阶学习和实际项目开发打下坚实基础。无论是初学者还是有经验的程序员，熟悉并掌握这些基本概念和用法都是至关重要的。
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
VHDL 基础语法篇.rar_VHDL 基础语法篇_VHDL语法_top down
09-19
VHDL 基础语法篇 —— VHDL VHDL硬件描述语言 1.1 VHDL概述 1.1.1 VHDL的特点 VHDL语言作为一种标准的硬件描述语言，具有结构严谨、描述能力强的特点，由于 VHDL语言来源于C、Fortran等计算机高级语言，在VHDL...
单片机资料c源码简单的数码管显示单片机资料c源码简单的数码管显示
08-30
单片机资料c源码简单的数码管显示单片机资料c源码简单的数码管显示提取方式是百度网盘分享地址
JESD22-A103E高温贮存寿命.pdf
08-30
JESD22-A103E高温贮存寿命
网络安全作业DNS爆破-DNSPoisoning.zip
08-30
网络安全作业DNS爆破-DNSPoisoning.zip
碳纤维瓶正压式空气呼吸器，全球前13强生产商排名及市场份额（by QYResearch）.docx
08-30
行业报告
mac 版本grafana 安装包
08-30
Grafana是一个开源的数据可视化工具，它被广泛用于大规模指标数据的可视化展现，特别是在网络架构和应用分析中，是时序数据展示的首选工具。Grafana通过其强大的功能，帮助用户更加直观地理解数据，提高数据分析效率。以下是Grafana的详细描述： 一、基本概述 定义：Grafana是一个跨平台的开源度量分析和可视化工具，支持通过采集的数据进行查询和可视化展示，并提供实时通知功能。 语言：Grafana是用Go语言编写的，这赋予了它高性能和可扩展性的特点。 用途：Grafana主要用于数据监控、分析和可视化，广泛应用于IT基础设施监控、应用程序性能监控、业务指标可视化等领域。 二、主要功能 数据可视化： Grafana支持多种图表类型，如折线图、柱状图、饼图、热图等，用于展示数据的不同维度。 用户可以通过拖放的方式在仪表盘中添加、组织和配置各种类型的图表和数据可视化元素，以便于同时监控多个指标。 数据源支持： Grafana支持与多种数据源集成，包括Graphite、Elasticsearch、InfluxDB、Prometheus、MySQL、PostgreSQL、Microsof
java项目之ssm基于Java Web的怀旧唱片售卖系统+vue源码.zip
08-30
基于Java Web的SSM框架结合Vue.js开发的怀旧唱片售卖系统是一个综合性的电子商务平台。该系统主要采用了以下技术： SSM框架：整合了Spring、Spring MVC和MyBatis三个框架，用于构建项目的后端服务。Spring负责业务对象管理，Spring MVC处理Web请求，MyBatis作为数据访问层框架，简化数据库操作。 Vue.js：一个用于构建用户界面的JavaScript框架，用于项目的前端开发，提供动态的用户界面和良好的用户体验。 MySQL数据库：作为后端数据存储解决方案，存储用户信息、唱片信息、订单数据等。 该系统具备以下功能模块： 用户管理：允许用户注册、登录，以及个人信息管理。 商品浏览：展示怀旧唱片的详细信息，包括封面、年代、艺术家等。 购物车功能：用户可以添加、删除购物车中的商品，以及修改商品数量。 订单管理：用户可以下单购买，查看订单状态和历史订单。 搜索功能：提供商品搜索功能，方便用户快速找到想要的唱片。 后台管理：管理员可以管理商品信息、订单信息和用户信息。
测试先行：C语言中的测试驱动开发（TDD）实践指南
08-30
C语言是一种通用的编程语言，由丹尼斯·里奇（Dennis Ritchie）在20世纪70年代早期于美国电话电报公司（AT&T）的贝尔实验室开发。C语言以其高效性、灵活性和可移植性而闻名，它是一种过程式编程语言，提供了对底层硬件的直接访问能力。 C语言的特点包括： 1. **简洁高效**：C语言的语法简洁，执行效率高，适合编写系统软件。 2. **接近硬件**：C语言提供了对内存地址和位操作的直接控制，使其非常适合硬件级编程。 3. **可移植性**：C语言编写的程序可以在不同的操作系统和硬件平台上编译和运行，具有很好的可移植性。 4. **丰富的库支持**：C语言拥有大量的标准库，如标准输入输出库（stdio.h）、数学库（math.h）等。 5. **结构化编程**：C语言支持结构化编程，允许使用循环、条件判断和函数等控制结构。 6. **指针**：C语言的指针功能强大，可以操作内存地址，实现复杂的数据结构和算法。 7. **编译型语言**：C语言是一种编译型语言，源代码需要通过编译器转换成机器码才能运行。 C语言广泛应用于操作系统（如Unix和Linux）、嵌入式系统、高性能
arm架构，redis镜像
08-30
arm架构，redis镜像
数据集格式转换来构建yolo所需数据集
最新发布
08-30
提供以下几种方法来构建yolo数据集： 1. 将voc格式转为yolo 2. 将yolo转为voc格式 3. 划分数据集
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值