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参数循环获取数组值

二、绑定HTML属性
1、第一种语法：    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>

2、第二种语法：   : + html属性名；
例如：  <div ：title="vuetitle" ></div>   <img  :src="url"> </img>

三、绑定HTML标签
通过data中的参数值，绑定对应的html标签

<div v-html="h">

<script>
　　export default {
  　　name: 'app',
 　　 data () { //数据
  　　  return {
   　　　　vuetitle: '<h>我是一个H标签<h/>'
　　　　　　}

  　　}
}
</script>