Vue前端框架的使用
1.正文
vue前端框架
1.1什么是Vue
1.2如何使用vue
<%--
Created by IntelliJ IDEA.
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
$Title$
<%--导入vue得脚本--%>
<%--创建一个双标签--%>
<%--使用vue这种定义得数据 这是vue得语法--%>
{{name}}
{{age}}
总结: (1)导入vue.js文件 （2）创建一个双标签: (3) 创建一个vue对象并使用el挂载到双标签上。
1.3el挂载点
Vue实例的作用范围是什么呢？
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器？
可以，一般我们使用id，因为id是唯一得。
是否可以设置其他的dom元素呢？
可以，必须该dom是一个双标签。不能是body html标签
1.4data属性
定义vue得数据。 可以定义为任意类型得数据。
1.5本地应用
Vue指定: 以v-开始，并且可以在标签内容使用得。vue可以解析这个指令。
1.5.1v-text和v-html
设置标签的文本值(textContent)
v-text:不能解析html标签
v-html: 可以解析html标签。
<%--
Created by IntelliJ IDEA.
Date: 2022/5/23
Time: 14:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
$Title$
<%--导入vue得脚本--%>
<%--创建一个双标签--%>
<%--使用{{}}显示标签内容--%>
{{name}}你好
<%--设置span得内容 会把span中得原来得内容覆盖--%>
你好
1.5.2v-on指令
为元素绑定事件
回顾:
在元素上使用οnclick="方法名"。或 $("#元素").click(function(){})
<%--
Created by IntelliJ IDEA.
Date: 2022/5/23
Time: 14:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
$Title$
<%--导入vue得脚本--%>
<%--创建一个双标签--%>
{{age}}
<%--绑定点击事件--触发add方法。在vue中定义方法。如果方法是无参可以省略（）--%>
<%--vue提供了一种简洁模式@等价于v-on:--%>
1.5.3 v-show和v-if
根据表达值的真假,切换元素的显示和隐藏
<%--
Created by IntelliJ IDEA.
Date: 2022/5/23
Time: 14:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
$Title$
<%--导入vue得脚本--%>
<%--创建一个双标签--%>
{{age}}
<%--v-show:判断表达式是否为真如果为真则显示指令所在得标签。通过css得display来控制标识得显示和隐藏--%>
<%--v-if:根据表达式得真假控制标签得显示。通过创建和移除标签来控制显示和隐藏。如果显示和隐藏得频率非常高，那么该标签得效率会低--%>
1.5.4 v-bind
设置元素的属性 绑定元素得属性值。
<%--
Created by IntelliJ IDEA.
Date: 2022/5/23
Time: 14:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
$Title$
<%--导入vue得脚本--%>
<%--创建一个双标签--%>
<%--v-bind:设置标签得属性--%>
![]()
<%--vue提供了一种简洁模式: 省略v-bind --%>
![]()
1.5.5 v-for
循环遍历指令
v-for="(变量名,下标) in 数组|集合"
<%--
Created by IntelliJ IDEA.
Date: 2022/5/23
Time: 14:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
$Title$
<%--导入vue得脚本--%>
<%--创建一个双标签--%>
- {{index}}---->{{a}}
{{index}}
{{item.name}}
{{item.age}}
{{item.address}}
1.5.6 v-on补充
传递自定义参数,事件修饰符
<%--
Created by IntelliJ IDEA.
Date: 2022/5/23
Time: 14:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
$Title$
<%--导入vue得脚本--%>
<%--创建一个双标签--%>
{{index}}
{{item.name}}
{{item.age}}
{{item.address}}
删除
<%--keyup:键盘弹起事件 enter:回车键--%>
1.5.7 v-model
获取和设置==表单元素==的值
哪些是表单元素?