Vue-js
一，框架
框架
什么是框架
盖高楼大厦，框架结构.
框架结构就是大厦主体，基本功能
把很多基础功能已经实现了（封装了）
框架：在基础语言之上，对各种基础共呢个进行封装，方便开发者，提高开发效率
举例：
现在：点击一个按钮 触发事件，获得要操作的标签，在对标签内容进行操作
框架：操作网页时，程序员只关注内容即可，对标签内容的更新等操作，都由框架完成.
前端框架
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 = 1let 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>