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).对象形式的设置：<div :class="classobj"></div> 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循环中用到
<div v-for="item in arr">
{{item.name}}___{{item.state}}__{{item.state | guolv}} guolv就是过滤器的名字其中过滤器的参数就是value就是 item.state
</div>
15.事件：函数内部阻止事件冒泡 e.cancelBubble=true; 标签内阻止事件冒泡 @click.stop=“show1()” 键盘事件 keydown 函数中获取键盘编码keyCode 在标签内直接绑定按键事件 @keyup.13=“show()” @keyup.enter=“show()”
计算属性例如下计算额度：
<div id="out">
<div>单价：<input type="text" v-model="monery"/></div>
<div>数量：<input type="text" v-model="num"/></div>
<div>运费：{{cum}}</div>
< div>总金额：{{sum}}</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#out',
data:{
monery:'',
num:'',
},
methods:{
},
computed:{
cum(){
if(this.monery*this.num > 88){
return 0
}else{
return 10
}
},
sum(){
return this.monery*this.num+this.cum
}
}
})
详细可以见官网：https://cn.vuejs.org/
网友评论