Vue 2.0 知识点 - 1

vue2.0 基本的语法记忆点。

语法	简介
v-bind	绑定 DOM 元素属性
v-if v-elif v-else	条件型控制DOM元素显示隐藏
v-for	循环数据来渲染一个DOM列表
v-on	绑定一个监听事件 简写“@” 例如@click
v-model	使得在表单输入和应用状态中做双向数据绑定
v-show	控制DOM显示隐藏
v-text	不解析标签解析文本
v-html	解析标签解析文本
.stop	阻止事件冒泡 例如 @click.stop
.prevent	阻止事件的默认行为 例如@contextmenu.prevent
.once	绑定只执行一次的事件 例如@click.once
.self	当且仅当事件是由自身触发时才会触发事件回调函数 例如@click.self
v-el	获取DOM对象 js中用$el获取 2.0中已废弃
v-ref	获取组件对象 js中用$ref获取 2.0中已废弃
v-pre	原样输出
v-once	只同步输出一次

如何绑定css样式

**如何绑定css样式**
<div id="box">
    <div class="c" :class="{red:isred}" ></div>
    <div class="c" :class="isred?'red':'blue'"></div>
    <div class="c" :class="[{red:'isred'},{blue:'isblue'}]"></div>
    <input type="text" v-model="module">

</div>
<script>
    new Vue({
        el:"#box",
        data(){
            return{
                isred:true,
                isblue:true,
                module:'12199939'
            }
        },

    })
</script>

如何绑定style

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>

<script>
    new Vue({
        el:"#box",
       data() {
           return{
                        activeColor: 'red',
                        fontSize: 30，
                       styleObject: {
                              color: 'red',
                              fontSize: '13px'
                       }
              }
     }
    })
</script>