零基础入门Vue之梦开始的地方——插值语法
一、Vue
我！作为初学者，既然要将Vue，那我一定要介绍一下他是什么？我们可以应用一下官方的话 vue的介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
由此可见，Vue是一个能让你快速将数据转化为可视化试图的框架。真是我这种不会写界面的福音啊！！
ps：根据官网描述，vue的学习是要在你会前端三剑客的前提下学的，没有学的，尤其是后端开发的人，还是先去过一遍吧。vue的学习前提
1.1 Vue安装
Vue的安装主要有两种，一种是通过<script>标签引入Vue的js文件，还有另外一种是使用npm去安装，后续在.vue文件里面去写vue的代码。
作为初学者的我，即便我会使用nodejs和npm，但奈何尚硅谷的教程是前者，所以我选择记录前者学习Vue的整体过程
所以，如果你想跟着我一起学习，请用以下方式：script标签引入
二、我的N个Vue实例
众所周知，所有语言的入门都是从“Hello world”学起，那么我也选择用我第一个Vue对象去创建一个"Hello world"出来
ps:如果你已熟悉“一”中的内容，请创建好一个html文件，并且用script标签引入vue的js文件
对于创建Vue选项，官网并没有针对于初学者有良好的引入，至少我第一次看文档的时候是蒙圈的：“这个东西咋用？”
对此，可以根据尚硅谷的课程简单入个门，当然也可以阅读他的相关代码或者demo示例。
我用以下代码来展示vue的基本用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>梦开始的地方</title>
</head>
<body>
<div id="root">
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器
data:{
words:"Hello world" //这是可以存放用于展示的数据
}
})
</script>
</html>
在以上简单的代码中，看到vue.js的引入给我们带来了Vue的类，并且我用new创建了Vue的实例对象，Vue的构造器接收一个object对象
作为初学者，我应该知道两个重要的属性
前者用于绑定dom节点，后者用于存放数据方便展示
2.1 Vue的插值语法
既然代码基础我写好了，那我可要尝试去用用数据在页面上展示咯
根据文档的 插值语法相关事例
2.1.1 文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>梦开始的地方</title>
</head>
<body>
<div id="root">
<h1>{{words}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器
data:{
words:"Hello world" //这是可以存放用于展示的数据
}
})
</script>
</html>
"{{}}"在这个表达式里面可以写js的表达式，并且它里面的执行语句的this是vue实例，同时vue官方文档指出，在data中配置的东西最后都会通过数据代理的方式挂在到vue实例上。
也就是说可以写{{1+1}}，{{words.split(" ").join(",")}}等。但不推荐将{{}}表达式写的过长，尽量一行搞定。
这样看似好像无用，但当你修改words值得时候，dom节点相关内容也要跟着绑定，不信你可以试试~
2.1.2 属性绑定
同样的道理，写上基本的代码结构，根据官方文档的介绍我们可以使用以下形式去做属性绑定
<dom v-bind:key="value"></dom>
可以在要绑定的属性值前面加上"v-bind"，然后然后在值里面可以写js表达式
具体实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>梦开始的地方</title>
<style>
input{
width: 200px;
height: 20px;
}
</style>
</head>
<body>
<div id="root">
<!-- 这里是插值语法 文本 的节点 -->
<h1>{{words}}</h1>
<!-- 这个是插值语法 属性绑定 的节点 -->
<input type="text" v-bind:value="sentence" />
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器
data:{
words:"Hello world", //这是可以存放用于展示的数据
sentence:"The world is beatiful for you."
}
})
</script>
</html>
从上述代码来看，当在“value”属性值前面加上了“v-bind”之后，""的作用就等同意{{}}，在{{}}能写啥，双引号里面也能写啥（js表达式）
2.1.3 事件绑定
除了“v-bind” 允许你对dom节点的属性绑定之外，vue还允许你对于事件，例如“click” 进行绑定
但是，绑定的方法不能在写到data配置项！！！
在vue配置中，可将方法配置在methods中，实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>梦开始的地方</title>
<style>
input{
width: 200px;
height: 20px;
}
</style>
</head>
<body>
<div id="root">
<!-- 这里是插值语法 文本 的节点 -->
<h1>{{words}}</h1>
<button v-on:click="changeWords">change</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器
data:{
words:"Hello world", //这是可以存放用于展示的数据
},
methods:{
changeWords(){ //实现一个changeWords方法
this.words = "Hello Vue!";
}
}
})
</script>
</html>
在以上代码中，当我按下“change”按钮时，h1标签内容会因为words属性改变而改变，此外v-on所绑定的click在双引号内部也可以写js表达式，methods和data的数据一样都是挂在到vm实例上，能够直接索引到。
三、拓展
最后呢，我根据文档（或者尚硅谷的视频）遇到一个比"v-bind"更好用的语法
对于v-bind来说，如2.1.2中的例子，我们对data内部的sentence进行修改，input输入框内容会一起改变这没问题，这实现了数据的绑定
但如果我想要修改输入框的内容，让data的sentence也跟着变化，v-bind做不到，所以文档中有另外一个方式v-model
简单来说它实现了数据和dom的双向绑定，只要有一个改变了另外一个会跟着改变
有趣的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>梦开始的地方</title>
<style>
input{
width: 200px;
height: 20px;
}
</style>
</head>
<body>
<div id="root">
<!-- 这里是插值语法 文本 的节点 -->
<h1>{{words}}</h1>
<!-- 这个是插值语法 属性绑定v-model示例 的节点 -->
<input type="text" v-model:value="words" />
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器
data:{
words:"Hello world", //这是可以存放用于展示的数据
}
})
</script>
</html>
在这个代码中，input的内容改变，h1标签会跟着改变
如此，vue还真的有趣啊~
本篇结束！！！！
四、The more
前往下一节：零基础入门Vue之窥探大法——计算与侦听
零基础入门Vue之梦开始的地方——插值语法的更多相关文章
- 【JAVA零基础入门系列】Day4 变量与常量
这一篇主要讲解Java中的变量,什么是变量,变量的作用以及如何声明,使用变量. 那么什么是变量?对于初学者而言,可以将变量理解为盒子,这些盒子可以用来存放数据,不同类型的数据需要放在对应类型的盒子里. ...
- 【JAVA零基础入门系列】Day5 Java中的运算符
运算符,顾名思义就是用于运算的符号,比如最简单的+-*/,这些运算符可以用来进行数学运算,举个最简单的栗子: 已知长方形的长为3cm,高为4cm,求长方形的面积. 好,我们先新建一个项目,命名为Rec ...
- 【JAVA零基础入门系列】Day8 Java的控制流程
什么是控制流程?简单来说就是控制程序运行逻辑的,因为程序一般而言不会直接一步运行到底,而是需要加上一些判断,一些循环等等.举个栗子,就好比你准备出门买个苹果,把这个过程当成程序的话,可能需要先判断一下 ...
- 【JAVA零基础入门系列】Day11 Java中的类和对象
今天要说的是Java中两个非常重要的概念--类和对象. 什么是类,什么又是对象呢?类是对特定集合的概括描述,比如,人,这个类,外观特征上,有名字,有年龄,能说话,能吃饭等等,这是我们作为人类的相同特征 ...
- 【JAVA零基础入门系列】Day12 Java类的简单应用
俗话说的好,实践出真知,所以除了理论知识掌握扎实以外,更重要的是要多加操练,这样才能掌握核心科技. 今天我们就用刚学会的类来实践一下,目标便是完成上一篇中的剁手任务. 我们的商品类已经准备好了,代码重 ...
- 【JAVA零基础入门系列】Day14 Java对象的克隆
今天要介绍一个概念,对象的克隆.本篇有一定难度,请先做好心理准备.看不懂的话可以多看两遍,还是不懂的话,可以在下方留言,我会看情况进行修改和补充. 克隆,自然就是将对象重新复制一份,那为什么要用克隆呢 ...
- 零基础入门微信小程序开发
注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...
- Siki_Unity_1-1_Unity零基础入门_打砖块
1-1 Unity零基础入门 打砖块 任务1:素材源码 www.sikiedu.com/course/77 任务2:Unity介绍 王者荣耀,球球大作战等游戏都是用unity开发的 跨平台的游戏引擎 ...
- 零基础入门 实战mpvue2.0多端小程序框架
第1章 课程快速预览(必看!!!)在这一章节中,老师讲带领你快速预览课程整体.其中,涉及到为什么要做这么一门实战课程.制作一个小程序的完整流程是怎么样的,以及如何做项目的技术选型. 第2章 30 分钟 ...
- 2020年数据库概念与MySQL的安装与配置-从零基础入门MySQL-mysql8版本
作者 | Jeskson 来源 | 达达前端小酒馆 从零基础入门MySQL数据库基础课 数据的概念,简介,安装与配置,Windows平台下MySQL的安装与配置. 数据库的概念:数据库是一个用来存放数 ...
随机推荐
- java向一个压缩包里增加文件
如果遇到,向现有的压缩包里增加文件的需求可以参照如下的方式: 思路:1.先将压缩包解压 2.删除旧的压缩包 3.将解压后的文件和希望添加的文件一起重新生成一个压缩包 4.将第一步中解压后的文件删除. ...
- 二、redis主从环境搭建
系列导航 一.redis单例安装(linux) 二.redis主从环境搭建 三.redis集群搭建 四.redis增加密码验证 五.java操作redis 环境:centos7需要的安装包: redi ...
- uni-app返回上一级，页面不刷新，bug
uniapp 生命周期(onLoad跟onLoadonShow的区别) 一.uniapp生命周期分两种 : 1.应用生命周期:仅可在App.vue中监听,在其它页面监听无效. 2.页面生命周期:仅在p ...
- JS单线程的理解
一.首先需要区分几个概念: 1. 进程和线程的概念: 进程:指在系统中运行的一个应用程序,目的就是担当分配系统资源(CPU时间.内存等)的基本单位 线程:系统分配处理器时间资源的基本单元,建立在进程的 ...
- liunx上升级python2至python3
一.背景介绍 虚拟机的liunx系统CentOS7自带了python2.7.5,为使用方便需要换成最新的版本3.10.4 二.安装方法 1.安装升级GCC yum install -y gcc* op ...
- 机器学习-无监督机器学习-主成分分析PCA-23
目录 1. 降维的方式 2. PCA的一般步骤 3. 思想2 最小化投影距离 4. Kernelized PCA 1. 降维的方式 对于维度灾难.数据冗余,这些在数据处理中常见的场景,我们不得不进一步 ...
- 凸优化 | Lagrange 对偶：极大极小不等式的证明
背景: Lagrange 对偶:对于优化问题 \[\begin{aligned} &\mathrm{minimize} ~~ &f_0(x) \\ &\mathrm{subje ...
- 13个构建RESTful API的最佳实践
前言 Facebook.GitHub.Google和其他许多巨头都需要一种方法来服务和消费数据.在今天的开发环境中,RESTful API仍然是服务和消费数据的最佳选择之一. 但你是否考虑过学习行业标 ...
- SD Host控制器的系统集成
控制器集成需求 SD Host可以从外部读取数据存储到SRAM和eFlash或者可以从内部读取数据输出到外部存储 AHB Bus slave接口用于配置 master接口作为主设备,DMA可以控制总线 ...
- Android Studio 的 Gradle 面板没有 Task
问题描述:Android Studio Gradle 窗口没有显示 task 列表的问题,如下图所示: 网上找了好久都没有找到原因,最后自己摸索,找了解决方法. 解决方法:依次点击:File -> ...