Vue
Vue是一套用于构建用户界面的渐进式框架, Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。Vue是一个JavaScript MVVM库, 以数据驱动和组件化的思想构建。
本来想学jQuery来着, 但是同事推荐直接学习Vue,所以入了Vue的坑。
数据驱动
jQuery了解了下, jQuery操作元素先是获取元素DOM对象, 然后进行元素操作 , 在Vue中, 元素和数据是双向绑定的, 在实例化Vue对象的同时将元素绑定,数据和元素保持同步, 数据发生改变, 对应页面的元素也会发生改变。
MVVM模式
Model-View-ViewModel
Model: 指的是数据部分,对应到前端相当于JavaScript对象
View: 视图部分,对应前端就是DOM
ViewModel: 连接数据和视图的中间件
数据(Model)和视图(View)是不能直接通讯的,而是需要通过ViewModel来实现双方的通讯。当数据变化的时候,ViewModel能够监听到这种变化,并及时的通知View做出修改。同样的,当页面有事件触发时,ViewModel也能够监听到事件,并通知Model进行响应。ViewModel就相当于一个观察者,监控着双方的动作,并及时通知对方进行相应的操作。
起步
从经典的hello world开始
//创建view <div id="app">{{ message }}</div> <script> //创建model var example = { message: 'hello world' } //创建vue实例, 绑定元素- ViewModel new Vue({ el: '#app', data: example }) </script>
建立关联之后,页面和数据都是响应式的, 我们在JavaScript的控制台修改app.message的值,页面也会随之发生变化。
指令
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。
v-bind
v-bind会绑定元素的某个特殊特性
<div id="app2"> <span v-bind:title="message"> 鼠标悬停几秒种查看此处动态绑定的提示信息! </span> </div> <script> new Vue({ el: "#app2", data: { message: '页面加载于' + new Date().toLocaleString() } }) </script>
v-if
v-if是条件渲染指令, 根据表达式的真假来删除或插入元素
v-if= ‘expression’ expression是一个返回bool的表达式, 表达式可以是个bool属性, 也可以是个返回bool的运算式
<div id="app3"> <p v-if="seen">你可以看到我</p> <p v-if="name.indexOf('jack')>=0">{{ name }}</p> </div> <script> new Vue({ el: '#app3', data: { seen: true, name: 'jacklove' } }) </script>
v-for
v-for用来循环渲染, 可以绑定数组的数据来渲染一个项目列表
<div id="app2"> <ol> <li v-for="todo in todos">{{ todo }}</li> </ol> </div> <script> new Vue({ el: '#app2', data: { todos:[ {todo: '上课'}, {todo: '做实验'}, {todo: '下课'} ] } }) </script>
v-on
v-on用来监听DOM事件
<div id="app3"> <p>{{ message }}</p> <button type="button" v-on:click="changeMessage">改变信息</button> </div> <script> new Vue({ el: '#app3', data: { message: 'hello' }, methods: { changeMessage: function () { this.message = 'world' } } }) </script>
v-model
v-model在表单元素上创建双向数据绑定
无论是修改input的值还是p标签的值, 相应的两边的值都会更新
<div id="app4"> <p>{{ message }}</p> <input type="text" v-model="message"> </div> <script> new Vue({ el: '#app4', data: { message: 'hello' } }) </script>
v-bind和v-on缩写
Vue.js为最常用的两个指令v-bind和v-on提供了缩写的方式
v-bind 可以缩写成一个冒号
v-on可以缩写成@符号