vue.js简单入门
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js简单入门相关的知识，希望对你有一定的参考价值。
Vue.js是什么？
Vue.js 是一套构建用户界面的渐进式框架。
与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
1.0写一个简单的代码实现
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）
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="myDiv1">
{{userName}}
</div>
</body>
//在这里引用Vue.js
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script type="text/javascript">
var myModel1 = {userName:‘张三丰‘,age:19};
var myViewModel1 = new Vue({
el:‘#myDiv1‘,
data:myModel1
});
console.log( myViewModel1.age );
</script>
</html>
2.0 当然Vue.js为我们提供了很多的方法，下面我们实现几个简单的例子。
2.01 声明式渲染：
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统
<body> <div id="myDiv1"> {{userName}} </div> </body> <script src="${pageContext.request.contextPath}/js/vue.js"></script> <script type="text/javascript"> var myModel1 = {userName:‘张三丰‘,age:19}; var myViewModel1 = new Vue({ el:‘#myDiv1‘, data:myModel1 }); console.log( myViewModel1.age ); </script> </html>
v-for 指令可以绑定数组的数据来渲染一个项目列表
2.02 处理用户输入：
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<body> <div id = "kyt3"> <p>{{message}}</p> <input v-model = "message"> </div> <script src = "${pageContext.request.contextPath}/js/vue.min.js"></script> <script type="text/javascript"> var kyt3 = new Vue({ el:‘#kyt3‘, data:{ message:‘大圣！！！‘ } }); </script> </body> </html>
运行结果：
v-for 指令可以绑定数组的数据来渲染一个项目列表：<body> <div id = "kyt1"> <ol> <li v-for = "todo in todos"> {{todo.text}} </li> </ol> </div> <script src = "${pageContext.request.contextPath}/js/vue.min.js"></script> <script type="text/javascript"> var kyt1 = new Vue({ el:‘#kyt1‘, data:{ todos:[ {text:‘学习JS‘}, {text:‘学习Vue‘}, {text:‘要当CEO‘} ] } }); </script> </body> </html>
运行结果：
在控制台里，输入 kyt1.todos.push({ text: ‘我是老板‘ })，发现列表中添加了一个新项。
2、将DOM和数据绑定起来，DOM将和数据保持同步，
每当变更了数据，DOM也会相应地更新。
3、MVVM模式（Model-View-ViewModel）
ViewModel是如何和View以及Model进行交互的。
model放在data（可能多项）
view放在el（view里面的{{ }}可能多项，跟model对应）
4、ViewModel是Vue.js的核心，它是一个Vue实例。
这个元素可以是HTML的body元素，
也可以是指定了id的某个元素。
5、所有的元素都是响应式的
以上是关于vue.js简单入门的主要内容，如果未能解决你的问题，请参考以下文章