<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--添加类名:对象语法-->
<div id="my_vue">{{message}}</div>
<div id="app" v-bind:class="{'a':aa,'b':bb}">
<!--添加类名:数组语法-->
<p v-bind:class="[x,y]"></p>
<!--添加html-->
<p v-html="xm"></p>
<!--添加css样式-->
<p v-bind:style="{color:my_color,fontSize:my_font}">你是傻逼</p>
<!--直接绑定到一个样式对象-->
<p v-bind:style="my_style">啊，你再说一次</p>
<!--数组语法可以将多个样式对象应用到一个元素上-->
<p v-bind:style="[my_style,my_style2]">你还是傻逼</p>
<!--不会渲染-->
<h1 v-if="ok">{{name}}</h1>
<!--会渲染-->
<h2 v-show="show">{{name}}</h2>
<!--遍历json-->
<p v-for="item in da">
{{item}}
</p>
<!--带有索引-->
<p v-for="(items,index) in arr">
{{items}}---{{index}}
</p>
<!--绑定事件-->
<p v-on:click="click">单击我</p>
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
<!--内联 JavaScript 语句-->
<p v-on:click="say('我是第一次')">我是第一次，被点</p>
<p v-on:click="say('我是第二次')">我是第二次，被点</p>
<!--计算属性：computed方法-->
<p>{{bgg}} {{my_computed}}</p>
<!--计算属性：methods方法-->
<p>{{bgg}}:{{my_computeds()}}</p>
</div>
<script src="js/vue.js" type="text/javascript">
</script>
<script type="text/javascript">
var x=document.getElementById('my_vue')
var my_vue=new Vue({
data:{
message:'jay'
}
})
my_vue.$mount(x);
var app_div = document.getElementById('app');
var vue = new Vue({
data: {
x:'a',
y:'b',
bgg: '123',
aa: true,
bb: true,
name: 'jay',
ok: true,
show: false,
da: {
'name': 'bgg',
'age': 12,
'sex': '女'
},
arr: [11, 12, 13, 14, 15, 16, 71],
xm:'<div>我是插入的div</div>',
my_color:'red',
my_font:20+'px',
my_style:{
color:'yellow',
fontSize:25+'px'
},
my_style2:{
background:'red'
},
counter:0
},
methods: {
click: function() {
alert('霸气的55开')
},
say:function(x){
alert(x);
}
},
//返回的数据放在my_computed，存在依赖关系
computed:{
my_computed:function(){
return parseInt(this.$data.bgg)+1000
}
},
methods:{
my_computeds:(function(){
return parseInt(this.$data.bgg)+100
})
}
})
vue.$mount(app_div);
</script>
</body>
</html>
