Vue.js學習（一）
阿新 • • 發佈：2018-12-19
1.vue輸出文字：通過{{...}}進行資料繫結改變data中的值從而進行改變
程式碼如下：
<body> <div id="app"> <!--輸出文字--> <h1>{{url}}</h1> </div> </body> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ url: 'www.baidu.com' } }) </script>
結果如下：
可以見到我們通過修改data中的資料，網頁中的資料也發生變化：
2.vue輸出html程式碼：v-html
程式碼如下：
<body> <div id="app"> <!--使用v-html指令輸出html程式碼--> <div v-html="msg"></div> </div> </body> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ msg: '<h3>hello</h3>' } }) </script>
結果如下：
3.vue繫結屬性：v-bind，v-bind可以簡寫為‘：’
程式碼如下：
<style> .class1{color:red;} </style> <body> <div id="app"> <!--使用v-bind繫結屬性--> <div v-bind:class="{'class1':class1}">world</div> </div> </body> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ class1: true } </script>
結果如下：
可以見到我們把class1改為false，字型顏色也會發生改變：
4.vue的v-if和v-show：v-if是控制節點的渲染和顯示，v-show只是樣式display的切換：
程式碼如下：
<body>
<div id="app">
<!--v-if-->
<div v-if="flag1">see you</div>
<!--v-show-->
<div v-show="flag2">see you again</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
flag1: false,
flag2: false
}
})
</script>結果如下，可以見到v-if程式碼段在html中是沒有的，而v-show程式碼段只是將display變為none：
通過將flag1變為true可以見到html中渲染了v-if程式碼塊，而v-show只是將display移除：
