vue基础的一点语法 2018-11-03

1.每个vue.js应用都是通过构造函数创建一个根实例启动的：var Vm = new Vue({});

2.基础属性：el：获取执行vue的dom元素－初始化范围  data：存储数据 methods：执行的方法

3.绑定数据：{{}}或者v-text=""只能绑定纯文本，angular中用ng-bind-html绑定，vue中用v-html  表达式在{{}}中能用一些基础算法（+-*/）以及三木运算符。

4.事 event件的绑定：v-on：click=""和@click="",如果事件中有event对象，则参数为$event,操做数据用this

5.其他的指令：v-for=“item in list” 循环item循环到的数组值     v-for=“(item,key) in list” key循环到的下标index     v-model=“” 表单元素value 不可直接{{}}获取，需在vue初始化data设置一下      v-if布尔值   为true  代表节点消失      V-show布尔值 为true 代表节点设置了display:none属性   V-once 只一次渲染    V-if 与 v-else-if v-else 可以构成判断

6.v-if与v-for当它们都处于同一节点时，v-for 的优先级高于 v-if。这意味着，v-if 将分别在循环中的每次迭代上运行

7.行间样式的设置：v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”    data: { activeColor: 'red'，  fontSize: 30 }

v-bind:style的对象语法十分直观——看着非常像 CSS，其实它是一个JavaScript对象

8.（2）数组样式的形式设置：v-bind:style=“[styleObjectA, styleObjectB]”      data：{styleObjectA：{"color":red},styleObjectB:{"color":"red"}}

9.类名的设置： v-bind:class=“{‘class-a’:isa,‘class-b’:isb}”    Isa isb 值为true 则添加相应类名  为false则不添加相应的类名

10.(2).对象形式的设置：

     classobj{active:true,"class-a":true,"class-b":true},class-a,-b为true则添加相应的类名

11.绑定属性 v-bind:id=“data内的属性值” 或者 :id=“data内的属性值” 两种方法  （src  title  class  name等属性写法一样）

12.计算属性： 放在computed:{//函数} 效率高 methods设置效率低

        (1)在模板中表达式非常便利，但是它们实际上只用于简单的操作

         (2).模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性

        (3)在 Vue.js 中，你可以通过 computed 选项定义计算属性

            语法：computed(){sum(){return -----}}return直接返回结果   用的时候 在组件中写{{sum}}这个解析的值就是计算出来的结果；

13.监听函数watch：第一种写法：vm.$watch("监听的谁",function(newValue,oldValue){两个参数，一个新值，一个旧值})；   第二种写法在vue初始化中通过：watch｛msg:function(newvalue,oldvalue){}｝

14.过滤器  Vue2.0自定义过滤器,vue1.0提供内置：过滤器要放在vue实例化之前调用Vue.filter("过滤器的名字",function(value){return     把过滤的结果retuen出去})         比如在for循环中用到

            

                    {{item.name}}___{{item.state}}__{{item.state | guolv}}    guolv就是过滤器的名字其中过滤器的参数就是value就是   item.state

            

15.事件：函数内部阻止事件冒泡 e.cancelBubble=true;    标签内阻止事件冒泡 @click.stop=“show1()”    键盘事件 keydown 函数中获取键盘编码keyCode     在标签内直接绑定按键事件 @keyup.13=“show()” @keyup.enter=“show()”

计算属性例如下计算额度：

    

单价：

    

数量：

    

运费：{{cum}}

<    div>总金额：{{sum}}