一、vue简介:
1.vue简介:
Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。
Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。
Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言。
Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统。
2.Vue.js使用文档及下载Vue.js
Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看： https://cn.vuejs.org/v2/guide/
vue.js如果当成一个库来使用，可以通过下面地址下载： https://cn.vuejs.org/v2/guide/installation.html
二、Vue.js基本概念
##1. vue.js的概述:
- vue.js和JQuery.js都是js封装的模块;
- 各有各的特点,但是现在用vue的人越来越多;
- Vue.js的特点:a. 没有DOM的概念; b.以数据驱动为核心
- Vue.js操作的特点:
- a.script标签中Vue对象里面定义变量和方法;
- b.在标签上,操作变量或者方法;
- c.和JQ使用的思路不同;
2.vue的格式:
每个 Vue 应用都是通过实例化一个新的 Vue对象开始的：
<script src="js/vue.js"></script>
<script>
window.onload = function() {
var vm = new Vue({
el:'#app',
data:{
message:'hello world!'
}
})
}
</script>
<body>
<!-- 2.标签上面操作变量和方法。 -->
<!-- {{ 变量 }}: mustache语法; 胡子语法! -->
<div id="app">{{ message }}</div>
</body>其中，el属性对应一个标签，当vue对象创建后，这个标签内的区域就被vue对象接管，在这个区域内就可以使用vue对象中定义的属性和方法。
3.数据与方法
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。还可以在Vue实例中定义方法，通过方法来改变实例中data对象中的数据，数据改变了，视图中的数据也改变。
三、vue的模板语法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_vue模板语法</title>
<script src="js/vue.js"></script>
<script>
window.onload = function(){
// 模板语法
//创建vue对象
var vm = new Vue({
// 1.获取标签
el:'#app',
// 2.定义变量
data: {
// 2.1 可以操作子元素,可以放入短句或变量
str1: "helloworld",
// 2.2 可以操作数值
num1: 1,
// 2.3 三元表达式: A ? B : C
gender:0,
// 2.4 属性操作
url:"http://www.baidu.com",
},
methods: {
fun1: function() {
// 操作num1
this.num1 += 1
},
fun2:function(num) {
this.num1 += num
}
},
})
}
</script>
</head>
<body>
<div id="app">
<ul>
<li>vue可以操作子元素: {{ str1 }}</li>
<li>vue的胡子语法中，放入的是js程序(变量/短语句): {{ str1.split('').reverse().join('') }}</li>
<li>{{ num1+1 }}</li>
<li>性别: {{ gender==0?"女":"男" }}</li>
</ul>
<!-- 4.标签属性用到变量和方法，可以直接书写，不依靠胡子语法。 -->
<!-- 但是: 属性要特殊标注，你是vue操作的属性 -->
<!-- vue的属性操作，大多数都是用v-bind -->
<a v-bind:href="url">验证vue的属性绑定，跳转到百度</a>
<a :href="url">属性绑定简写</a>
<br><br>
<!-- 5.vue事件绑定：v-on:事件 -->
<!-- 方法去methods里面找。 -->
<button v-on:click='fun1()'>vue事件绑定</button>
<!-- 不写函数，写逻辑 -->
<button v-on:click='num1+=2'>不执行函数</button>
<!-- 事件绑定，使用@作为简写 -->
<button @click='fun2(3)'>vue事件绑定</button>
</div>
</body>
</html>四、Class绑定:事件绑定：
1. class绑定：
使用v-bind指令来设置元素的class属性，它们的属性值可以是表达式，vue.js在这一块做了增强，表达式结果除了是字符串之外，还可以是对象或者数组。
2.vue对对象的操作:
- 单个属性语法:
- 可以给v-bind:class传一个对象，以动态的切换class
- 对象值语法:
- 属性的值为true的值会被添加到class属性中去; 如果是false,则不会被添加
- 数组值语法:
- 案例:vue实现选项卡功能:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_class属性操作</title>
<script src="js/vue.js"></script>
<script>
window.onload = function() {
// vue操作class属性
var vm = new Vue({
// 1.获取标签
el:"#app",
data:{
// 2.1单个属性值
classData1:"aaa",
classData2:"bbb",
//2.2对象值:键值对
bool1:true,
bool2:false,
obj:{ // 声明一个对象值
'ccc':true,
'ddd':false,
}
}
})
}
</script>
</head>
<body>
<div id="app">
<!-- 1.单个值 -->
<div class="current" v-bind:class = "classData1">
class属性单个值传递
</div>
<!-- 2.对象值: 属性值为true的值会被添加到class属性中 -->
<div :class="{'aaa':bool1, 'bbb':bool2}">
class属性值传递对象:方法1
</div>
<div :class="obj">
class属性值传递对象:方法2
</div>
<!-- 3. 数组值 -->
<div :class="[classData1, classData2, obj]">
class属性值传递数组值:方法1
</div>
<div :class="[classData1,bool2?'active1':'active2']">
class属性值传递数组值:方法2
</div>
</div>
</body>
</html>2. 案例1:vue实现选项卡功能
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例1:vue实现选项卡功能</title>
<style>
.tab_con{
width:500px;
height:350px;
margin:50px auto 0;
}
.tab_btns{
height:50px;
}
.tab_btns input{
width:100px;
height:50px;
background:#ddd;
border:0px;
font: 18px/50px 'simsun';
float: left;
cursor: pointer;
outline:none;
}
.tab_btns .active{
background:gold;
}
.tab_cons{
height:300px;
}
.tab_cons div{
height:300px;
line-height:300px;
text-align:center;
display:none;
font-size:30px;
}
.tab_cons .current{
display:block;
background:gold;
}
</style>
<script src="js/vue.js"></script>
<script>
window.onload = function() {
// 实现思路:a.获取点击按钮的索引值; b.通过索引值修改class属性
var vm = new Vue({
el:".tab_con",
data:{
index:"0"
}
})
}
</script>
</head>
<body>
<div class="tab_con">
<div class="tab_btns">
<input type="button" value="按钮一" @click="index='0'" :class="index=='0'?'active':''">
<input type="button" value="按钮二" @click="index='1'" :class="index=='1'?'active':''">
<input type="button" value="按钮三" @click="index='2'" :class="index=='2'?'active':''">
<input type="button" value="按钮四" @click="index='3'" :class="index=='3'?'active':''">
<input type="button" value="按钮五" @click="index='4'" :class="index=='4'?'active':''">
</div>
<div class="tab_cons">
<div :class="index=='0'?'current':''">按钮一对应的内容</div>
<div :class="index=='1'?'current':''">按钮二对应的内容</div>
<div :class="index=='2'?'current':''">按钮三对应的内容</div>
<div :class="index=='3'?'current':''">按钮四对应的内容</div>
<div :class="index=='4'?'current':''">按钮五对应的内容</div>
</div>
</div>
</body>
</html>3: style属性操作:
- 放对象:
- 注意:js不支持中划线,需要使用中划线的时候使用引号("")或者小驼峰命名
- 放数组:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_style属性操作</title>
<script src="js/vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
// 定义jstyle属性
width:"200px",
height:"200px",
divColor:"red",
// 定义对象
obj1:{
width:'300px',
height:'300px',
"background-color":'skyblue',
},
//定义对象2
obj2:{
width:'400px',
height:'400px',
"font-size":'36px',
"background-color":'green',
},
}
})
}
</script>
</head>
<body>
<div id="app">
<!-- style属性操作 -->
<!-- 1.放对象 -->
<div v-bind:style="{'width':width, 'height':height, 'background-color':divColor}">
放对象1
</div>
<div :style="obj1">
放对象2
</div>
<!-- 2.放数组 -->
<div :style="[obj1, obj2]">
放数组
</div>
</div>
</body>
</html>五、条件渲染(v-if):
通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)，常用的条件指令如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_条件渲染</title>
<script src="js/vue.js"></script>
<script>
window.onload = function() {
var vm = new Vue({
el:"#app",
data:{
// 直接定义bool值
bool1:true,
bool2:false,
str1:"二",
}
})
}
</script>
</head>
<body>
<div id="app">
<!-- v-if语句功能: 做显示隐藏用的 -->
<!-- 1.v-if -->
<div v-if="bool1">1.v-if语句,是true就显示,否则隐藏</div>
<!-- 2.v-if v-else -->
<div v-if="bool2">2.1.v-if v-else语句,二选一(1)</div>
<div v-else>2.2.v-if v-else语句,二选一(2)</div>
<!-- 3.v-if v-else-if v-else -->
<div v-if="str1 == '一'">3.1 v-if v-else-if v-else多选一(一)</div>
<div v-else-if="str1 == '二'">3.2 v-if v-else-if v-else多选一(二)</div>
<div v-else-if="str1 == '三'">3.3 v-if v-else-if v-else多选一(三)</div>
<div v-else>3.4 v-if v-else-if v-else多选一(四)</div>
<!-- 4.v-show v-if -->
<!-- v-show:控制的是元素的display属性block与none,而v-if则是直接存不存在 -->
<div v-show="bool2">show</div>
</div>
</body>
</html>六、列表渲染(遍历):
1.可以放入对象或者数组:
v-for的功能:生成多个标签
<script>
window.onload = function() {
var vm = new Vue({
el:"#app",
data:{
//定义一个数组
arr:["<三国演义>", "<水浒传>", "<西游记>", "<红楼梦>"],
// 定义一个对象
obj:{'name':"李斯", "gender": 18, "address":"北京"},
}
})
}
</script>
...
<div id="app">
<!-- v-for的功能:生成多个标签 -->
<ul>
<!-- 1. 遍历数组:拿到元素 -->
<li v-for="item in arr">{{ item }}</li>
<!-- 2.遍历对象:拿到键值对中的值 -->
<li v-for="value in obj">{{ value }}</li>
<!-- 1.遍历数组:拿到索引和元素 -->
<li v-for="(item, j) in arr">{{ item }}:对应的索引:{{ j }}</li>
<!-- 2.遍历字典:拿到键值对的键值关系 -->
<li v-for="(value,key) in obj">{{ value }}:对应的键:{{ key }}</li>
</ul>
</div>七、表单输入绑定:
表单属性，vue用v-model设置一个变量，和表单属性时时同步。
表单属性的值(value/checked/selected):都会同步到v-model的变量值里面去。
代码:
<script src="js/vue.js"></script>
<script>
window.onload = function() {
var vm = new Vue({
el:"#app",
data:{
text:"",
sex:"0",
arr:[],
opt:"0",
},
})
}
</script>
...
<div id="app">
<!-- 1.对输入框的value操作 -->
<input type="text" v-model="text">
<div>input中的值是:{{ text }}</div>
<br>
<!-- 2. checked属性(单选按钮) -->
性别: <input type="radio" name="gender" value="0" v-model="sex">女
<input type="radio" name="gender" value="1" v-model="sex">男
<div>单选按钮的值是:{{ sex }}</div>
<br>
<!-- 3.多选按钮 -->
多选按钮: <input type="checkbox" value="qin" name="get" v-model="arr">琴
<input type="checkbox" value="qi" v-model="arr">棋
<input type="checkbox" value="shu" v-model="arr">书
<input type="checkbox" value="hua" v-model="arr">画
<div>多选框的值:{{ arr }}</div>
<br>
<!-- 4.下拉菜单 -->
<select name="" id="" v-model="opt">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
<div>下拉菜单的值:{{ opt }}</div>
<br>
</div>八、案例:Vue实现聊天窗口:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例:聊天窗口</title>
<style type="text/css">
.talk_con{
width:600px;
height:500px;
border:1px solid #666;
margin:50px auto 0;
background:#f9f9f9;
}
.talk_show{
width:580px;
height:420px;
border:1px solid #666;
background:#fff;
margin:10px auto 0;
overflow:auto;
}
.talk_input{
width:580px;
margin:10px auto 0;
}
.whotalk{
width:80px;
height:30px;
float:left;
outline:none;
}
.talk_word{
width:420px;
height:26px;
padding:0px;
float:left;
margin-left:10px;
outline:none;
text-indent:10px;
}
.talk_sub{
width:56px;
height:30px;
float:left;
margin-left:10px;
}
.atalk{
margin:10px;
}
.atalk span{
display:inline-block;
background:#0181cc;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
.btalk{
margin:10px;
text-align:right;
}
.btalk span{
display:inline-block;
background:#ef8201;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
</style>
<script src="js/vue.js"></script>
<script>
window.onload = function() {
var vm = new Vue({
el:".talk_con",
data:{
dataArr:[
{"person":"A", "say":"吃饭了吗？"},
{"person":"B", "say":"还没呢，你呢？"}
], // 用列表套对象的方式, 保存聊天内容
content:"", // 保存输入框内容
opt:"0", // 选择A说还是B说
},
methods:{
sendData:function() {
var str3 = this.opt == '0'? 'A':'B';
var obj = {'person':str3, "say":this.content}
this.dataArr.push(obj)
this.content=""
document.getElementById("talkwords").focus()
}
}
})
}
</script>
</head>
<body>
<div class="talk_con">
<!-- 显示区域 -->
<div class="talk_show" id="words">
<div :class="temp.person=='A'?'atalk':'btalk'" v-for="temp in dataArr">
<span>{{ temp.person }}说：{{ temp.say }}</span>
</div>
</div>
<!-- 发送内容区域 -->
<div class="talk_input">
<!-- 选项: 带有selected的选项,的value值和select标签共享 -->
<select class="whotalk" id="who" v-model="opt">
<option value="0">A说：</option>
<option value="1">B说：</option>
</select>
<!-- 请输入内容 -->
<input type="text" class="talk_word" id="talkwords" v-model="content" >
<!-- 按钮 -->
<input type="button" value="发送" class="talk_sub" id="talksub" @click="sendData()">
</div>
</div>
</body>
</html>实现效果:
九、Vue实现ToDoList案例:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_vue实现todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
<script src="js/vue.js"></script>
<script>
window.onload = function() {
var vm = new Vue({
el:"#app",
data:{
listArr:["学习html", "学习css", "学习javascript"], // 展示的数据
str1:"",
},
methods:{
// 添加数据
addData:function() {
if(this.str1 == ""){
alert("添加的数据不能为空...")
return;
}
this.listArr.splice(0, 0, this.str1)
this.str1 = ""
},
//up
up:function(index) {
if(index == 0){
alert("已经是第一个了...")
return;
}
this.listArr.splice(index-1, 0, this.listArr.splice(index,1)[0])
},
// down
down:function(index){
if(index == this.listArr.length-1){
alert("已经是最后一个了...")
return;
}
this.listArr.splice(index+1, 0, this.listArr.splice(index,1)[0])
},
//del
del:function(index) {
this.listArr.splice(index,1 )
}
},
})
}
</script>
</head>
<body>
<div class="list_con" id='app'>
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt" v-model="str1">
<input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="addData()">
<!-- 写好了往ul中放入 -->
<ul id="list" class="list">
<!-- 删除、↑、↓都是a链接，只不过类名不同 -->
<!-- class = del/up/down -->
<li v-for="(temp,index) in listArr">
<span>{{ temp }}</span>
<a href="javascript:;" class="up" @click="up(index)"> ↑ </a>
<a href="javascript:;" class="down" @click="down(index)"> ↓ </a>
<a href="javascript:;" class="del" @click="del(index)">删除</a>
</li>
</ul>
</div>
</body>
</html>实现效果:
