vue从入门到学会第一天--------基础语法

一、前言
作为一个前端框架 , vue无疑是很强大的一个存在 , 它使得很多操作变得简单并且可复用性很高 。本次我们所讲的vue主要以vue2为主 , 后面还会讲到vue3 , 希望大家持续关注 。
二、vue的下载
首先我们需要导入vuejs的文件到html文件的script标签中去 , 这里小编给大家vue2的下载链接 , 如下:
下载见评论区 。
至于这两者的区别嘛 , 简而言之就是正常人和太监的区别 , 哈哈哈 。。。
三、初次使用
既然已经安排上了 , 那么我们就赶紧来用一用吧;不过再用之前小编得给大家隆重介绍下我用的编辑器 , 它就是sublimetext3 , 使用它 , 将会使我们的前端开发效率快上数十倍 , 先写个html文件 , 内容如下:
vue从入门到学会第一天--------基础语法
文章图片

文章图片
我们可以看到 , 我们创建了一个vue对象 , 通过给这个对象初始化绑定元素和内容使得上面的变量生效 , 我们来打印一下生成的vue对象 , 如下:
vue从入门到学会第一天--------基础语法
文章图片

文章图片
可以看出 , 我们new了一个vue对象 , 也就是构造函数初始化 , 里面包含了所对应的全部信息 , 这些信息就组成了一个vue应用 , 虽然目前我们里面只传入了要挂载的元素和数据 , 但是后面我们还会传入很多其它的东西 , 比如组件、函数和其它选项 。
四、实例操作
1.访问
既然说到可以访问值了 , 那么我们就来访问下这里面的值 , 此次访问小编总共总结出了四种方法 , 如下:
vue从入门到学会第一天--------基础语法
文章图片

文章图片
如果是数字的话 , 最后一种会以字符串的形式输出 , 此时要想转换成数字直接使用parseInt函数即可 。
2.修改
可以访问 , 当然也可以修改 , 如下:
vue从入门到学会第一天--------基础语法
文章图片

文章图片
可以看到 , 最终变量1的值变为了修改后的值 。
【vue从入门到学会第一天--------基础语法】五、数据绑定的多种方式
你以为元素中的数据只是单个字符串或者数字 , 那你就错了 , 他们还可以是json对象或者数组以及键值对 , 比如:
vue从入门到学会第一天--------基础语法
文章图片

文章图片
以上基本包含了所有可能用到的一些vue数据绑定的方法 。
六、插值表达式
vue可以让被绑定的元素的内容使用表达式 , 如下:
vue从入门到学会第一天--------基础语法
文章图片

文章图片
我们可以看到 , 虽然我们绑定了很多内容 , 但是却还没能绑定标签 , 下次小编将会和大家讲解如何使用vue绑定标签 。
七、总结
本文主要是对vue的基本用法做了一个最基本的概述 , 后续会不断更新 。本文源码只需在公众号简易编程网中回复vue1即可获取 。
来源:搜狐