vue总结

基础结构

<script type="text/javascript">  

   new Vue({     

          el:"#app",

          data:{},

        methods:{}

    })

</script>

 

模板语法

如可给DOM绑定上vue数据。

通过各种给点的方式，在DOM上写js表达式。

文本：纯文本、HTML    {{}}    v-text       v-html

属性：v-bind：src=“”

事件：v-on：click=””

 

条件渲染

v-if        v-else-if        v-else

v-show=”false”

v-once   v-clock

列表渲染 v-for

遍历数组，将数组中的各项渲染为列表项。

 

属性：class/style的特殊绑定

由于class的style属性可以有多个值，并且class使用非常频繁。

vue专门给class和style设计了特殊的v-bind指令语法。 <div v-bind:class="[js表达式1,js表达式2，{'class名称1':js表达式,'class名称2':js表达式}]"></div>

根据使用场景课拆开使用： <div v-bind:class="[js表达式1,js表达式2]"></div> <div v-bind:class="{'class名称1':js表达式,'class名称2':js表达式}"></div>

事件修饰符 v-on.

我们给DOM绑定的各种事件，有时还需要做特殊处理，阻止事件的默认行为、阻止冒泡，或者改变事件流传播机制。键盘事件自动判断按的哪一个键。 事件通用修饰符： stop prevent capture self once 键盘事件的修饰符：上下左右、enter、tab、delete、esc、space、alt、ctrl、shift