渐进式框架、只关注视图层、自底向上增量开发的设计
目标 简单 API 实现响应的数据绑定和组合的视图组件
2013 年底开始开发 目前3.0版本 https://cn.vuejs.org/
Angular/React/Vue 框架
解耦视图与数据，前后端分离（异步操作）（后端测试Postman、Swagger；前端测试 读 json数据 文件）
M-V-VM 模型 关注模型和视图
M：即 Model，模型（数据），包括数据和一些基本操作
V：即 View，视图，页面渲染结果
VM：即 View-Model，模型和视图间的双向操作
双向数据绑定
1）MVVM 之前
DOM 操作 Model 渲染 View
DOM 获取 View 同步 Model
2）MVVM 之后
DOM 操作封装
M V 双向绑定
把开发人员从繁琐的 DOM 操作中解放，把关注点放在如何操作 Model 上
下载安装
1）CDN 在线引入
炳汉的独白
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2）下载后离线使用
开发版本: https://vuejs.org/js/vue.js
生产版本: https://vuejs.org/js/vue.min.js
<script src="js/vue.min.js"></script>
入门案例
// 显示数据
<div id="app">
<!-- 显示数据-->
{{msg}}
</div>
// 定义对象 -- vue
var app = new Vue({
// 对谁进行 vue 修饰 -- 用 vue 操作的目标是谁 -- 块 --
// 通过 id 选择器找到元素,元素中的内容可以被vue识别或操作
el: '#app',
// 通过 data 属性在内部设置键值对
data:{
msg:'vue入门案例'
}
});
(1) v-text和v-html
类似innerText text()和innerHTML html()，给页面中带文本节点元素绑定数据
(2) v-if和v-show
根据表达式的boolean值进行判断是否渲染该元素（与元素的显示和隐藏有关）boolean值为true表示显示，false表示隐藏。
(3) v-on
作用：使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。
语法：
(4) v-for
作用：列表渲染,当遇到相似的标签结构时,就用v-for去渲染
格式：
(item,index) in 数组或集合
参数item:数组中的每个元素
参数index:数组中元素的下标
(value, key, index) in 对象
参数index:对象中每对key-value的索引 从0开始
参数key:键
参数value:值
(5) v-bind
作用: 可以给标签上的任何属性绑定值
格式：v-bind:属性="值"
简写格式：:属性="值"
属性值一部分进行替换的格式：:属性="'常量值' + vue对象data中的数据"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 显示数据-->
{{msg}}
<hr>
<p v-text="msg"></p>
<p v-html="msg"></p>
<p v-if="flag">是否显示--由flag值决定，如果值为true则显示，如果值为false则不显示</p>
<p v-show="flag">是否显示--由flag值决定，如果值为true则显示，如果值为false则不显示</p>
<hr>
<button v-on:click="method1()">提交</button><br>
<button @click="method1()">提交</button><br>
<hr>
<p v-for="(num,index) in list">{{num}} -- {{index}}</p>
<hr>
<p>{{user.name}} -- {{user.sex}} -- {{user.age}}</p>
<hr>
<p v-for="(ue,inde) in users">{{ue.name}} -- {{ue.sex}} -- {{ue.age}}</p>
<hr>
<!-- 字符串拼接-->
<p v-text="'我们是'+str"></p>
<p v-text="`我们是${str}`"></p>
<hr>
<a v-bind:href="url">百度</a>
<a :href="url">百度</a>
<hr>
<img v-bind:src="imgUrl">
<img :src="imgUrl">
</div>
<div></div>
<script type="text/javascript">
// 定义对象 -- vue
var app = new Vue({
// 对谁进行 vue 修饰 -- 用 vue 操作的目标是谁 -- 块 --
// 通过 id 选择器找到元素,元素中的内容可以被vue识别或操作
el: '#app',
// 通过 data 属性在内部设置键值对
data:{
msg:'<h3>vue入门案例</h3>',
flag:false,
list:[10,11,12,13,14],
user:{'name':'张飞','sex':0,'age':30},
users:[{'name':'张飞1','sex':0,'age':30},{'name':'张飞2','sex':0,'age':30},{'name':'张飞3','sex':0,'age':30}],
str:'社会主义好青年',
url:'http://www.baidu.com',
imgUrl:'imgs/1.jpg'
},
methods:{
// 可以定义多个函数
method1() {
alert('123')
},
method2() {
}
}
});
</script>
</body>
</html>
(6) v-model
（1）vue对象中的数据发生变化可以更新到界面
（2）通过界面可以更改vue对象中数据
（3）v-model 会忽略所有表单元素的 value、 checked 、 selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在data选项中声明初始值。
v-model修饰符：
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步
.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
(7) computed
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便
计算属性可以简化表达式
例如：
(8) watch
watch可以让我们监控一个值的变化。从而做出相应的反应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试双向绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<input type="text" v-model="uname">{{uname}}
<input v-model="user.upwd">{{user.upwd}}
<input v-model="user.uage">{{user.uage}}
<hr>
{{today}}
<hr>
{{strlen}}
<hr>
<input v-model="usex">
<select v-model="ucity">
<option value="1">海淀</option>
<option value="2">昌平</option>
<option value="3">延庆</option>
<option value="4">房山</option>
</select>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
uname:'',
user:{
upwd:'',
uage:''
},
usex: '',
ucity:''
},
computed:{
today() {
return new Date();
},
strlen() {
return 'abcdef'.substr(0,3);
}
},
watch:{
usex(newVal,oldVal) {
console.log(newVal + "---" + oldVal);
},
ucity(newVal,oldVal) {
console.log(newVal + "---" + oldVal);
}
}
});
</script>
</body>
</html>
概念
Vue实例从创建到销毁的过程，就是生命周期。
详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
在vue整个的生命周期中提供了八个钩子函数：
beforeCreate 创建前
created 创建结束
beforeMount挂载前
mounted挂载结束
beforeUpdate修改前
updated修改后
beforeDestroy销毁前
destroyed销毁后
图示
alert 显示信息不全
console 显示信息全
| 占位符 | 描述 |
|---|---|
| %s | 字符串 |
| %d/%i | 整数 |
| %f | 浮点数 |
| %o/%O | object 对象 |
| %c | css 样式 |
Vue 的 Ajax
一般使用 axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试异步操作</title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
{{flag}}
<hr>
<button @click="method1()">发出get异步请求的按钮1</button>
<hr>
<button @click="method2()">发出post异步请求的按钮2</button>
<hr>
<button @click="method3()">发出post异步请求的按钮3</button>
<hr>
<button @click="method4()">发出post异步请求的按钮4</button>
<span v-text="user.id"></span>
<span v-text="user.name"></span>
<span v-text="user.sex"></span>
<hr>
<p v-for="ue in userList">{{ue.id}} -- {{ue.name}} -- {{ue.sex}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
flag:'',
user:{},
userList:[]
},
methods:{
method1() {
//alert(123)
axios.get('user/first?id=1001&name=zhangfei&sex=1').then((response) =>{
console.log(response);
console.log(response.data.flag);
console.log(response.status);
this.flag = response.data.flag;
});
},
method2() {
axios.post('user/sec',{'id':1002,'name':'关羽','sex':1}).then((res) => {
console.log(res);
this.user = res.data
});
},
method3() {
axios.post('user/third').then((res) => {
console.log(res);
this.userList = res.data
});
},
method4() {
axios({
url:'user/forth',
method:'post', // get、put、delete 都可以
data:{
'id':1004,
'name':'caocao',
'sex':1
},
responseType:'json'
}).then((res) => {
console.log(res.data);
});// .catah(error => {}) 处理异常
}
}
});
</script>
</body>
</html>