Vue.js表单
概述用 v-model 指令在表单控件元素上创建双向数据绑定
输入框123456789101112131415161718<div id="app" style="text-align: center"> <p>info1:</p> <p>{{info1}}</p> <input type="text" v-model="info1" placeholder="请输入内容..." style="width: 333px"> <hr> <p>info2:</p> <p style="white-space: pre">{{info2}}</p> <textarea v-model="i ...
Vue.js事件处理器
概述事件监听使用 v-on 指令
v-on:click点击事件，可以简写成@click
代码1234567891011121314151617181920212223242526272829<div id="app" style="text-align: center"> <h3>计数器：<span style="color: red">{{counter}}</span></h3> <button v-on:click="counter++">加1</button> <button @click="counter--">减1</button> <br> <input type="text" v-model="number"> <butt ...
一个优秀的制作GIF动图的软件：ScreenToGif
下载与安装官网：https://www.screentogif.com/
使用打开软件，选择录像机
调整录屏窗口大小
点击右下角的红色圆点开始录像
点击右下角的蓝色正方形完成录像
选择文件、另存为、保存即可得到gif动图
Vue.js样式绑定
概述class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
class属性绑定①使用属性值
1234567891011121314151617181920212223242526272829303132333435363738394041424344<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue测试</title> <script src="js/vue.js"></script> <style type="text/css"> .active { ...
Vue.js监听属性
概述通过 watch 来响应数据的变化
代码12345678910111213141516171819202122232425262728293031323334353637383940<div id="app" style="text-align: center"> <h3> 计数器:{{counter}} <span v-if="seen">（ 修改前值为：<span style="color: blue">{{oldVal}}</span>， 修改后值为：<span style="color: red">{{newVal}}</span>） </span> </h3& ...
Vue.js计算属性
概述计算属性关键词: computed
计算属性在处理一些复杂逻辑时是很有用的，在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以
代码1234567891011121314151617181920<div id="app"> <p>计算X1²+X2²-2X1+3X2,其中X1={{X1}},X2={{X2}}</p> <p>{{X1}} * {{X1}} + {{X2}} * {{X2}} - 2 * {{X1}} + 3 * {{X2}}=<span style="color: red">{{calc ...
Vue.js循环语句
概述循环使用 v-for 指令
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名
如果要限制遍历的数量，则格式为：site in sites.slice(0,3)，3为数量代表只遍历3个
迭代数组12345678910111213141516171819<div id="app"> <div> <p v-for="student in students"> {{student.name}}的年龄：{{student.age}} </p> </div></div><script type="text/javascript"> new Vue({ el: '#app', ...
Vue.js条件语句
v-if1234567891011<div id="app"> <p v-if="flag">flag是true就显示我</p></div><script type="text/javascript"> new Vue({ el: '#app', data: { flag: true } })</script>
v-else123456789101112<div id="app"> <p v-if="flag">flag==true</p> <p v-else>flag==false</p></div><script type="text/javascript"> ...
Spring Boot项目添加webapp目录
打开Project Structure
添加Web服务
添加web.xml文件
选择web.xml的文件路径
创建第一个Vue应用
引入Vue.js
下载js文件后引入
1<script type="text/javascript" src="js/vue.js"></script>
使用CDN方法
开发环境版本
12<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
生产环境版本
12<!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
HTML代码12345<div id="app1"> <p v-bind:style="flag?'color:blue':'color:red'" ...
