Vue快速入门-1-Vue的简单使用

小生博客：http://xsboke.blog.51cto.com

创新互联自2013年起，是专业互联网技术服务公司，拥有项目成都网站设计、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元老城做网站,已为上家服务,为老城各地企业和个人服务,联系电话:13518219792

            -------谢谢您的参考，如有疑问，欢迎交流

目录:

1. 简单的将数据渲染到DOM
2. Vue的"v-"指令
3. "v-if"指令的使用
4. "v-for"指令的使用
5. Vue的事件处理
6. "v-model:value"实现双向数据绑定
7. Vue实现逆转字符串
8. Vue 动态添加class属性,以及三目运算.
9. "v-bind:style"指令定义内联样式
10. 指令支持数组
11. Vue实例各个生命周期的钩子函数

1. 简单的将数据渲染到DOM

        

            {{message}}                             -- 使用"{{}}"将数据渲染到DOM
        
        

2. Vue的"v-"指令

    通过"v-"用来绑定属性,然后对属性值进行操作
        
      -- 使用"v-"时不需要再使用"{{}}"渲染
        
        

4. "v-for"指令的使用

        

            

                
       -- item就是for从list中取出来的变量,仔细看看其实和普通的for循环一样
                    {{item}}                    -- 如果循环的是一个字典类型数据,通过 "item." 获取value
                
                
        
        

5. Vue的事件处理

    通过"v-on"指令,处理click的事件
    所有的事件触发时执行的函数,都需要写到Vue实例的的methods选项中,
        

            
{{message}}
            显示消息
        
        

6. "v-model:value"实现双向数据绑定(就是不同标签中的内容是相同的)

        

            
{{message}}
                   -- input标签和p标签互相随对方改变
        
        

7. Vue实现逆转字符串

        

            
{{message}}
            逆转消息
        
        

8. Vue 动态添加class属性,以及三目运算.

    动态添加class属性

        

        
            

                
                
我是P标签
      -- 当isActive为true时,class属性才会等于"Vactive",然后将引用上面style定义的CSS样式
            

            
        

    三目运算
        

        
            

                
                
我是P标签
       -- 当isActive为true时,引用Vactive的值,为false时,引用Verror的值
            

            
        

9. "v-bind:style"指令定义内联样式

    "v-bind"可以简写为":",所以"v-bind:style"可以写为":style"

        
            

                
我是P标签
            

            
        

10. 指令支持数组

    

    
        

            
我是P标签
        
        
    

11. Vue实例各个生命周期的钩子函数

    通俗讲,就是在Vue实例运行的各个阶段可以使用的函数
    比如:
        在Vue实例创建时可以执行created函数
        在Vue实例被挂载到DOM时可以执行mounted函数
        在Vue实例更新时,可以执行updated函数

        

            {{message}}
            单击更新message            -- "v-on"指令可以简写为"@",所以这里的"v-on:click"简写为了"@click"