小生博客：

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

目录:

1. 简单的将数据渲染到DOM2. 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-"时不需要再使用"{
   {}}"渲染        
    
        

3. "v-if"指令的使用

只用来判断真假(true|false)        
    
            
     
如果是true则可以显示
         -- 如果seen的值为true则显示p标签,如果为false则不显示        
    
        

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"