Vue.js简单的应用
1:一个简单实现
下面代码部分:
<body>
<div id="myDiv1">
{{userName}} </div>
</body>
<script src="${pageContext.request.contextPath}/js/vue.min.js"></script>
<script>
var myVieModel1 = {userName:"张三丰",age:19}
var myModel1 = new Vue({
el:"#myDiv1",
data:myVieModel1
});
</script>
2: 为了让个别同学更好的有思路 以下实现步骤
1、 新建web项目
2、 新建一个jsp文件
3、 把vue.js放到Web的js目录下
4、 在jsp中引入vue.js
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
5、 创建一个view对象(DOM组件),
注意:此view对象,可以包含n个数据,数据使用{{xxxx}}来描述
6、 定义一个javascript的model
var myModel1 = {userName:'张三丰',age:19};
7、 创建一个Vue对象(ViewModel对象)
参数为一个json对象(包含2个参数,el,data)
3:Vue.js实现简单的双向绑定
代码部分:
v-model指令,它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="myDiv1">
{{userName}}
<input v-model="userName">
</div>
</body>
<script src="${pageContext.request.contextPath}/js/vue.min.js"></script>
<script>
//var myVieModel1 = {userName:"张三丰",age:19}
var myModel1 = new Vue({
el:"#myDiv1",
data:{
userName:"大家好"
}
});
</script>
运行结果:
vue.js循环
代码部分:
<body>
<div id="myVie">
<ol>
<li v-for="student in studentList">{{student.name}}</li>
</ol>
</div>
</body>
<script src="${pageContext.request.contextPath}/js/vue.min.js"></script>
<script type="text/javascript">
var myModel = {studentList:[{name:"小凌"},{name:"小团"},{name:"小良"}]};
var myVieModel = new Vue({
el:"#myVie",
data:myModel
});
</script>
运行结果:
注意:以上代码在后台中可以任意添加多个昵称 ,很多人当然不想被人在后台中任意添加删除了,那有没有更好的解决方法呢 有,下面会通过后台的形式来实现。
2.后台方式实现:
1:首先创建一个类
public class Student{
private String name; public String getName() {
return name;
} public void setName(String name) {
this.name = name;
} }
2.创建一个测试类
public class Test{
public static void main(String[] args){
Student s1 = new Student();
Student s2 = new Student();
Student s3 = new Student();
s1.setName("小发");
s2.setName("小景");
s3.setName("小东"); List<Student> studentList = new ArrayList();
studentList.add(s1);
studentList.add(s2);
studentList.add(s3); /*<li v-for="student in studentList">{{student.name}}</li>*/
for(Student student : studentList){
System.out.println(student.getName());
}
}
运行结果:
3.即使你在new一个对象
Student s4 = new Student();
s4.setName("小吴");
studentList.add(s4);
运行的还是:
Vue.js简单的应用的更多相关文章
- 98、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- 13、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- vue.js简单添加和删除
这只是个简单的添加和删除,没有连接后台数据的 <%@ page language="java" contentType="text/html; charset=UT ...
- Vue.js简单入门
这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...
- Vue.js简单记录
官网:https://cn.vuejs.org/ https://cn.vuejs.org/v2/api/#methods v-bind 缩写 <!-- 完整语法 --> <a v- ...
- VUE.js 简单引用
Vue开发的两种方式:静态资源引入开发 和 脚手架交互式开发 这里使用的是静态资源引入开发 首先 引用jquery.js 和 vue.js html 标签内加个 <div id=" ...
- Vue.js简单实践
直接上代码,一个简单的新闻列表页面(.cshtml): @section CssSection{ <style> [v-cloak] { display: none; } </sty ...
- vue.js 简单入门
转载自:http://blog.csdn.net/violetjack0808/article/details/51451672 <!DOCTYPE html> <html lang ...
- Vue.js简单的状态管理和 Vuex的几个核心概念使用。
由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长. 如果多层组件嵌套使用,传递prop,和事件emit.都很不方便. 不方便对数据的修改进行历史记录.影响后续的调试! 为了 ...
随机推荐
- Express+Mongoose(MongoDB)+Vue2全栈微信商城项目全记录
最近用vue2做了一个微信商城项目,因为做的比较仓促,所以一边写一下整个流程,一边稍做优化. 项目github地址:https://github.com/seven9115/vue-fullstack ...
- 【NOIP模拟】的士碰撞(二分答案)
Description
- Servlet 笔记-读取表单数据
Servlet 处理表单数据,这些数据会根据不同的情况使用不同的方法自动解析: getParameter():您可以调用 request.getParameter() 方法来获取表单参数的值. get ...
- 添加 hexo yilia 主题的文章阅读量
根据此篇博客(点击查看) 配置出自己的博客阅读量,里面介绍了如何配置开通 leancloud 应用 当然介绍我如何配置 yilia 显示自己的浏览量的. 首先在 yilia 主题下修改 _config ...
- js math对象总结
1: Math 对象用于执行数学任务. 2:Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(), Math.sin() 这样的函数只是函数 3:通过把 ...
- C#连接oracle数据库提示ORA-12154: TNS: 无法解析指定的连接标识符
C#连接oracle数据库提示ORA-12154: TNS: 无法解析指定的连接标识符如果PLSQL Develope能连接上而用代码无法连接上则可以考虑sqlnet.ora文件中是否有NAMES.D ...
- JavaScript面向对象中的继承
1.1继承的基本概念 使用一个子类,继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承. >>>继承的两方,发生在两个类之间. 实现继承的三种方式: 扩展O ...
- 初识Http协议抓包工具—Fiddler
1.Fiddler简介 Fiddler是用一款使用C#编写的http协议调试代理工具.它支持众多的http调试任务,能够记录并检查所有你的电脑和互联网之间的http通讯,可以设置断点,查看所有的“进出 ...
- Element ui表格展示多张图片问题
显示一张图片的方法: <el-table-column label="头像" width="100"> <template scope=&qu ...
- CentOS7安装GitLab、汉化、邮箱配置及使用
同步首发:http://www.yuanrengu.com/index.php/20171112.html 一.GitLab简介 GitLab是利用Ruby On Rails开发的一个开源版本管理系统 ...