五分钟学会VUE

什么是VUE：

从jquery到vue或者说是到mvvm的转变是一个思想的转变，是将原有的直接操作dom的思想转变到操作数据上去。

你不用管mvvm是什么意思。你只需知道jquery操作dom，vue操作数据

注意：

v-bind 相当于简写 :

v-on  相当于简写 @

1.属性操作

:class、:href、:src

示例：

HTML代码：
<div :class="classA>Demo</div>


Javascript代码：
data: {
  classA: 'class-a'  //当classA改变时将更新class
}
渲染后的HTML:
<div class="class-a">Demo</div>

 2.方法操作

@click、@mouseenter、@mouseleave

示例：

<div id="app">
    <button  @click="my_click('hello world')">
        点击弹窗
    </button>
</div>

<script>
const app = new Vue({
    el:"#app",
    data:{},
    methods:{
        my_click:function(x){
            alert(x)
        }
    }
})
</script>

3.循环和判断

v-if、v-for

示例：

<div id="app">
    <button  v-if="type == 1">
        点击弹窗
    </button>
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
　　　　type:1
　　},
    methods:{
        my_click:function(x){
            alert(x)
        }
    }
})
</script>

4.特殊用法

v-html、v-model

示例

<div v-html="content">
　　　　
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
　　　　content:""
　　},
    created:{
        _ajax("article/show",{id:id},function(ret){
　　　　　　　　　　this.content = ret.content
　　　　　　})
    }
})
</script>

 5.计算

 {{num+5}} {{num?num:0}}

怎么样简单吧，多练练就好了~