1.VUE简介
它是一个构建用户界面的框架 Vue是一个前端框架 js jq
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任
1.1 介绍与描述
声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 自动跟踪 JavaScript状态并在其发生变化时响应式地更新 DOM。
渐进式框架：Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。
1.2 Vue 的特点
- 遵循 MVVM 模式
- 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发3. 它本身只关注UI, 也可以引入其它第三方库开发项目
1.3 与其它 JS 框架的关联
- 借鉴 Angular 的模板和数据绑定技术
- 借鉴 React 的组件化和虚拟 DOM 技术
1.4 Vue 周边库
- vue-cli: vue 脚手架
- vue-resource
- axios ：异步
- vue-router: 路由
- vuex: 状态管理
- element-ui: 基于 vue 的 UI 组件库(PC 端)
……
- MVVM的思想
2.1 MVVM 设计思想
MVC
|--M Model （domain,service,serviceimpl.utils.pojo.mapper）
|--V view thymeleaf jsp html ${user}
|--C controller 接收前端请求(控制器)
Model：对应数据层的域模型，它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在模型层间关系里，它主要用于抽象出 ViewModel 中视图的 Model。个人理解：后端提供API，后端服务架构是 控制器+数据模型 或者 纯控制器。
View：View是作为视图模板，用于定义结构、布局。它自己不处理数据，只是将ViewModel中的数据展现出来。此外为了和ViewModel产生关联，那么还需要做的就是数据绑定的声明，指令的声明，事件绑定的声明。ViewModel和View之间是双向绑定，意思就是说ViewModel的变化能够反映到View中，View的变化也能够改变ViewModel的数据值。
ViewModel：ViewModel起着连接View和Model的作用，同时用于处理View中的逻辑。在MVC框架中，视图模型通过调用模型中的方法与模型进行交互，然而在MVVM中View和Model并没有直接的关系，在MVVM中，ViewModel从Model获取数据，然后应用到View中。个人理解：Web前端的webserver对View进行双向绑定渲染。
整个MVVM实际上实现了前后端分离，通过api来实现前后端交互，前端通过纯js或者双向绑定框架来渲染页面。
前后端不分离（car 页面写在car项目里面 html thymeleaf（模板引擎） ）
前后端分离
大概如：
数据库（MySQL、PostgreSQL）<—双向交互—>api（php、java、Python、node）<—双向交互—>ajax/fetch/websocket（node服务、jQ、js）<—双向绑定—>html（标签、css）。
MVVM有利于项目分工和升级，所谓对前后端分离。但也有缺点，就是不利于SEO 。
也就是搜索引擎优化的逻辑，简单说就是内部优化和外部优化困难 。
MVC：服务端来渲染数据，老旧模式。MC属于纯后端，V属于前端，js权重不高，有利于SEO。
万物基于api，一套api可以针对小程序、app、前端，为何不首先使用。需要SEO对部分，单独分离出项目，采用MVC渲染静态页面或者纯html即可。
2.2 MVVM图例解析
- 安装和部署
IDEA中直接使用插件 vue 下载即可
让Idea识别vue语法
3.1 直接下载并用<script> 标签引入
Vue 会被注册为一个全局变量。
在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!
开发版本包含完整的警告和调试模式
https://cn.vuejs.org/v2/guide/installation.html
3.2 CDN
对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
3.3 NPM（后面讲）
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
3.4 浏览器安装开发者工具
Chrome浏览器安装Vue.js devtools插件
注意：Chrome浏览器版本过低需要找低版本的crx文件
1、浏览器访问极简插件
https://chrome.zzzmh.cn/#/index
2、右上角搜索框搜索vue DevTools插件
3、在本地文件夹中解压刚刚下载的插件，解压后如下所示
4、打开谷歌浏览器--更多工具--拓展程序
注意：打开开发者模式
5、将解压的文件夹拉到4中拓展程序页面
6、安装成功
- VUE的基本格式
<!-- 引入Vue -->
<script type="text/javascript" src="./js/vue.js"></script>
格式：
new Vue（{
Key:value,
Key:value,
Key:value,
...
Key:value
}）
key是固定值：el，data，methods...我们会逐个介绍
5.Vue的基本语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
5.1 插值语法
格式：{{XXX}}
功能：用于解析标签体内容。
写法：xxx是js表达式，且可以直接读取到data中的所有属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>初识Vue</title>
<!-- 引入Vue -->
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
-->
<div id="demo">
<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>
<script type="text/javascript" >
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
/* 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；*/
//创建Vue实例 Vue实例和容器是一一对应的
new Vue({
el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'dalang',
address:'北京'
}
})
</script>
</body>
</html>
5.2 v-text,v-html,v-pre,v-once指令
<span id=”aaa”></span>
$(“#aaa”).html(‘<font color=red>RED</font>’)
$(“#aaa”).text(‘<font color=red>RED</font>’)
5.2.1 v-text
v-text主要用来更新textContent，可以等同于JS的text属性。
<span v-text="msg"></span>
这两者等价：
<span>{{msg}}</span>
5.2.2 v-html
双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
或者jquery的$().html(aaa)
<div v-html="rawHtml"></div>
这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。
5.2.3 v-pre
v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
<div id="app">
<span v-pre>{{message}}</span> //这条语句不进行编译
<span>{{message}}</span>
</div>
最终仅显示第二个span的内容
5.2.4 v-once
v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
<span v-once>This will never change:{{msg}}</span> //单个元素
<div v-once>//有子元素
<h1>comment</h1>
<p>{{msg}}</p>
</div>
上面的例子中，msg即使产生改变，也不会重新渲染。
5.3 数据绑定
1，v-bind 字面意思为绑定。是vue中提供的用户绑定属性的指令。
v-bind可简写成 :
2，v-model 只能用于表单元素的双向绑定指令
Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value可以简写为v-model，v-model默认收集的就是value值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>数据绑定</title>
<!-- 引入Vue -->
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 普通写法 -->
<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
双向数据绑定：<input type="text" v-model:value="name"><br/> -->
<!-- 简写 -->
单向数据绑定：<input type="text" :value="name"><br/>
双向数据绑定：<input type="text" v-model="name"><br/>
<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
<!-- <h2 v-model:x="name">你好啊</h2> -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'你好'
}
})
</script>
</html>
5.4 双向绑定v-model 小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id ="app">
<input v-model="number1" />
<select v-model="opt" >
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="÷">÷</option>
</select>
<input v-model="number2" />
<button @click="compute">=</button>
<input v-model="cutNumber"/>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
number1:0,
number2:0,
opt:'+',
cutNumber:0
},
methods: {
compute(){
switch(this.opt){
case '+':
this.cutNumber=parseInt(this.number1)+parseInt(this.number2)
break;
case '-':
this.cutNumber=parseInt(this.number1)-parseInt(this.number2)
break;
case '*':
this.cutNumber=parseInt(this.number1)*parseInt(this.number2)
break;
case '÷':
this.cutNumber=parseInt(this.number1)/parseInt(this.number2)
break;
}
}
}
});
</script>
</body>
</html>
5.5 El和data的两种格式
data与el的2种写法
> 1.el有2种写法
(1).new Vue时候配置el属性。 (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。2.data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，
以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>el与data的两种写法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h1>你好，{{name}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//el的两种写法
/* const v = new Vue({
//el:'#root', //第一种写法
data:{
name:'世界1'
}
})
console.log(v)
v.$mount('#root') //第二种写法 */
//data的两种写法
new Vue({
el:'#root',
//data的第一种写法：对象式
/* data:{
name:'世界'
} */
//data的第二种写法：函数式
data(){
console.log('@@@',this) //此处的this是Vue实例对象
return{
name:'世界2'
}
}
})
</script>
5.6 事件绑定
5.6.1 基本使用
在以前的开发中。我们使用onclick等属性去设置点击事件，在vue 中可以使用v-on去设置方式，可简写成@
使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件的基本使用</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>欢迎来到{{name}}</h2>
<!-- <button v-on:click="showInfo">点我提示信息</button> -->
<button @click="showInfo1">点我提示信息1（不传参）</button>
<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
name:'英雄联盟',
},
methods:{
showInfo1(event){
// console.log(event.target)
// console.log(event.target.innerText)
// console.log(this) //此处的this是vm
alert('召唤师你好！')
},
showInfo2(event,number){
console.log(event,number)
// console.log(event.target.innerText)
// console.log(this) //此处的this是vm
alert('青铜嘴强王者--你好！！')
}，
/*show1:()=>{
alert("show1")
console.log("show1是被谁调用的：",this)//箭头函数的this指向window
}*/
}
})
</script>
</html>
注意：methods中配置的函数，不要用箭头函数！否则this就不是vm了；
@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
函数的调用和$event
事件的方法名不带圆括号 的形式，event对象将被自动当做实参传入；
事件的方法名带圆括号的形式，我们需要把$event变量作为参数，显式传入方法中。
<body>
<div id="app">
<input type="checkbox" @click="click" > 方法名称，不带括号 <br>
<input type="checkbox" @click="click2()" > 方法名称，后面有括号 <br>
<input type="checkbox" @click="click4(233)" > clickMe <br>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods: {
click(event) {
console.log("方法名称，不带括号",event); // object
},
click2(event) {
console.log("方法名称，后面有括号",event); // undefined
},
click4(val) {
console.log("传参没有传递$event",event); // object
alert(val)
}
}
});
</script>
$event：传递参数使用 传参时不写$event可以吗？
以前不可以！
既没有传入实参，也没有接收的形参，这个 event对象的来源，window.event。
5.6.2 事件修饰符
- prevent：阻止默认事件（常用）
本身含有事件阻止本身事件，触发vue绑定的事件
2.stop：阻止事件冒泡（常用）
当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触 发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件修饰符</title>
<!-- 引入Vue -->
<script type="text/javascript" src="./js/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: skyblue;
}
.box1{
padding: 5px;
background-color: skyblue;
}
.box2{
padding: 5px;
background-color: orange;
}
.list{
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>欢迎来到{{name}}</h2>
<!-- 阻止默认事件（常用） -->
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡（常用） -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
<!-- 修饰符可以连续写 -->
<!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
</div>
<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>
<!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'德莱联盟'
},
methods:{
showInfo(e){
alert('嘴强王者--你好！')
// console.log(e.target)
},
showMsg(msg){
console.log(msg)
}
}
})
</script>
</html>
5.6.3 鼠标键盘事件（玩玩）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id ="app">
<img :src="src" width="200" height="200" v-bind:title="title" />
<img src="images/bmw.png" width="250" height="250" :title="title" />
<div>{{title}}</div>
<br>
<a href="http://www.baidu.com">去百度</a>
<a :href="baidu">去百度</a>
<br>
<input :value="title" />
<!-- 事件绑定 -->
<img :src="src" v-on:click="toBadu" width="200" height="200" v-bind:title="title" />
<img :src="src" @click="toBadu" width="200" height="200" v-bind:title="title" />
<br />
<select @change="chageCity">
<option value="">请选择</option>
<option value="武汉">武汉</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<input type="text" @focus="getFocus" @blur="lostFocus" :value="currentSelectCity">
<div style="width: 300px;height: 300px;background-color: blue;"
@mouseEnter="mouseEnterfun"
@mouseMove="mouseMovefun"
@mouseOut="mouseOutfun"
@mouseDown="mouseDownfun"
@mouseUp="mouseUpfun"
></div>
<hr>
<input type="text" v-model="msg" />
<div>{{msg}}</div>
<button @click="chageMsg">使用JS改成msg的值</button>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
title:'BMW',
baidu:"http://www.baidu.com",
src:"images/bmw.png",
currentSelectCity:undefined,
msg:"的是输入框的内容"
},
methods: {
toBadu(){
window.location.href=this.baidu
},
chageCity(x){
console.log(x.srcElement.value);
this.currentSelectCity=x.srcElement.value
},
getFocus(){
console.log("得到焦点")
},
lostFocus(){
console.log("失去焦点")
},
mouseEnterfun(){
console.log("鼠标进入")
},
mouseMovefun(obj){
console.log("鼠标移动x:"+obj.x+" y"+obj.y)
},
mouseOutfun(){
console.log("鼠标出去")
},
mouseDownfun(){
console.log("鼠标按下")
},
mouseUpfun(){
console.log("鼠标弹起")
},
chageMsg(){
this.msg="我是改变之后的值"
}
}
});
</script>
</body>
</html>
5.6.4 练习：数组操作
<!--给按钮添加单击事件，完成按钮中的功能-->
<div id="app">
<button v-on:click="mth1">在下标为2的地方添加一条记录数据</button>
<button v-on:click="mth2">在最后面添加一条记录数据</button>
<button v-on:click="mth3">删除2的一条记录数据</button>
<button v-on:click="mth4">删除最后一条记录数据</button>
<button @click="mth5">在console控制台遍历userList数组</button>
</div>
<script type="text/javascript">
let vue = new Vue({
el:"#app",
data:{
userList:[
{id:1,name:"小明",address:"武汉",sex:1},
{id:2,name:"小红",address:"东莞",sex:0},
{id:3,name:"小芳",address:"佛山",sex:0},
{id:4,name:"小丽",address:"深圳",sex:0}
]
},
methods:{
mth1:function(){
this.userList.splice(2,-1,{id:5,name:"小丽力",address:"深圳",sex:1})
},
mth2:function(){
this.userList.push({id:6,name:"小丽力1",address:"深圳",sex:1})
},
mth3:function(){
this.userList.splice(2,1)
},
mth4:function(){
this.userList.pop();
},
mth5:function(){
for(let index in this.userList){
console.log(this.userList[index]);
}
}
}
});</script>
5.7 判断属性
v-if
格式：
(1)v-if="表达式"
(2)v-else-if="表达式"
(3)v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，要求结构不能被“打断”。
<div id="app">
<button v-on:click="mth1">修改flag值</button>
<p v-if="flag==true">我是true</p>
<p v-else>我是false</p>
</div>
new Vue({
el:"#app",
data: {
flag: false
},
methods:{
mth1:function(){
this.flag = !this.flag;
}
}
});
<div id="app">
请输入成绩: <input type="text" v-model="score">
<hr>
<p v-if="score>'90'">优秀</p>
<p v-else-if="score>'80'">良好</p>
<p v-else-if="score>'70'">一般</p>
<p v-else-if="score>='60'">及格</p>
<p v-else>不及格</p>
</div>
new Vue({
el:"#app",
data:{
score:'99'
}});
v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
<p v-show="flag">我是show方法</p>
<p v-show="n==1">我是show方法</p>
5.8 循环属性
v-for:
> 1.用于展示列表数据
2.语法：v-for="(item, index) in xxx" :key="yyy"
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表（遍历数组）</h2>
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息（遍历对象）</h2>
<ul>
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>测试遍历字符串（用得少）</h2>
<ul>
<li v-for="(char,index) of str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数（用得少）</h2>
<ul>
<li v-for="(number,index) of 5" :key="index">
{{index}}-{{number}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
car:{
name:'奥迪A8',
price:'70万',
color:'黑色'
},
str:'hello'
}
})
</script>
5.9 表单数据
<input type="text"/>
则v-model收集的是value值，用户输入的就是value值。
<input type="radio"/>
则v-model收集的是value值，且要给标签配置value值。
<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密码：<input type="password" v-model="userInfo.password"> <br/><br/>
年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
爱好：
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br/><br/>
地址
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br/><br/>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:18,
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo))
}
}
})
- 过滤器（了解）
6.1 过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
6.1.1 局部过滤器
<div id="app">
//过滤器传参是直接把前面的参数传递给过滤器 利用管道符
<p>性别: {{sex==1?"男":"女"}}</p>
<p>性别: {{sex|sexFilter}}</p>
<p>系统时间: {{date|dateFilter}}</p>
<p>薪资: {{money|moneyFilter}}</p>
<!-- 多个过滤器串联 参数会传递给第一个过滤器 第一个过滤器过滤后的结果再传给第二个过滤器 -->
<h3>现在是：{{time | dateFilter | moneyFilter}}</h3>
</div>
<script type="text/javascript">
let vue = new Vue({
el:"#app",
data:{
sex:1,
date:new Date(),
money:3.1415926
},
filters:{
/*性别格式化过滤器*/
sexFilter:function(value){
return value==1?"男":"女";
},
/*时间格式化过滤器*/
dateFilter:function(value){
return value.getFullYear()+"年"+(value.getMonth()+1)+"月"+value.getDate()+"日";
},
/*薪资格式化过滤器*/
moneyFilter(value){
return value.toFixed(2)+"￥";
}
},
methods:{}
});
6.1.2 全局过滤器
把过滤器注册到vue对象上
<div id="app">
<p>性别: {{sex==1?"男":"女"}}</p>
<p>性别: {{sex|sexFilter}}</p>
<p>系统时间: {{date|dateFilter}}</p>
<p>薪资: {{money|moneyFilter}}</p>
</div>
/*性别格式化过滤器*/
Vue.filter("sexFilter",function(value){
return value==1?"男":"女";
});
/*时间格式化过滤器*/
Vue.filter("dateFilter",function(value){
return value.getFullYear()+"年"+(value.getMonth()+1)+"月"+value.getDate()+"日";
});
/*薪资格式化过滤器*/
Vue.filter("moneyFilter",function(value){
return value.toFixed(2)+"￥";
});
let vue = new Vue({
el:"#app",
data:{
sex:1,
date:new Date(),
money:3.1415926
}
});
- Vue的生命周期
Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。
beforeCreate( 创建前 )
这个时候，在实例被完成创建出来，el和data都没有初始化，不能访问data、method，一般在这个阶段不进行操作。
created( 创建后 )
这个时候，vue实例中的data、method已被初始化，属性也被绑定，但是此时还是虚拟dom，真是dom还没生成，$el 还不可用。这个时候可以调用data和method的数据及方法，created钩子函数是最早可以调用data和method的，故一般在此对数据进行初始化。
beforeMount( 挂载前)
此时模板已经编译完成，但还没有被渲染至页面中（即为虚拟dom加载为真实dom），此时el存在则会显示el。在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。
当vue实例中，el为挂载目标，未对el进行定义，则this.el显示undefined，但页面中存在template也能识别挂载目标，因为template可以被看成占位符。如果对其进行定义则显示，故所以，beforeMount读取不了真实的el，在mounted才能读取到真实的el，因为el只有渲染完成后才会存在。这里讲的el是真实的el。在真实的el之前存在前，在beforeMount中的其实是页面中的#app，是挂载的目标。
Mounted( 挂载后)
此时模板已经被渲染成真实DOM，用户已经可以看到渲染完成的页面，页面的数据也是通过双向绑定显示data中的数据。 这实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动。
beforeUpdate
更新前状态（view层的数据变化前，不是data中的数据改变前），重新渲染之前触发，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。只有view上面的数据变化才会触发beforeUpdate和updated，仅属于data中的数据改变是并不能触发。
updated
数据已经更改完成，dom也重新render完成。
beforeDestroy
销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)
destroyed
销毁后（Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件。
<body>
<div id="app">
<p>{{num}}</p>
<button @click="addNum()">num++</button>
<button @click="killVue();">销毁</button>
</div>
<script>
new Vue({
el:"#app",
data(){
return {
num:1,
}
},
methods:{
addNum(){
console.log("执行add方法")
this.num++;
},
killVue(){
this.$destroy();
}
},
beforeCreate(){
console.log("beforeCreate",this.num)
},
created(){
console.log("create",this.num)
},
beforeMount(){
console.log("beforeMount",this.num)
},
mounted(){
console.log("Mount",this.num)
},
beforeUpdate(){
console.log("beforeUpdate:",this.num)
//debugger 断点模式
},
updated(){
console.log("Updated:",this.num)
// debugger
},
//主动销毁 被动销毁
beforeDestroy(){
console.log("beforeDestroy",this.num)
this.addNum()
},
destroyed(){
console.log("destroyed",this.num)
}
});
</script>