探尋vue之美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