1.基本架构
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--导入vue--> <script type="text/javascript"> window.onload=function () { app=new Vue({//创建vue对象 el:'#msgDiv',//设置要渲染的根元素 data:{ age:50 } });//实例化MVVM的管理对象 } </script>
</head>
<body>
<!--如果要想使用Vue.js开发一定要有一个层进行Vue代码的编写-->
<div id="msgDiv">
{{age>18? 成年了:小屁孩}}//三目运算符
</div>
</body>
2.判断语句：
<div id="msgDiv">
<p>请输入年龄：<input type="number" v-model="age"></p>
<p v-if="age>0&&age<18">我还小</p>
<p v-else-if="age>=18&&age<=50">我成年长大了</p>
<p v-else="age>50">我老了</p>
</div>
当使用“v-if”语句处理的时候,如果发现条件不满足,那么对于语句所在的元素也会一起消失掉,如果现在希望条件不满足的时候,元素也会正常显示,则可以使用“ v-show”语句,是基于CSS的显示或隐藏控制。
3.v-show数据渲染
<div id="msgDiv">
<p v-show="age">50">我老了</p>
</div>
此时从控制台的elements下可以发现,当判断内容不满足的时候,元素的内容依然还会存在,只不过为其追加了一个层的隐藏处理。
4.v-for循环渲染：v-for语句的基本语法形式：v-for="迭代对象 in 集合"
说明：在整个的 Vue. js里面与原始的开发框架最大的不同是在于其可以实现一个独立的wEB前端运行机制,所以如果要想获取后
端的数据内容,那么就需要通过JsON的形式进行数据的传输,那么一旦程序接收到了JSON数据之后肯定要对数据进行解析执
行,例如:如果现在接收到了一组的部门结构的JSON数据,则就需要采用循环的方式进行内容的显示。
● 基本渲染（以JSON数组的方式出现）
window.onload=function () {
app=new Vue({
el:'#msgDiv',
data:{
depts:[//表示一组dept数据
{'deptno':10,'dname':'财务部','loc':'上海'},
{'deptno':20,'dname':'技术部','loc':'深圳'},
{'deptno':30,'dname':'管理部','loc':'北京'}
]
}
});//实例化MVVM的管理对象
}
<!--分割线-->
<div id="msgDiv">
<table>
<thead><tr><th>部门编号</th><th>部门名称</th><th>部门位置</th></tr></thead>
<tbody>
<tr v-for="dept in depts">
<td>{{dept.deptno}}</td>
<td>{{dept.dname}}</td>
<td>{{dept.loc}}</td>
</tr>
</tbody>
</table>
<p v-show="age>50">我老了</p>
</div>
● 索引数据
<div id="msgDiv">
<table>
<thead><tr><th>部门编号</th><th>部门名称</th><th>部门位置</th></tr></thead>
<tbody>
<tr v-for="(dept,index) in depts">
<td>{{index}}</td> <!--显示索引-->
<td>{{dept.deptno}}</td>
<td>{{dept.dname}}</td>
<td>{{dept.loc}}</td>
</tr>
</tbody>
</table>
</div>
● 下拉框展示
<div id="msgDiv">
<select id="dept">
<option v-for="dept in depts" id="{{dept.deptno}}">{{dept.dname}}-{{dept.loc}}</option>
</select>
</div>
5.v-bind 数据绑定
说明：在任何的一个HTML元素里面包含有一系列的配置属性,那么这些属性的内容都是可以被绑定的,只需要在data元素里定义有相应的数据信息,这些信息可以直接绑定到属性之中。
● 属性绑定：将Vue对象中的数据内容直接绑定在HTML元素上。
window.onload=function () {
app=new Vue({
el:'#msgDiv',
data:{
message:"这是一张Docker的软件LOGO"
}
});//实例化MVVM的管理对象
}
<!--分割线-->
<body>
<div id="msgDiv">
<img src="images/docker.png" v-bind:title="message"/><!--也可以将左边这一行写成右边的样式,右边这种格式最为常用--><img src="images/docker.png" :title="message"/>
</div>
</body>
注意：此语句与"v-for"语句有所不同，主要的原因在于现在是一个独立的元素，而使用"v-for"的结构是在一个Vue.js命令结构里面，
所以此时不能采用{{message}}语法进行属性的定义，所以以下的操作是无法进行绑定处理的：
<img src="images/docker.png" v-bind:title="{{message}}">
● 循环绑定：本次通过绑定的形式为每一个表格行设计一个id。
window.onload=function () {
app=new Vue({
el:'#msgDiv',
data:{
id:'deptTable',
trPrefix:'dept-',
depts:[
{'deptno':10,'dname':'财务部','loc':'上海'},
{'deptno':20,'dname':'技术部','loc':'广州'},
{'deptno':30,'dname':'研发部','loc':'深圳'}
]
}
});//实例化MVVM的管理对象
}
==================================================================================================
<div id="msgDiv"> <table id="id"> <thead><tr><th>NO.</th><th>部门编号</th><th>部门名称</th><th>部门位置</th></tr></thead> <tbody> <tr v-for="(dept,index) in depts" :id="trPrefix+dept.deptno"> <td>{{index}}</td> <td>{{dept.deptno}}</td> <td>{{dept.dname}}</td> <td>{{dept.loc}}</td> </tr> </tbody> </table> </div>
6. v-on事件绑定：绑定的函数如果不传参数直接写函数名称即可也可以加括号，如果传参数就要加括号了
● 绑定单击事件：如果要进行事件的绑定在 Vue.js需要考虑两个部分,一个是事件产生处理函数,一个是事件类型。
window.onload=function () {
app=new Vue({
el:'#msgDiv',
data:{ //数据绑定
message:"跟小李老师学java"
},
methods:{ //定义所有的操作函数
changeMessage:function(newMessage){
console.log('原始数据内容'+this.message);
console.log('修改数据内容'+newMessage);
this.message=newMessage;//修改数据内容
}
}
});//实例化MVVM的管理对象
}
=====================================
<div id="msgDiv">
<p>{{message}}</p>
<button v-on:click="changeMessage('下雨了，准备收衣服')">修改数据内容</button>
</div>
● 简化定义：在 vue.js里面由于事件的绑定比较常见,所以如果每一次都使用“v-on:xxx”的形式处理的话会比较繁琐,那么在 Vue.js里面提供了简化的数据绑定的处理操作,格式为“@事件名称”。
就可以将上面的按钮那一行换成下面这一行
<button @click="changeMessage('下雨了，准备收衣服')">修改数据内容</button>
● ES标准：在ES语法里面可以对事件进行各种的控制：下面这几个东西的具体作用可打开控制台在console下观察
● ".stop"：阻止事件冒泡操作；
● ".prevent"：提交事件不进行页面的重新加载；
● ".self"：只在本元素上进行事件的触发；
● ".once"：此事件只执行一次。
如下代码：这个时候的事件只能够执行一次，第二次将无法继续执行
<div id="msgDiv">
<p>{{message}}</p>
<button @click.once="changeMessage('下雨了，准备收衣服')">修改数据内容</button>
</div>
7.数组绑定
window.onload=function () {
app=new Vue({
el:'#msgDiv',
data:{ //数据绑定
inputDeptno:'99',
inputDname:'测试部门',
inputLoc:'测试文职',
depts:[//表示一组dept数据
{'deptno':10,'dname':'财务部','loc':'上海'},
{'deptno':20,'dname':'技术部','loc':'深圳'},
{'deptno':30,'dname':'管理部','loc':'北京'}
]
},
methods:{ //定义所有的事件处理函数
reverseArray:function(){
this.depts.reverse();//数组反转
},
addArray:function () {
this.depts.push({'deptno':this.inputDeptno,'dname':this.inputDname,'loc':this.inputLoc});
this.resetForm();//调用本地的函数(自己手写的函数)，进行数据内容的清空
},
deleteArray:function(ind){//删除数组内容
this.depts.splice(ind,1);//第一个参数为索引，第二个参数为删除个数,如果不加第二个参数，删除的是当前索引及索引下面的所有行，
//加上第二个参数即表示删除当前索引下的n行，n为第二个参数
},
resetForm:function () { //表单重置
this.inputDeptno='';
this.inputDname='';
this.inputLoc='';
}
}
});//实例化MVVM的管理对象
}
============================================
<div id="msgDiv">
<div id="deptForm" style="float: left;50%">
部门编号：<input type="text" v-model="inputDeptno"><br>
部门名称：<input type="text" v-model="inputDname"><br>
部门位置：<input type="text" v-model="inputLoc"><br>
<button @click="addArray()">添加部门</button><button @click="resetForm()">表单重置</button>
</div>
<div id="deptList" style="float:left; 50%">
<table>
<thead><tr><th>No.</th><th>部门编号</th><th>部门名称</th><th>部门位置</th><th>操作</th></tr></thead>
<tbody>
<tr v-for="(dept,index) in depts">
<td>{{index}}</td>
<td>{{dept.deptno}}</td>
<td>{{dept.dname}}</td>
<td>{{dept.loc}}</td>
<td><button @click="deleteArray(index)">删除</button></td>
</tr>
</tbody>
</table><p>
<button @click="reverseArray">数组反转</button></p></div>
</div>
8.Vue.js结合JQuery实现跨域访问：
9.表单控件绑定处理：
● 双向绑定：观察当前的双向绑定处理：
window.onload = function() {
app = new Vue({
el: '#msgDiv', // 设置要进行渲染的根元素
data: {
message: '嗨皮的学习，过好每一天'
}
}) ; // 实例化MVVM的管理对象
===================================================
<div id="msgDiv">
<p>消息内容：{{message}}</p>
请输入内容：<input v-model="message">
</div>
● 延迟修改：默认情况下,只要对表单中的内容进行了修改,双向绑定之后都会将修改的内容立即反应到输出环境上,但是在一些情况下可能不希望有这样的立即反应效果(变更为“ change”事件)。
请输入内容：<input v-model.lazy="message">
● 空格处理：在很多时候用户输入数据的情况下,有可能会岀现有前后有空格的问题,为了解决空格的输入问题,在进行绑定的时候可以通过“trim”配置属性进行定义;
请输入内容：<input v-model.trim="message">
● 数字处理：
window.onload = function() {
app = new Vue({
el: '#msgDiv', // 设置要进行渲染的根元素
data: {
count: '100' // 这个地方尽管输入的不是数字，但是也不会出错
}
}) ; // 实例化MVVM的管理对象
==============================
<div id="msgDiv">
<p>当前计数结果：{{count}}</p>
请输入数字：<input v-model="count" type="number">
</div>
● 日期数据：如果现在匹配的表单元素的类型是一个日期型,即便给出的是字符串也可以实现数据类型的自动转换。
window.onload = function() {
app = new Vue({
el: '#msgDiv', // 设置要进行渲染的根元素
data: {
birthday: '1886-10-18'// 给定的是字符串
}
}) ; // 实例化MVVM的管理对象
}
===========================================
<div id="msgDiv">
<p>马二老的生日：{{birthday}}</p>
请输入生日：<input v-model="birthday" type="date">
</div>
● 数学计算：下面定义两个输入的数据，但是最终一定需要这两个输入数据的累加，于是这个累加就可以成为一个结算结果。
window.onload = function() {
app = new Vue({
el: '#msgDiv', // 设置要进行渲染的根元素
data: {
numa:0,
numb:0
},
computed:{ //表示计算的结果同样可以进行数据的渲染
addResult:function () {
return parseInt(this.numa)+parseInt(this.numb);//这里必须要采用parseInt(值)先将字符串转换成int，如果不使用parseInt()的话，
//会直接进行字符串相加（字符串可以直接使用"+"进行连接），即6+0=60
},
subResult:function () {
return this.numa-this.numb;//这里就不需要使用parseInt(),因为减法符号"-"只有在运算中使用
}
}
}) ; // 实例化MVVM的管理对象
}
==========================
<div id="msgDiv">
<p>请输入第一个数字：<input type="number" v-model="numa"></p>
<p>请输入第二个数字：<input type="number" v-model="numb"></p>
<p>两个数字的和：{{addResult}}</p>
<p>两个数字的差：{{subResult}}</p>
</div>
● setter与getter：
window.onload = function() {
app = new Vue({
el: '#msgDiv', // 设置要进行渲染的根元素
data: {
firstName:'张',
lastName:'大枪'
},
computed:{ //表示计算的结果同样可以进行数据的渲染
fullName: {
get:function () {
return this.firstName+this.lastName;
},
set:function (inputFullName) {
this.firstName=inputFullName.slice(0,1);//截取名字
this.lastName=inputFullName.slice(1);//截取名字
}
}
}
}) ; // 实例化MVVM的管理对象
}
==========================================
<div id="msgDiv">
<p>请输入完整姓名：<input type="text" v-model="fullName"></p>
<p>姓：<input type="text" v-model="firstName"></p>
<p>名：<input type="text" v-model="lastName"></p>
</div>
10.绑定表单控件：
● 绑定文本域：
window.onload = function() {
app = new Vue({
el: '#msgDiv', // 设置要进行渲染的根元素
data: {
message:''
}
}) ; // 实例化MVVM的管理对象
}
=========================================
<div id="msgDiv">
<div id="inputDiv" style="float:left; 50%;">
<textarea v-model="message" placeholder="可以输入多行文本" rows="10" cols="50"></textarea>
</div>
<div id="showDiv" style="float: left; 50%">
<p style="white-space: pre-line">{{message}}</p><!--可以展示多行文本-->
</div>
</div>
● 绑定单选钮：在进行绑定的时候一组单选钮绑定的数据名称要相同。
window.onload = function() {
app = new Vue({
el: '#msgDiv', // 设置要进行渲染的根元素
data: {
sex:'男'
}
}) ; // 实例化MVVM的管理对象
}
=========================
<div id="msgDiv">
<div id="inputDiv" style="float:left; 50%;">
<input type="radio" value="男" v-model="sex">男<!--数据名称一致为sex，必须一致-->
<input type="radio" value="女" v-model="sex">女
</div>
<div id="showDiv" style="float: left; 50%">
<p style="white-space: pre-line">{{sex}}</p>
</div>
</div>
● 绑定复选框：复选框的组件是一套数组的内容,所以如果要想进行复选框的内容接收,则必须考虑使用数组定义数据类型。
window.onload = function() {
app = new Vue({
el: '#msgDiv', // 设置要进行渲染的根元素
data: { // 此处定义了数据的绑定
insts: [] // 必须为数组
}
}) ; // 实例化MVVM的管理对象
}
======================
<div id="msgDiv">
<div id="inputDiv" style="float: left ; 50%">
<input type="checkbox" value="看书" v-model="insts">看书<br><!--数据名称一致为insts，必须一致-->
<input type="checkbox" value="运动" v-model="insts">运动<br>
<input type="checkbox" value="书法" v-model="insts">书法<br>
<input type="checkbox" value="艺术" v-model="insts">艺术<br>
<input type="checkbox" value="电影" v-model="insts">电影<br>
</div>
<div id="showDiv" style="float: left ; 50%">
<p style="white-space: pre-line">您的兴趣是：{{insts}}</p>
</div>
</div>
●复选框锁定状态：由于在 Vue.js里面复选框可以直接和布尔类型的数据产生关联,所以对于用户锁定或活跃的状态切换就会比较容易了。
window.onload = function() {
app = new Vue({
el: '#msgDiv', // 设置要进行渲染的根元素
data: { // 此处定义了数据的绑定
name:'张三',
lock:true //锁定
},
computed:{
status:{
get:function () {
return this.lock ? "锁定":"活跃";
}
}
}
}) ; // 实例化MVVM的管理对象
}
=======================
<div id="msgDiv">
<div id="inputDiv" style="float: left ; 50%">
<input type="checkbox" value="看书" v-model="lock">看书<br>
</div>
<div id="showDiv" style="float: left ; 50%">
<p style="white-space: pre-line">姓名：{{name}}</p>
<p style="white-space: pre-line">锁定状态：{{status}}</p>
</div>
</div>