Vue的基本属性&&事件

---

Vue的基本指令

• Vue和Angular的用法差不多,语法和属性也差不多,Vue更像是国人的框架,所有的用法和习惯也都符号国人程序员的习惯,所以这也是Vue越来越热的原因,Vue就是简化了Angular一些复杂操作,用起来更加简单,便捷

• Angular是用ng开头的指令,而Vue是用v开头的指令

• 下面是一段代码,看完之后 你就瞬间明白是什么意思了!如果你已经学过Angualr的话,Vue可以说是鼻涕往嘴里流呢! So easy too happy!

• **示例代码 : **

{{test}}


是否显示
是否存在该标签
No

{{ msg }}







遍历数组第一种:

{{value}}----{{$index}}

遍历数组第二种:
{{value}}----{{key}}

遍历对象第一种:
{{key}}--- {{value.name}}----{{value.age}}

遍历对象第二种:
{{$index}}--- {{stu.name}}----{{stu.age}}

Vue的基本写法

• **示例代码 : **

// 这种绑定的方式 是不是看起来更加熟悉呢
{{msg}}
{{msg}}

    
{{name}}
    
    
{{age + 10}}

Vue事件处理

• **示例代码 : **

{{name}}


点击


双击

Vue事件绑定

• 示例代码 : 这种代码应该是看一遍就懂的 如果是小白的话 建议先去看文档

{{msg}}

{{*msg}}

Vue基本属性

• **示例代码 : **

.red{
     color: darkgreen;
}
.fs20{
     font-size:20px;
}



这是一段文字

这是一段文字


这是一段文字



大标签

大标签

大标签

![]({{url}})


![](url)

Vue事件绑定

• **示例代码 : **

点击弹出
点击

再次点我

Vue内置过滤器

• **示例代码 : **

{{name | uppercase}}


{{name | uppercase | lowercase}}


{{price | currency '&'}}




    
{{value}}




    
{{value}}




    
{{value}}

Vue自定义指令和标签

• **示例代码 : **

自定义指令1


自定义指令2


自定义元素

Vue自定义过滤器

• **示例代码 : **

{{e | defined 11 12}}
{{e | defined2 11 12}}
{{nowDate | dateTime}}

计算属性

• 这里要特别注意get()和set()方法, 下面请看代码详解
• **示例代码 : **

{{price}}
总价