Vue(从简单到入门，从入门到放弃)

方法一:
html:
<div id="my_vue">{{message}}</div>
js:
var my_vue=new Vue({
el:'#my_vue',
data:{
message:'jay'
}
})
方法二:

html:
<div id="my_vue">{{message}}</div>
js:

var x=document.getElementById('my_vue')
var my_vue=new Vue({

data:{
message:'jay'
}
})
my_vue.$mount(x);

添加类名:

一、对象语法：

<div id="app" v-bind:class="{'a':aa,'b':bb}"></div>

data:{

aa: true,
bb: true

}

二、数组语法：

<p v-bind:class="[x,y]"></p>

data:{

x:'a',
y:'b'

}

添加html:
<p v-html="xm"></p>

data:{

xm:'<div>我是插入的div</div>'

}

<!--添加css样式-->

方法一：
<p v-bind:style="{color:my_color,fontSize:my_font}">你是傻逼</p>

data:{

my_color:'red',
my_font:20+'px'

}

方法二：

<p v-bind:style="my_style">啊，你再说一次</p>

data:{

my_style:{
color:'yellow',
fontSize:25+'px'
}

}

方法三：

<p v-bind:style="[my_style,my_style2]">你还是傻逼</p>

data:{

my_style:{
color:'yellow',
fontSize:25+'px'
},
my_style2:{
background:'red'
}

}

v-if:

<h1 v-if="ok">{{name}}</h1>

data:{

name: 'jay',
ok: true

}

v-show:

<h2 v-show="show">{{name}}</h2>

data:{

name: 'jay',
show: false

}

有空再补上！