189 8069 5689

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
  1. Vue的"v-"指令
    通过"v-"用来绑定属性,然后对属性值进行操作
        
      -- 使用"v-"时不需要再使用"{{}}"渲染
  1. "v-for"指令的使用 
        

            
    
                
  •        -- item就是for从list中取出来的变量,仔细看看其实和普通的for循环一样
                    {{item}}                    -- 如果循环的是一个字典类型数据,通过 "item." 获取value
                
    •
  1. Vue的事件处理
    通过"v-on"指令,处理click的事件
    所有的事件触发时执行的函数,都需要写到Vue实例的的methods选项中,
        

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

            
{{message}}

                   -- input标签和p标签互相随对方改变
  1. Vue实现逆转字符串
        

            
{{message}}
  1. Vue 动态添加class属性,以及三目运算.
    动态添加class属性

        

        
            

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


            
        

    三目运算
        

        
            

                
                
我是P标签
       -- 当isActive为true时,引用Vactive的值,为false时,引用Verror的值
  1. "v-bind:style"指令定义内联样式
    "v-bind"可以简写为":",所以"v-bind:style"可以写为":style"

        
            

                
我是P标签
  1. 指令支持数组
    

    
        

            
我是P标签
  1. Vue实例各个生命周期的钩子函数
    通俗讲,就是在Vue实例运行的各个阶段可以使用的函数
    比如:
        在Vue实例创建时可以执行created函数
        在Vue实例被挂载到DOM时可以执行mounted函数
        在Vue实例更新时,可以执行updated函数

        

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

分享名称：Vue快速入门-1-Vue的简单使用
文章来源：http://cdxtjz.cn/article/gpcoig.html

其他资讯