一个简单的vue页面展示一下参数获取

<template>

<!-- vue的模板里面 所有的内容要被一个根节点包含起来 -->

 <div id="app"> 
 
 <h2>{{msg}}</h2>

 <br>
 这是一个根组件
 <br>
 <h3>{{obj.name}}</h3>

 <br>
 <hr>
 <br />

 <ul>
 <li v-for="item in list">
 {{item}}
 </li>
 </ul>

 <br>
 <hr>
 <br />
 <ul>
 <li v-for="item in list1">
 {{item.title}}
 </li>
 </ul>
 <br>
 <hr>
 <br />
 <ul>
 <li v-for="item in list2">
 {{item.cate}}
 <ol>
 <li v-for="news in item.list">
 {{news.title}}
 </li>
 </ol>
 </li>
 </ul>
 </div>
</template>

<script>
 export default { 
 data () { /*业务逻辑里面定义的数据*/
 return {
 msg: '你好vue',
 obj:{
 name:"张三"
 },
 list:['111','222','333'],
 list1:[
 {'title':'11111'},
 {'title':'222'},
 {'title':'333333'},
 {'title':'44444'}
 ],
 list2:[
 {
 "cate":"国内新闻",
 "list":[
 {'title':'国内新闻11111'},
 {'title':'国内新闻2222'}
 ]
 },
 {
 "cate":"国际新闻",
 "list":[
 {'title':'国际新闻11111'},
 {'title':'国际新闻2222'}
 ]
 }
 ]
 }
 }
 }
</script>

<style >

</style>

如何设置属性

<div v-bind:title="title">鼠标移动上去看一下</div>

v-bind 设置属性

<div :title="title">鼠标移动上去看一下</div>

绑定属性简写:title

绑定html

v-html 绑定html

<template>
<!-- vue的模板里面 所有的内容要被一个根节点包含起来 -->
 <div id="app"> 
 
 
 <div v-html="h">鼠标移动上去看一下</div>
 </div>
</template>
<script>
 export default { 
 data () { /*业务逻辑里面定义的数据*/
 return {
 
	 h:"<h>我是h标签</h>"
 }
 }
 }
</script>

绑定数据

v-test="msg"

<div v-text="msg"></div>

绑定对象语法

v-bind:class="{'red':flag}"

<template>
<!-- vue的模板里面 所有的内容要被一个根节点包含起来 -->
 <div id="app"> 
<!-- 循环中设置class-->
 <ul>
 <li v-for="(item,key) in list2" :class="{'red':key==0 ,'blue':key!=0}">
 {{item.cate}}
 <ol>
 <li v-for="news in item.list" >
 {{news.title}}
 </li>
 </ol>
 </li>
 </ul>
 <!-- 设置class-->
 <div v-bind:class="{'red':flag,'blue':!flag}">我是一个div</div>
<!-- 设置style-->
 <div class="box" v-bind:style="{width:boxWidth+'px'}">我是一个div</div>
 </div>
</template>
<script>
 export default { 
 data () { /*业务逻辑里面定义的数据*/
 return {
 list2:[
 {
 "cate":"国内新闻",
 "list":[
 {'title':'国内新闻11111'},
 {'title':'国内新闻2222'}
 ]
 },
 {
 "cate":"国际新闻",
 "list":[
 {'title':'国际新闻11111'},
 {'title':'国际新闻2222'}
 ]
 }
 ],
	 h:"<h>我是h标签</h>",
boxWidth:500
 }
 }
 }
</script>
<style >
.red{
	color:red;
}
.blue{
	color:blue;
}
.box{
	background-color:red;
}
</style>