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://scyanting.com/article/gpcoig.html