开始吧...
这一节简单的介绍了vue的一个基本概念.
- 学习vue需要的基础知识是一些模块化的思想和ES6的一些语法.
优点
- 数据驱动
- 组件化
我们根据官网的教程来写得一个第一个案例就可以发现vuejs作为MVVM框架他的使用很简单,很容易上手.
<body>
<div id="element">
<!--插值--> {{helloWorld}}
<br/>
<input type="text" v-model="helloWorld"/>
</div>
<!--导入vue的框架-->
<script src="//cdn.bootcss.com/vue/1.0.25/vue.js"></script>
<script type="text/javascript">
//创建一个vue.js的实例对象
new Vue({
el:"#element",
data:{
helloWorld:"Hello！World!",
}
});
</script>
</body>
代码分析:
创建了一个vue的实例,然后通过el属性来绑定DOM元素,限定该实例的一个作用范围.data属性来作为数据model.通过{{}}(插值)来将数据模型渲染到Dom上(也就是View层).通过表单元素的指令v-model来将是图层的DOM节点和数据模型进行绑定,
2.vue的一个组件
上面我们讲了VUE的核心思想就是数据驱动和组件化.任何一个页面都可以被抽象成由多个组件组合而成的一个东西.这里我们学习一下vue.js的组件的基本构成,见下图所示:
一个vue.js的组件构成.png
很容易知道
<template></template>是组件的模板,<script></script>是组件的逻辑.<style></style>是组件的样式.这样将模板,样式,逻辑写在一个.vue后缀文件里面的东西就叫做vue的一个组件.
小节总结
上面我们简单的学习了vue.js的一个写法,他的核心思想:数据驱动和组件开发模式.都是很有意思的改变.让前端开发更加的迅速,更加的敏捷.
网友评论