3小时Vue基础快速入门

1、vue的起步和插值





    
    
    
    vue的起步和插值



    
        {{ msg }}
 
        {{ 2 }}
 
        {{ "hello" }}
 
        {{ {id:1} }}
 
        {{ 1>2 ? '真的':'假的'}}
 
        {{ txt.split('').reverse().join('') }}
  
        
        {{ getContent() }}
        {{ msg3 }}

2、指令之v-text和v-html




    
    
    
    指令之v-text和v-html


    
        {{ msg }}

3、条件渲染 v-if 和 v-show

4、v-bind 绑定用于绑定数据和元素属性简写：　　：





    
    
    
    v-bind指令
    



    
        {{res.name}}
         
        v-bind的用法 
        
        
        hello bind

5、v-on事件绑定简写：@





    
    
    
    v-on事件绑定
    



    
        {{num}}

6、v-for列表渲染





    
    
    
    v-for列表渲染
    



    
        
            
                 
                    
                    {{index}} - id:{{item.id}} 菜名:{{item.name}}
                
            
            
                
                    {{key}}---{{val}}

7、vue 中v-model双向数据绑定表单输入绑定





    
    
    
    vue的双向数据绑定v-model
    



    
        {{msg}}
        
        
        {{checked}}
        

        
            黄瓜
            

            西红柿
            

            芸豆
            

            


            {{checkedNames}}
        
        {{txt}}
        
        {{msg2}}

8、侦听器watch的用法





    
    
    
    侦听器watch



    
        
        {{msg}}
        {{stus[0].name}}

9、计算属性之computed





    
    
    
    侦听器watch



    
        {{reverseMsg}}
        {{fullName}}

10、计算属性之computed的setter方法





    
    
    
    计算属性setter



    
        {{content}}

11、Vue的过滤器 filters 讲解全局过滤器局部过滤器





    
    
    
    过滤器



    
        {{price | myPrice('￥')}}
        {{msg|myReverse}}

12、案例：音乐播放器





    
    
    
    案例:音乐播放器
    



    
        
        
            
                {{item.id}}-歌名: {{item.name}}
                歌手: {{item.author}}

13、音乐播放器




    
    
    
    Document
    


    
        
        
            
                {{item.id}}--歌曲: {{item.name}}
                歌手: {{item.author}}

14、音乐播放器 computed方法





    
    
    
    案例:音乐播放器 computed
    



    
        
        
            
                {{item.id}}-歌名：{{item.name}}
                {{item.author}}

vue

3小时Vue基础快速入门

1、vue的起步和插值

{{ msg }}

{{ 2 }}

{{ "hello" }}

{{ {id:1} }}

{{ 1>2 ? '真的':'假的'}}

{{ txt.split('').reverse().join('') }}

{{ getContent() }}

{{ msg3 }}

2、指令之v-text和v-html

{{ msg }}

3、条件渲染 v-if 和 v-show

小马哥

4、v-bind 绑定 用于绑定数据和元素属性 简写： ：

v-bind的用法

hello bind

5、v-on事件绑定 简写：@

{{num}}

6、v-for列表渲染

{{index}} - id:{{item.id}} 菜名:{{item.name}}

7、vue 中v-model双向数据绑定 表单输入绑定

8、侦听器watch的用法

{{msg}}

{{stus[0].name}}

9、计算属性之computed

{{fullName}}

10、计算属性之computed的setter方法

11、Vue的过滤器 filters 讲解 全局过滤器 局部过滤器

{{price | myPrice('￥')}}

{{msg|myReverse}}

12、案例：音乐播放器

{{item.id}}-歌名: {{item.name}}

13、音乐播放器

{{item.id}}--歌曲: {{item.name}}

14、音乐播放器 computed方法

{{item.id}}-歌名：{{item.name}}

相关

4、v-bind 绑定用于绑定数据和元素属性简写：　　：

5、v-on事件绑定简写：@

7、vue 中v-model双向数据绑定表单输入绑定

11、Vue的过滤器 filters 讲解全局过滤器局部过滤器