[Vue] 初识Vue-常用指令

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可以缩写成@符号

<span :title="message">

鼠标悬停几秒种查看此处动态绑定的提示信息!

</span>

<button type="button" @click="changeMessage">改变信息</button>