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实例各个生命周期的钩子函数

简单的将数据渲染到DOM

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

Vue的"v-"指令

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

"v-for"指令的使用

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

Vue的事件处理

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

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

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

Vue实现逆转字符串

        
            {{message}}

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

    动态添加class属性

        

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

            
        

    三目运算
        

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

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

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

        
            
                我是P标签

指令支持数组

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

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

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

文章标题：Vue快速入门-1-Vue的简单使用
本文URL：http://6mz.cn/article/gpcoig.html

网站建设知识

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

其他资讯