Vue简述
是一个MVVM模式的JavaScript库,他的核心思想是数据驱动和组件化,是双向数据绑定的一个实现库。在vue中实现MVVM模式:
- vue的viewmodel是实现双向数据绑定的关键,它包含了DOM listeners 和Data Bindings这两个工具;
- 从view到viewmodel,DOM listeners工具帮助我们检测页面上DOM元素的变化,实现更新;
- 从model到viewmodel,Data Bindings帮助我们监听model的变化,实现实时更新。
环境搭建
-
cnpm安装(淘宝对npm的镜像服务器)
npm install -g cnpm --registry=https://registry.npm.taobao.org
-
vue-cli安装
是Vue官方提供的一个命令行工具,用于快速搭建大型的单页面应用。cnpm install -g vue-cli
-
最后输入vue检查是否安装成功
-
创建一个Vue项目
在指定文件夹输入vue init webpack vue-demo
-
运行一个vue项目
npm run dev
实现helloworld输出
<body>
<!--创建view-->
<div id="app">
{{ message }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 创建的Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
</script>
上面的这种方式,是通过直接引入vue.js库来实现,若想通过vue-cli实现的话,原理也是一样的,只是将创建view、viewmodel、vue实例的过程模块化和组件化了。
Vue常用指令
vue的指令是以v-开头的,他们勇于HTML元素,提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为
-
v-if:条件渲染指令,根据表达式的真假来删除和插入元素。
-
v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class
-
v-for:遍历
-
v-on指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听元素的点击事件:
a v-on:click="doSomething"
-
还有等等以v-开头的指令(略)