一、起步
1、项目中使用vue有三种使用方式：
1.1、官网直接下载vue.js到本地，进行本地引用；
1.2、使用官网提供的cdn
1.3、npm安装
（我们这里先使用本地引用的方式进行学习）
2、话不多说，先来看一个小例子（致我们亲爱的 hello world）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
var vm=new Vue({
el:'#itany', //指定关联的元素
data:{ //存储数据
msg:'Hello World'
}
});
}
</script>
</head>
<body>
<div id="itany">
{{msg}} <!-- 两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中 -->
</div>
</body>
</html>运行上边的实例，页面上即可显示我们熟悉的 'Hello World'字符，实现的细节我们接下来会进行介绍。
3、接下来我们需要安装vue-devtools插件，便于在chrome中调试vue
我们在初次运行时，可能会发现控制台打印了如下东西。意思是说这个调试插件会读取我们的vue代码，如果是生产环境，建议我们禁止掉（接下来会说明如何处理）。
二、入门
接下来我们可以开始处理上一节遇到的问题：
我们将上一节的代码进行改造：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue启动时生成生产消息
var vm=new Vue({
el:'#itany', //指定关联的元素
data:{ //存储数据
msg:'Hello World'
}
});
}
</script>
</head>
<body>
<div id="itany">
{{msg}} <!-- 两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中 -->
</div>
<h3>
{{msg}}
</h3>
</body>
</html>如图：
可以看到，我们在第十行和第十一行增加了两行代码。就像注释里标明的，第十行可以控制是否允许插件读取我们的代码，十一行很暴力的直接去除烦人的提示信息（强迫症患者表示很开心）。
好了，接下来看一下以上代码跑出的页面效果：
可以看出提示已经被干掉了，但是有点问题，为什么页面上出现了一个双花括号？貌似没有渲染成功。。。
下边才是真正的代码解读：
第一步、我们要使用vue这个框架，首先就要将vue文件引入进来，就像第六行那样；
第二步、必须初始化一个vue实例，之后我们所有的代码都依赖这个实例运行；
实例中属性：
el ：这个表示我们的这个vue实例要挂载到哪个dom元素上从而控制该dom（2.x不允许挂载到body上）。我们这里选择了id为itany的元素，而h3并不在此元素中，这就是为什么h3中的文本不能正确渲染的原因。
data：存储数据。处于vue控制的dom范围内，可以直接拿到该参数下的数据，通过模板双花括号渲染到页面上（代码24行）。
三、常用指令
1、作用：用来扩展html标签的功能
2、vue中常用的指令
v-model：双向数据绑定，一般用于表单元素
v-for：对数组或对象进行循环操作
v-on：用来绑定事件，用法：v-on:事件="函数"
v-show/v-if：用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建
3、指令的使用
1、常用指令：v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用指令：v-model</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
new Vue({
el:'div',
data:{
name:'', //即使没有值，也不能省略，报错
age:21,
flag:true,
nums:[12,4,23,5],
user:{id:9527,name:'唐伯虎'}
}
});
}
</script>
</head>
<body>
<div>
用户名：<input type="text" v-model="name">
<br>
{{name}} <br>
{{age}} <br>
{{flag}} <br>
{{nums}} <br>
{{user}}
</div>
</body>
</html>效果：
双向绑定一般用于表单元素，意思是，文本框元素中的值和vue实例data中相应的值是同步更新的，任意一个改变都会同时影响这两个地方。
例如，文本框现在用 v-model="name"绑定了name这个数据。我们在文本框中输入tom，vue实例的data中的name属性会同时赋上一个值'tom'，并且页面上用花括号渲染name的地方也会同时发生变化。如下：
2、常用指令：v-for
2.1、普通循环
2.1.1、循环数组：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用指令：v-for</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
new Vue({
el:'#itany',
arr:[12,4,5,34,2,11],
user:{id:9527,name:'唐伯虎',age:25},
arr2:[12,4,5,34,2,11,12],
users:[
{id:9527,name:'唐伯虎',age:25},
{id:1001,name:'秋香',age:22},
{id:1002,name:'石榴姐',age:24}
]
});
}
</script>
</head>
<body>
<div id="itany">
{{arr}}
<ul>
<li v-for="value in arr">{{value}}</li>
</ul>
</div>
</body>
</html>效果：
2.1.2、循环对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用指令：v-for</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
new Vue({
el:'#itany',
data:{
arr:[12,4,5,34,2,11],
user:{id:9527,name:'唐伯虎',age:25},
arr2:[12,4,5,34,2,11,12],
users:[
{id:9527,name:'唐伯虎',age:25},
{id:1001,name:'秋香',age:22},
{id:1002,name:'石榴姐',age:24}
]
}
});
}
</script>
</head>
<body>
<div id="itany">
<ul>
<li v-for="value in user">{{value}}</li>
</ul>
</div>
</body>
</html>效果：
2.2、键值循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用指令：v-for</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
new Vue({
el:'#itany',
data:{
arr:[12,4,5,34,2,11],
user:{id:9527,name:'唐伯虎',age:25},
arr2:[12,4,5,34,2,11,12],
users:[
{id:9527,name:'唐伯虎',age:25},
{id:1001,name:'秋香',age:22},
{id:1002,name:'石榴姐',age:24}
]
}
});
}
</script>
</head>
<body>
<div id="itany">
<ul>
<!-- 键值循环 -->
<li v-for="(v,k) in arr">{{k}}={{v}}</li>
<li v-for="(v,k) in user">{{k}}={{v}}</li>
</ul>
</div>
</body>
</html>效果：
键值循环对于数组（v-for="(v,k) in arr"）：v表示值，k表示索引；
对于对象（v-for="(v,k) in user"）：v表示值，k表示键。
2.3、来一个综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用指令：v-for</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
new Vue({
el:'#itany',
data:{
arr:[12,4,5,34,2,11],
user:{id:9527,name:'唐伯虎',age:25},
arr2:[12,4,5,34,2,11,12],
users:[
{id:9527,name:'唐伯虎',age:25},
{id:1001,name:'秋香',age:22},
{id:1002,name:'石榴姐',age:24}
]
}
});
}
</script>
</head>
<body>
<div id="itany">
<ul>
<li v-for="(user,index) in users">
{{index+1}},{{user.id}},{{user.name}},{{user.age}}
</li>
</ul>
</div>
</body>
</html>效果：
3、常用指令：v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用指令：v-on</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
let vm=new Vue({
el:'#itany',
data:{ //存储数据
arr:[12,34,45,23,5]
},
methods:{ //存储方法
show:function(){
console.log('show方法');
},
add(){
// console.log(this); //this表示当前vue实例
// console.log(this===vm); //true
this.arr.push(666); //使用this访问当前实例中的成员
// this.show();
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<button v-on:click="show">点我</button>
<button v-on:click="add()">向数组中添加一个元素</button>
<br>
{{arr}}
<hr>
<button v-on:mouseover="show">鼠标经过</button>
<button v-on:dblclick="show">鼠标双击</button>
</div>
</body>
</html>效果：
v-on用于绑定的事件我们需要在vue实例的methods中定义。
4、常用指令：v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用指令：v-if</title>
<script src="js/vue.js"></script>
<script>
window.οnlοad=function(){
let vm=new Vue({
el:'#itany',
data:{
flag:true
},
methods:{
change(){
this.flag=!this.flag;
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<!-- <button v-on:click="change">隐藏</button> -->
<button v-on:click="flag=!flag">隐藏</button>
<hr>
<div style="width: 100px;height: 100px; background-color: red" v-if="flag">欢迎</div>
</div>
</body>
</html>效果：
初始化的时候flag的值为true，即div的v-if=true，此div显示
点击按钮之后，flag的值取反，变为false，即div的v-if=false，此div隐藏
四、综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习：用户管理</title>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
<script src="bootstrap/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script>
window.οnlοad=function(){
let vm=new Vue({
el:'.container',
data:{
users:[
{name:'tom',age:24,email:'tom@itany.com'},
{name:'jack',age:23,email:'jack@sina.com'}
],
user:{},
nowIndex:-1 //当前要删除项的索引
},
methods:{
addUser(){
this.users.push(this.user);
this.user={};
},
deleteUser(){
if(this.nowIndex===-1){ //删除所有
this.users=[];
}else{
this.users.splice(this.nowIndex,1); //从指定索引位置开始删除，删除一个
}
}
}
});
}
</script>
</head>
<body>
<div class="container">
<h2 class="text-center">添加用户</h2>
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="control-label col-sm-2 col-sm-offset-2">姓 名：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="age" class="control-label col-sm-2 col-sm-offset-2">年 龄：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-sm-2 col-sm-offset-2">邮 箱：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group text-center">
<input type="button" value="添 加" class="btn btn-primary" v-on:click="addUser">
<input type="reset" value="重 置" class="btn btn-primary">
</div>
</form>
<hr>
<table class="table table-bordered table-hover">
<caption class="h3 text-center text-info">用户列表</caption>
<thead>
<tr>
<th class="text-center">序号</th>
<th class="text-center">姓名</th>
<th class="text-center">年龄</th>
<th class="text-center">邮箱</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in users" class="text-center">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.email}}</td>
<td>
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">删除</button>
</td>
</tr>
<tr>
<td colspan="5" class="text-right">
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">删除所有</button>
</td>
</tr>
</tbody>
</table>
<!-- 模态框，弹出框 -->
<div class="modal fade" id="del">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title" v-show="nowIndex!==-1">确认要删除用户：{{users[nowIndex]?users[nowIndex].name:''}} 吗？</h4>
<h4 class="modal-title" v-show="nowIndex===-1">确认要删除所有用户吗？</h4>
</div>
<div class="modal-body text-center">
<button class="btn btn-primary" data-dismiss="modal">取消</button>
<button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUser">确认</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
扫一扫
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
