Vue学习

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue模板语法

1.文本

        

            
            
site : {{name}}
            
url : {{url}}
            
{{details()}}
            


            
        

2.html(v-html)

3.属性（v-bind:）

以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

    
        

            修改颜色
            


            

                
                v-bind:class 指令
            
        

4.表达式

        

            {{5+5}}

            {{ ok ? 'YES' : 'NO' }}

            {{ message.split('').reverse().join('') }}
            
菜鸟教程
        

5.点击事件（v-on：click）

6.指令判断（v-if）

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

    
现在你看到我了
    

7.参数

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定

    
菜鸟教程

    

8.数据双向绑定

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

        

            
{{message}}
            
        
        

9.反转字符串

            
{{message}}
            反转