一，框架
框架
什么是框架
盖高楼大厦，框架结构.
框架结构就是大厦主体，基本功能
把很多基础功能已经实现了（封装了）
框架：在基础语言之上，对各种基础共呢个进行封装，方便开发者，提高开发效率
举例：
现在：点击一个按钮 触发事件，获得要操作的标签，在对标签内容进行操作
框架：操作网页时，程序员只关注内容即可，对标签内容的更新等操作，都由框架完成.
前端框架
vue.js 是一个js框架，不是带替js，是对js进行了封装
后端框架
mybatis--jdbc
spring...
二，vue概述（vue.js）
1.vue概述
（核心库只关注视图层，易上手，便于和第三方库或既有项目整合）vue是一个前端JavaScript框架，对JavaScript进行封装. 和Angular.js、React.js 一起，并成为前端三大主流框架！
2.vue.js的特点
（1）体积小（封装的文件小）
（2）更高的运行效率
不直接频繁的对网页上的标签进行操作，基于dom技术进行优化
（3）实现数据的双向绑定，程序员只关心要操作的数据即可，把数据渲染到标签上交给vue框架处理
（4）生态丰富，学习成本低
三，vue搭建
方式一：直接引入<script>引入
下载Vue.js并导入.js文件
<script src="js/vue.js"></script>
方式二：命令行工具（CLI）
安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。
四，第一个Vue程序
1.导入开发版本的Vue.js
2.创建Vue实例对象，设置el属性和data属性
3.使用简介的模板语言把数据渲染到页面上
<script src="js/vue@2.js"></script><div id="app">
{{message}}
</div><script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
message:'Hello Vue'
},
methods:{
}
})
</script>Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统
代码解析：
{{ 变量 }} ,插值表达式获取 data 数据
new Vue();创建 Vue 对象(VM 对象)
el:数据挂载的 dom 对象
Vue 会管理 el 选项命中的元素及其内部的后代元素
可以使用其他的选择器，但是建议使用 ID 选择器
可以使用其他的闭合标签，不能使用 HTML 和 BODY
data:{ message:’hello world’} model 数据
Vue 中用到的数据定义在 data 中
data 中可以写复杂类型的数据,如对象,数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/vue@2.js"></script>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
message:'Hello Vue'
}
})
</script>
</body>
</html>五，Vue指令
指令前带有v-开头以表示它们是Vue提供的特殊属性
1.v-text
作用是设置标签的文本内容
默认写法会替换全部内容，使用差值表达式可以替换指定内容
内部支持写表达式
2.v-html
作用是设置元素的 innerHTML
内容中有 html 结构会被解析为标签
内部支持写表达式
3.v-on
作用是为元素绑定事件
事件名不需要写 on 指令可以简写为@
绑定的方法定义在 methods 属性中,可以传入自定义参数
使用样例1：v-text与v-htm，v-onl的使用与v-text与v-htm的异同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- 导入vue.js库 -->
<script src="js/vue@2.js"></script>
<body>
<!--
{{message}} v-html v-text区别
{{message}}不会覆盖标签体中的内容，只是在标签内部插入一个值
v-html和v-text 会用数据覆盖标签体中的内容
v-html:会解析字符串中的标签
v-text:不能解析字符串中的标签
-->
<div id="app">
<div>{{a}}</div>
<p>{{ message}}</p>
<div v-html="message1">123</div>
<div v-text="message1">123</div>
<!--
v-model可以将输入标签中的值（value） 绑定到指定的属性上
-->
<input v-model="message"/>
<input type="button" value="测试" @click="test3()"/>
</div>
<div id="b">
<!--
v-on:click
@click
-->
<input type="button" value="按钮1" v-on:click="test1()"/>
<input type="button" value="按钮2" v-on:click="test2()"/>
</div>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
a:"abc",
message:"hello world",
message1:"<b>hellow</b>"
},
methods:{
test3(){
this.message = "jim"
}
}
})
let i = 1
let b = new Vue({
el:'#b',
data:{
message:"hello world"
},
methods: {//定义函数
test1() {//this表示vue对象
alert(this.message);
},
test2(){
alert(this.message)
}
}
})
</script>
</body>
</html>
4.v-model
作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值 双向数据绑定
使用格式：
<input type="text" v-model="message"/>
<p>{{message}}</p>
data:{
message:""
}
使用样例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- 导入vue.js库 -->
<script src="js/vue@2.js"></script>
<body>
<div id="app">
<div>{{a}}</div>
<p>{{ message}}</p>
<input v-model="message"/>
</div>
<script type="text/javascript">
/*
创建一个vue框架，把网页上指定id的标签与vue对象进行绑定
data中使用的数据 键：值
{{变量名}}插值表达式，获取data中定义的数据
*/
let app = new Vue({
el:'#app',//id前加#，class前加.
data:{
a:"abc",
message:"hello world"
}
})
alert(a)
</script>
</body>
</html>
5.v-show
作用是根据真假切换元素的显示状态
原理是修改元素的 display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为 true 元素显示，值为 false 元素隐藏
数据改变之后，对应元素的显示状态会同步更新
使用格式;
<img v-show="isShow" src="img/3.jpg" />
<img v-show="age>18" src="img/3.jpg" />
data:{
isShow:true, age:20
}
6.v-if
作用是根据表达式的真假切换元素的显示状态
本质是通过操纵 dom 元素来切换
显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除
频繁的切换 v-show，反之使用 v-if，前者的切换消耗小
使用样例3：v-show和v-id的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- 导入vue.js库 -->
<script src="js/vue@2.js"></script>
<body>
<div id="app">
<!--
v-show="布尔值" 根据布尔值显示或隐藏当前标签
通过display的值控制标签显示或隐藏，每次不需要重新创建标签，效率高
-->
<div v-show="isshow">
123
</div>
<div v-show="a>5">456</div>
<!--
v-if="布尔值" 根据布尔值显示或隐藏当前标签
每次从网页中要删除/创建标签，数量多了效率低
v-if和v-else标签必须要挨着
-->
<div v-if="isshow">789</div>
<div v-if="a>5">8910</div>
<div v-else>aaaa</div>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
isshow:false,
a:1
}
})
</script>
</body>
</html>
7.v-bind
作用是为元素绑定属性
完整写法是 v-bind：属性名
简写的话可以直接省略 v-bind，只保留：属性名
使用格式：
<img v-bind:src="imgSrc" />
<img :src="imgSrc" />
<img :title="imgTitle" :src="imgSrc" />
data:{
imgSrc:'img/3.jpg' imgTitle:"这是一张图片"
}
我们可以给v-bind：class一个对象，以动态地切换class：
<div v-bind:class="{ active: isActive }"></div>
data:{
isActive :true
}
使用样例4：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- 导入vue.js库 -->
<script src="js/vue@2.js"></script>
<style>
.active{
color: red;
}
</style>
<body >
<div id="app">
<!-- <img src="imgsrc"/> 错误写法，不能将data中的属性填充到普通的标签中 -->
<!-- <img v-bind:src="imgsrc"/> -->
<img :src="imgsrc" :title="title"/>
<input type="button" value="下一张" @click="next()"/>
<div v-bind:class="{ active: isActive}">状态</div>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
message:"hello world",
imgsrc:"img/1.jpg",
title:"这是第一张图片",
isActive:true
},
methods:{
next(){
this.imgsrc = "img/2.jpg",
this.title="这是第二张图片"
}
}
})
</script>
</body>
</html>
8.v-for
作用是根据数据生成列表结构
数组经常和 v-for 结合
使用语法是（item，index）in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上是响应式的
为循环绑定一个 key 值 :key=”值” 尽可能唯一
使用样例5：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- 导入vue.js库 -->
<script src="js/vue@2.js"></script>
<style>
.active{
color: red;
}
</style>
<body>
<div id="app">
<ol>
<li v-for="p in provinces">
{{p}}
</li>
</ol>
<table>
<tr>
<td>序号</td>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr v-for="student,index in students">
<td>{{index+1}}</td>
<td >{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.gender}}</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
//..模拟从服务器后端响应回来的数据,在前端把后端响应的数据动态显示在网页上
provinces:['北京','天津','上海','重庆','陕西'],
students:[{id:1,name:'jim',gender:'男'},
{id:2,name:'tom',gender:'男'},
{id:3,name:'#',gender:'男'},
{id:4,name:'b阮',gender:'男'}]
},
methods:{
}
})
</script>
</body>
</html>
需注意：v-for使用时同等与java中的强制for循环，不会根据所有地表格数量自动填充
六，Vue生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
生命周期样例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/vue@2.js"></script>
<body>
<div id="app">
<ul>
<li v-for="student in students">
id:{{student.id}}
name:{{student.name}}
gender:{{student.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
/*
vue对象生命周期
*/
let app = new Vue({
el:"#app",//vue对象绑定标签
data:{//定义数据
//..模拟从服务器后端响应回来的数据,在前端把后端响应的数据动态显示在网页上
provinces:['北京','天津','上海','重庆','陕西'],
students:[{id:1,name:'jim',gender:'男'},
{id:2,name:'tom',gender:'男'},
{id:3,name:'#',gender:'男'},
{id:4,name:'b阮',gender:'男'}]
},
methods:{//自定义函数
},//vue对象生命周期 钩子函数 在生命周期的每个阶段为我们提供了一个函数，可以自动执行
beforeCreate() {
console.log("beforeCreate")
},
created() {//vue对象创建成功之后
console.log("created")
},
beforeMount() {//创建成功之后，绑定之前
console.log("beforeMount")
},
mounted(){//vue对象创建成功 且与目标标签绑定成功 ，这是我们常用（需要）的，再次自动的与后端交互
//在网页打开后，自动执行某些操作
//如自定的像后端发送请求加载数据
console.log(1111)
}
})
</script>
</body>
</html>