vue 學習筆記

 探尋vue之美vue


 

  前言:以前就據說vue是一個很是厲害的mvvm框架,大大小小的介紹文章看了很多。可是沒有系統的學習,今天就來系統的學習一下吧。

不管學習那個庫,其閱讀官方文檔是必不可少的:  vue官方網站

  概述

  vue的核心是一個響應的數據綁定系統,它能夠讓數據與dom保持同步。vue語法精簡,實現精緻,但對瀏覽器的支持受限,最低只能支持IE9。瀏覽器

  

一.使用:

 Vue的使用很是簡單。下載好vue.js文件。在HTML中直接引用便可:框架

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

  先來一個簡單的例子:dom

<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的{{{ }}},能夠解析字符串mvvm

<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//等等還有好多。spa

相關文章
相關標籤/搜索