Vue初體驗
阿新 • • 發佈：2017-06-29
var gui 條件 ges weight ica itl type col
參考地址：https://cn.vuejs.org/v2/guide/installation.html
Vue.js 是一套構建用戶界面的漸進式框架，不支持IE8及其以下版本的瀏覽器，因為其使用IE8不能模擬的ECMAScript5特性，Vue.js支持所有 兼容ECMAScript5的瀏覽器。
1. 使用
1.1 一般情況下是使用<script>中引用Vue.js.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue實例</title> <script type="text/javascript" src="vue.js"></script><!-- 引入vue.js --> </head> <body> <div id="container"> <h1 v-html="hello"></h1> </div> <script type="text/javascript"> var vm = new Vue({/*構建實例對象*/ el:"#container",/*範圍*/ data:{ hello:"這是Vue實例。"/*數據值*/ } }); </script> </body> </html>
1.2 在用 Vue.js 構建大型應用時推薦使用 NPM 安裝， NPM 能很好地和諸如 Webpack 或 Browserify 模塊打包器配合使用。 Vue.js 也提供配套工具來開發單文件組件。
2.介紹
2.1 聲明式渲染
如上面1.1中所示，Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式的將數據渲染進 DOM，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue實例</title> <script type="text/javascript" src="vue.js"></script><!-- 引入vue.js --> </head> <body> <div id="container"> <h1 v-html="hello"></h1> <span v-bind:title="message">鼠標懸停產生信息</span> </div> <script type="text/javascript"> var vm = new Vue({/*構建實例對象*/ el:"#container",/*範圍*/ data:{ hello:"這是Vue實例。",/*數據值*/ message:"頁面加載於：" + new Date() } }); </script> </body> </html>
顯示效果如下：
在上面的例子中Vue做了很多的工作，將數據和 DOM 已經被綁定在一起，所有的元素都是響應式的，打開你的瀏覽器的控制臺（就在這個頁面打開），並修改 app.hello，你將看到上例相應地更新。
v-bind 屬性被稱為指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊屬性。它們會在渲染的 DOM 上應用特殊的響應式行為。簡言之，這裏該指令的作用是：“將這個元素節點的title 屬性和 Vue 實例的 message 屬性保持一致”。
2.2 條件與循環
Vue初體驗