vue 基础-->进阶 教程(1): 基础（数据绑定）
第一章 建议学习时间4小时 课程共3章
前面的nodejs教程并没有停止更新，因为node项目需要用vue来实现界面部分，所以先插入一个vue教程，以免不会的同学不能很好的完成项目。
本教程，将从零开始，教给大家vue的基础、高级操作、组件封装等，再配合前面的Nodejs后台，实现一个完整的项目。
vue.js
官方介绍：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
其实，大家可以简单理解为 ，vue是一个简单、易用、功能强大的前端框架，在架构上先进于jQuery，但是实现的还是jQuery实现的功能（其实我们就是做个网页，用什么框架都是干这些事情，只是用法不同而已）。
引入
可以去官网下载后，像引入jQuery一样引入到html中即可，或者直接引入下面的在线链接
<script src="https://unpkg.com/vue/dist/vue.js"></script>
hello world
创建一个html文件，写入如下代码，即可显示出 hello world （代码解释在后面）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body> <div id="box">
<input type="text" v-model="msg"/>
{{msg}}
</div> <script>
new Vue({
el:"#box",
data:{
msg:"hello world ! "
}
})
</script> </body>
</html>
显示结果，当改变输入框的时候，后面的值也跟着改变。
代码解释：
6行引入了 vuejs
16行使用 new Vue方法去声明一个vue对象，内部传入对应的配置，即可实现vue实例化
17 el 表示需要绑定的 vue范围 （通常为标签的 id ，需要加 # 号）
18 data 定义需要的所有数据，json格式，这里内部定义了一个名为 msg的值。
10行定义了一个id为 box的标签 （此标签用来标记哪个范围内去执行vue的绑定代码）
11行使用 v-model 给输入框绑定数据 （输入框绑定数据使用 v-model）
12行使用 {{}}双花括号绑定数据，（一般的网页标签中，可以使用 双花括号绑定数据）
上面就是实现了数据的双向绑定。input --> js数据 --> 花括号msg 当input或 js中的值改变，三个地方的值都会全改变。、
各种输入框的数据绑定：代码解释在对应的注释中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
line-height: 30px;
padding: 10px;
}
input[type="radio"],input[type="checkbox"]{
height: 20px;
width: 20px;
}
input, select{
height: 30px;
margin: 5px;
padding-left: 5px;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body> <div id="box">
<p>单选框：</p>
<input type="radio" value="a" v-model="raVal" name="sex" />
<input type="radio" value="b" v-model="raVal" name="sex" /> <!-- radio中 选中哪个 -->
<p>复选框：</p>
<input type="checkbox" v-model="cheVal[0]" /> <!-- check中，选中 为true 不选为 false 用value无意义 , 当js data中给值了，会自动转化成 boolean再确定是否选中-->
<input type="checkbox" v-model="cheVal[1]" /> <!-- check中，选中 为true 不选为 false 用value无意义 , 当js data中给值了，会自动转化成 boolean再确定是否选中-->
<p>输入框：</p>
<input type="text" v-model="msg"/>
{{msg}}<br/>
<p>下拉框</p>
<select v-model="seVal" > <!-- 当选中某个选项，选项对应的 value值就会绑定给 seVal -->
<option value="" selected>--chose--</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<br/>
{{raVal}}<br/> <!-- 显示 单选框对应的值 -->
{{cheVal}}<br/><!-- 显示 复选框对应的值 -->
选择的是：{{seVal}}<br/><!-- 显示 下拉框对应的值 -->
</div> <script>
new Vue({
el:"#box",
data:{
msg:"hello world ! ",
raVal:"", //存放单选框对应的值
cheVal:["",""], //存放复选框对应的值
seVal:"" //存放下拉框对应的值
}
})
</script> </body>
</html>
v-show:当值为false的时候，隐藏dom, true的时候显示dom
v-if:当值为false的时候，删除dom(在页面dom结构中找不到标签)， true的时候显示dom
<div id="box">
<div v-show="ifShow">示例：v-show</div>
<div v-if="ifif">示例：v-if</div>
</div> <script>
new Vue({
el:"#box",
data:{
ifShow:false,
ifif:false
}
})
</script>
实现显示隐藏的示例：代码解释在对应的注释中
<div id="box">
<p>复选框：</p>
<input type="checkbox" v-model="raVal" /> <!-- check中，选中 为true 不选为 false 用value无意义 , 当js data中给值了，会自动转化成 boolean再确定是否选中-->
<div v-show="raVal">时刻都要提升你的生产效率</div>
</div> <script>
new Vue({
el:"#box",
data:{
msg:"hello world ! ",
raVal:"",
cheVal:["",""]
}
})
</script>
实现 class style src 的绑定：代码解释在对应的注释中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
line-height: 30px;
padding: 10px;
}
input{
height: 30px;
margin: 5px;
}
.rColor{
color: red;
}
.div{
font-size: 30px;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body> <div id="box">
<div class="div" v-text="msg"></div>
<div class="div" v-bind:class="{'rColor':cls}">哈哈哈哈1</div> <!-- json格式的判断，键是需要显示的字符串值，冒号后是判断条件 true/false -->
<div class="div" :class="{'rColor':cls}">哈哈哈哈2</div> <!-- 简写，省略v-bind 的简写也可以 -->
<div class="div" :class="clsName">哈哈哈哈3</div> <!-- 简写，可以直接绑定 data中的某个数据 -->
<div class="div" :style="{color:'blue'}">哈哈哈哈4</div> <!-- 简写，直接写成json格式的style （这里和原来的style写法一致，只是写成了json格式，属性名需采用驼峰式命名） --> <input type="text" v-model="cls"/>
<br/>
<img v-bind:src="url" alt=""/> <!-- 绑定src 值 这里的url对应的是 data中的 url-->
</div> <script>
new Vue({
el:"#box",
data:{
msg:"呵呵呵",
cls:true,
clsName:"rColor",
url:"https://pic2.zhimg.com/bc9733ea1_is.jpg"
}
})
</script> </body>
</html>
遍历数据显示：使用v-for就能直接循环显示 json数据或数组。代码解释在注释中。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
line-height: 30px;
padding: 10px;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body> <div id="box">
<div v-for="(item,index) in msg"> <!-- 数组循环 （值，索引） -->
<i>{{index}} : {{item}}</i>
</div>
<div v-for="(item,key,index) in msg2"> <!-- json循环 （值，键，索引） -->
<i>{{index}}:{{key}}:{{item}}</i>
</div>
</div> <script>
new Vue({
el:"#box",
data:{
msg:[["111","2222","333"],"bb","ccc"],
msg2:{
name:"小明",
age:"25",
sex:"男"
}
}
})
</script> </body>
</html>
循环生成下拉选框，并和显示的地方绑定。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
line-height: 30px;
padding: 10px;
}
select{
width: 100px;
padding: 5px;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body> <div id="box">
<select v-model="value">
<option v-for="opt in options" :value="opt.text">{{opt.value}}</option> <!-- 使用 :value绑定value属性 -->
</select>
<span v-text="value"></span>
</div> <script>
new Vue({
el:"#box",
data:{
options:[{text:"A",value:"A"},{text:"B",value:"B"},{text:"C",value:"C"},{text:"D",value:"D"}],
value:"A"
}
})
</script> </body>
</html>
今天就讲到这里，明天我们讲解：事件、组件，组件之间数据的传递
关注公众号，博客更新即可收到推送
vue 基础-->进阶 教程(1): 基础（数据绑定）的更多相关文章
- vue 基础-->进阶 教程(2): 指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Python基础入门教程
Python基础入门教程 Python基础教程 Python 简介 Python环境搭建 Python 基础语法 Python 变量类型 Python 运算符 Python 条件语句 Python 循 ...
- 【简单易懂的AMV图文教程-2】VEGAS基础进阶——认识关键帧
[简单易懂的AMV图文教程-2]VEGAS基础进阶--认识关键帧 经过了上一期VEGAS基础教程的学习,相信大家都能独立完成一些比较简单的纯剪辑作品了.今天在这里为大家继续介绍VEGAS的一大基础应用 ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二七║ Nuxt 基础：框架初探
缘起 哈喽大家好,又是周四了,俗话说周四来了,周末还远么哈哈,老张我也想下周请假,来个16天的大长假哟,不知道大家是怎么请假的,近来发现文章下边已经没有人评论了,赶脚比较凄凉了,大家看到的麻烦点个赞呀 ...
- 《SQL基础教程》+ 《SQL进阶教程》 学习笔记
写在前面:本文主要注重 SQL 的理论.主流覆盖的功能范围及其基本语法/用法.至于详细的 SQL 语法/用法,因为每家 DBMS 都有些许不同,我会在以后专门介绍某款DBMS(例如 PostgreSQ ...
- 01慕课网《vue.js2.5入门》——基础知识
前端框架 Vue.js2.5 2018-05-12 Vue官网:https://cn.vuejs.org/ 基础语法+案例实践+TodoList+Vue-cli构建工具+TodoList Vue基础语 ...
- Vue-Router 基础入门教程
Vue-Router 基础入门教程 前言 这周的计划是用VUE将之前的小demo的前端给重构了,并且做成前后端分离的样式,因为之前的那个聊天室的demo几乎都是在一个路由上完成的,所以学习Vue-ro ...
随机推荐
- Java学习笔记——浅谈数据结构与Java集合框架（第二篇、Queue、Set）
江南好,何处异京华. 香散翠帘多在水,绿残红叶胜于花.无事避风沙. --<纳兰词> 诗词再好,大图不能忘 上大图: 先说说栈和队列: 栈就好比手枪的弹匣,你往里面压入子弹,最先压入的子弹就 ...
- Linux五种IO模型性能分析
1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式: 同步: 所谓同步,就是在发出一个功能调用时, ...
- java虚拟机--jvm client模式与server模式的区别
JVM Server模式与client模式启动,最主要的差别在于:-Server模式启动时,速度较慢,但是一旦运行起来后,性能将会有很大的提升.JVM如果不显式指定是-Server模式还是-clien ...
- 阿里的dubbo 到底是用来干嘛的？
Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. 简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的,只有在分布式的时 ...
- 【JAVAWEB学习笔记】12_Http&Tomcat
一.Http协议 1．什么是Http协议 HTTP,超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的 一种网络协议.所有的WWW文件都必须遵守这 ...
- 微信小程序实战（商城）
github地址(欢迎star):https://github.com/xiaobinwu/dj 版本:0.15.152900(暂未升级原因:升级后需要图片无法本地引用,必须使用image或是远程路径 ...
- Elasticsearch与Solr
公司之前有个用Lucene实现的伪分布式项目,实时性很差,后期数据量逐渐增大的时候,数据同步一次需要十几小时.当时项目重构考虑到的是Solr和ES,我参与的是Solr技术的预研.因为项目实时性要求很高 ...
- 那些年我遇到的ERP顾问
当我写下这篇随笔的时候,算起来在我从业9年的时间里,也差不多遇到了4-5拨的ERP咨询顾问,严格来说是4家ERP顾问公司.分别是:IBM.汉得.鼎捷以及盈通金服.从实施水准.技术力量.沟通技巧.做事态 ...
- Spring框架之IOC(控制反转)
[TOC] 第一章Spring框架简介 IOC(控制反转)和AOP(面向方面编程)作为Spring框架的两个核心,很好地实现了解耦合.所以,简单来说,Spring是一个轻量级的控制反转(IoC)和面向 ...
- day_ha配置文件
流程图: 代码 #!/sur/bin/env python # -*- coding: utf-8 -*- #{"backend": "www.oldboy.org&qu ...