目录
Vue介绍
Vue--可以说是一个JavaScript的框架，由我们国家的大神尤雨溪制作的
首先需要导入vue.js：
<script src="js/vue.js"></script>然后需要建立一个Vue实例，所有的操作都需要在Vue实例里完成：
ps:每个元素之间用,间隔
const app = new Vue({
// el用来给Vue实例一个作用域
el:"#app",//根据获取选择器的方式:id=app
data: {
// 用来给Vue定义一些相关的数据
msg: "欢迎使用Vue",
},
});插值表达式
Vue专门的一种方式：用两个大括号包括Vue里的数据
<div id="app">
<!-- 插值表达式 -->
<h1>{{msg}}</h1>
</div>
多种存取方式:
const app = new Vue({
el: "#app",
data: {
user: {
msg:"hello Vue",
name :"admin",
password: "123456",
},
lists: ["北京","上海","广州","深圳","杭州"],//数组
users: [{name:"小强",age:25},{name:"小红",age:18}]
},
});怎么获取这些值呢？
<div id="app">
<h1>{{user.msg}} --- {{user.name}} --- {{user.password}}</h1>
<h1>{{lists[0]}}---{{lists[3]}}---{{lists[4]}}</h1>
<h1>{{users[0].name}} --- {{users[0].age}}</h1>
<h1>{{user.msg.indexOf('u')}}</h1>//获取下标
</div> 
插值闪烁问题：
什么是插值闪烁:
当网络环境不好的时候会出现插值表达式，然后等到网络环境好的时候才能成功翻译成功
插值闪烁会先出现：{{msg}},等到网络好嘞会出现:Vue内容
避免插值闪烁：
在标签内添加Vue属性:<h1 v-text="msg"></h1>或者<h1 v-html="msg"></h1>
属性/事件
属性绑定(v-bind:src)--简写:src
可以通过Vue---data写src属性，来赋值
事件绑定(v-on:click)---简写@click
可以通过Vue--methods写函数事件:click里可以传参数,并在方法里可以获取到
通过实例来简单了解以下click事件：
显示/隐藏
v-show/v-if:效果都是一样的都可以赋值true/false----可以控制显示或者隐藏
代码：
<div id="app">
<h1 v-show="flag">欢迎光临</h1>
<button @click="toggle">显示 / 隐藏</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
flag:true,
},
methods: {
toggle() {
this.flag = !this.flag;
}
},
});
</script>***面试题：
v-if和v-show的区别：
v-if直接操作DOM元素，底层---------浏览器不会出现任何的相关标签;
v-show是通过css控制DOM元素-----浏览器里标签的display属性设置为none;
鼠标移动事件
@mouseover-------鼠标移动
@mouseout---------鼠标移除
v-for属性
v-for写在哪一个标签中，就会生成多个对应的标签
ps:在使用v-for的时候，一定要加入:key,用来给vue内部提供重用和排序的唯一的值
例子：
<div id="app">
<span v-for="(value,key,index) in user">
{{index}} --- {{key}} --- {{value}}<br>
</span>
<ul>
<li v-for="(value,index) in lists">
{{index}} --- {{value}}
</li>
</ul>
<ol>
<li v-for="(u,index) in users" :key="u.id">
{{index}} --- {{u.name}} --- {{u.age}}
</li>
</ol>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
user:{name:"小强",age:23},
lists: ["北京","上海","广州","深圳","杭州"],
users: [{name:"小强",age:25},{name:"小红",age:18}]
},
});
</script> 
*Vue核心*双向绑定
1、HTML部分发生变化，Vue实例中对应的属性也会变化
2、Vue中发生变化，HTML中同样变化
1、使用v-model指定可以实现数据的双向绑定
2、所谓的双向绑定，表单中的数据和Vue实例中data的数据变化是同步的MVVM架构：双向绑定机制
Model：数据
View：页面，页面展示数据
VM：ViewModel 监听器
文本框示例：
<div id="app">
<input type="text" v-model="message">
<br>
<input type="text" v-model="message" value="message">
<br>
<span>{{message}}</span>
</div>
<script src="js/vue.js"></script>
<script>
const app= new Vue({
el:"#app",
data:{
message:'',
},
});
</script>单选框:
必须设置name="gender",然后可以通过设置gender的Vue属性来设置选中
<input type="radio" name="gender" value="m" V-model="gender">男
<input type="radio" name="gender" value="w" V-model="gender">女多选框:
设置hobby的属性必须设置为数组eg:hobby:[],否则会失效，选一个就会全选。
<input type="checkbox" v-model="hobby" value="A">A
<input type="checkbox" v-model="hobby" value="B">B
<input type="checkbox" v-model="hobby" value="C">C
<input type="checkbox" v-model="hobby" value="D">D下拉框:
获取的是选中的value值
<select name="" id="" v-model="sel">
<option value="x">X</option>
<option value="y">Y</option>
<option value="z">Z</option>
</select>在Vue里给数组增删改查的方式:
| 末尾增加元素 | .push() |
| 删除末尾元素 | .pop() |
| 反转元素 | .reverse() |
| 从小到大排序 | .sort() |
| 查找 | .find() |
| 包含 | .includes() |
| 从指定位置删除指定个数元素 | .splice(x,x) |
案例：写一个简易的记事本的实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="x">
<button @click="add">添加</button>
<ul>
<li v-for="(value,index) in lists">{{value}}<a href="#"
@click="del(index)">删除</a></li>
</ul>
<span>总数量:{{span}}</span>
<button @click="delAll">删除所有</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
span:"2",
x:'',
lists:["a","b"],
},
methods:{
add(){
this.span=this.lists.length+1;
this.lists.push(this.x);
this.x='';
},
del(index){
this.span=this.lists.length-1;
this.lists.splice(index,1);
},
delAll(){
this.lists=[];
this.span=0;
}
},
});
</script>
</body>
</html>其实大家细心的话，可以看出来，vue的解析过程，最终展现出来的HTML页面,是没有vue语法的，所以说，vue很厉害，他会解析成css+html组合使用应用到浏览器上
作业
1.图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<img :src="src">
<br>
<button @click="changeimg">切换图片</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
src:"sb1.jpg" ,
},
methods: {
changeimg() {
this.src = "sb2.jpg"
}
},
});
</script>
</body>
</html>运行效果
小结：当图片与代码不在同一文件时得加上路径
2.学生录入系统（双向绑定）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生录入系统</title>
<style>
#app{
margin: 50px auto;
width: 600px;
}
fieldset{
border: 1px solid orangered;
margin-bottom: 20px;
}
fieldset input{
width: 200px;
height: 30px;
margin: 10px 0;
}
table{
width: 600px;
border: 2px solid orangered;
text-align: center;
}
thead{
background-color: orangered;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--第一部分-->
<fieldset>
<legend>学生录入系统</legend>
<div>
<span>姓名:</span>
<input type="text" placeholder="请输入姓名" v-model="newStudent.name" >
</div>
<div>
<span>年龄:</span>
<input type="text" placeholder="请输入年龄" v-model="newStudent.age">
</div>
<div>
<span>性别:</span>
<select v-model="newStudent.sex" >
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<span>手机:</span>
<input type="text" placeholder="请输入手机号码" v-model="newStudent.phone" >
</div>
<button @click="createNewStudent()">创建新用户</button>
</fieldset>
<!--第二部分-->
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for="(p,index) in persons">
<td>{{p.name}}</td>
<td>{{p.sex}}</td>
<td>{{p.age}}</td>
<td>{{p.phone}}</td>
<td>
<button @click="deleteStuMsg(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:"#app",
data:{
persons: [
// {name: '张三', age: 20, sex: '男', phone: '18932323232'},
// {name: '李四', age: 30, sex: '男', phone: '18921212122'},
// {name: '王五', age: 20, sex: '男', phone: '18932223232'},
// {name: '赵六', age: 25, sex: '女', phone: '18932322232'},
],
newStudent:{name:'',age:0,sex:'男',phone:''}
},
methods:{
createNewStudent(){
//数据添加时，需要验证
if(this.newStudent.name==''){
alert("用户名不能为空");
return;
}
if(this.newStudent.age<=0){
alert("请输入正确年龄");
return;
}
if(this.newStudent.phone==''){
alert("手机号码不能为空");
return;
}
//住数组中添加一条记录 push()-尾部加 unshift-头部加
this.persons.unshift(this.newStudent);
//添加完成后清空数据
this.newStudent={name:'',age:0,sex:'男',phone:''}
},
//删除一条学生记录
//删除：删除(任意个数)—参数1：开始的索引；参数2：删除的长度
deleteStuMsg(index){
this.persons.splice(index,1);
}
}
});
</script>
</body>
</html>运行效果
总结
今天学的Vue非常有用，包括V标签，双向绑定让我印象深刻，还有图片切换已经可以熟练应用，还有张哥晚上的题让我眼前一亮，把双向绑定很好的应用上了，也让我学得更加透彻
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
