# Vue快速入门 # Vue快速入门 以下所有代码均可在浏览器直接运行，替换body即可。为了节省空间，里的内容需自行添加。 ## 1.导入Vue ```html ``` ## 2.数据绑定 **方式一：** ```html Title
{{message}}
``` **方式二：** 通过v-bind指令： ```html
悬停几秒查看动态绑定
``` 经过以上的操作div中的{{message}}的显示内容已经被绑定到了VUE对象中的message属性上，更改message的值即可动态刷新页面中的值。 ## 3.条件判断 ```html

A

B

C

``` ## 4.语句循环 ```html
  • {{item.message}}
    • ``` ## 5.双向绑定 ```html
    {{message}}
    ``` ## 6.计算属性 ```html
    {{currentTime1()}}
    {{currentTime2}}
    ``` 1. 调用方式不同。computed直接以对象属性方式调用，不需要加括号，而methods必须要函数执行才可以得到结果。 2. 绑定方式不同。methods与compute纯get方式都是单向绑定，不可以更改输入框中的值。compute的get与set方式是真正的双向绑定。 3. 是否存在缓存。methods没有缓存，调用相同的值计算还是会重新计算。competed有缓存，在值不变的情况下不会再次计算，而是直接使用缓存中的值。