vue 学习笔记

 探寻vue之美

 

　　前言：之前就听说vue是一个非常厉害的mvvm框架，大大小小的介绍文章看了不少。但是没有系统的学习，今天就来系统的学习一下吧。

无论学习那个库，其阅读官方文档是必不可少的:  vue官方网站

　　概述：

　　vue的核心是一个响应的数据绑定系统，它可以让数据与dom保持同步。vue语法精简，实现精致，但对浏览器的支持受限，最低只能支持IE9。

　　

一.使用：

　Vue的使用非常简单。下载好vue.js文件。在HTML中直接引用即可：

<script src="../vue.js"></script>

　　先来一个简单的例子：

<body>
    <div id="box">
        <span class="red">{{ name }}</span>
        <span>{{ *name }}</span>    
        {{{ name }}}
        <input type="text" v-model="name">
        <input type="text" v-model="name">
    </div>
    <script src="libs/vue.js"></script>
    <script>
        new Vue({
            el:"#box",
            data:{
                name:"<h1>ZNS</h1>"
            }
        })
    </script>
</body>

 vue的{{{ }}}，可以解析字符串

<div id="box">
    <input type="text" v-model='name' />
    <input type="text" v-model='name' />
 <p>{{{name}}}</p>
</div>
<script src="libs/vue.js"></script>
<script>
    new Vue({
        el:'#box',
        data:{
            name:'<h1>魏明理</h1>'    
        }    
    })
</script>

vue中{{* }}，不可变模板

<body>
    <div id="box">
        <span class="red">{{ name }}</span>
        <span>{{*name }}</span>    
        <input type="text" v-model="name">
        <input type="text" v-model="name">
    </div>
    <script src="libs/vue.js"></script>
    <script>
        new Vue({
            el:"#box",
            data:{
                name:"zns"
            }
        })
    </script>
</body>

在Vue中为DOM元素绑定事件，通过v-on指令或事件语法糖 @ 为DOM元素绑定事件。

<body>
<div id="box">
    <input type="button" value="点击" v-on:click='fun' />
</div>
<script src="libs/vue.js"></script>
<script>    
    new Vue({
        el:'#box',
        data:{
            name:'<h1>魏明理</h1>'    
        },
        methods:{
            fun:function(){
                alert(1)    
            }    
        }    
    })
</script>

</body>

@mouseover/@mousemove/@mousedown/@keydown//等等还有好多。

 

posted @ 2016-11-28 21:03  一日不能篮球火  阅读(190)  评论(0)    收藏  举报