vue基礎語法一

1、綁定數據

一、語法
<template>
  <div id="app">

　<!--HTML獲取綁定數據  -->
　　<h1>{{ msg }}</h1>
　　<h1>name :{{user.name}},age:{{user.age}}</h1>
　　<ul>
　　  <li v-for="item in list">
 　　   {{item.name}}
 　　 </li>
　　</ul>
</div>

</template>

　　　 <script>
　　　　//數據格式
　　　　export default {
 　　 　　name: 'app',
 　　　　 data () { 
   　 　　 return {
     　　 msg: 'Welcome to Your Vue.js App'
     　　 ,user:{name:"jj",age:12}
     　　 ,list:[{name:'ssdd'},{name:'llldd'}]
   　　 }
 　　 }
　　}
　　</script>注意循環數組時，需使用v-for，經過item參數循環獲取數組值

2、綁定HTML屬性
一、第一種語法：    v-bind:綁定HTML屬性使用，後加HTML屬性名，以及綁定參數

html格式：<div v-bind:title="vuetitle">標題</div> 
<img v-bind:src="url">

<script>
　　export default {
  　　name: 'app',
 　　 data () { //數據
  　　  return {
   　　　　vuetitle: 'Welcome to Your Vue.js App'
　　　　　　,url:"http://www.baidu.com"
　　　　　　}

 　　}
}
</script>

二、第二種語法：   : + html屬性名；
例如：  <div ：title="vuetitle" ></div>   <img  :src="url"> </img>

3、綁定HTML標籤
經過data中的參數值，綁定對應的html標籤

<div v-html="h">

<script>
　　export default {
  　　name: 'app',
 　　 data () { //數據
  　　  return {
   　　　　vuetitle: '<h>我是一個H標籤<h/>'
　　　　　　}

  　　}}</script>