最简单的vue入门：基础语法学习

新建index.html，直接复制以下代码，双击浏览器运行即可。代码包含Vue的基础语法，可对照练习。 

    
    
    
    
    
    


    


        
插值表达式
        
{{msg}}

        
v-text
        


        
v-html
        


        
事件绑定v-on:click
        
点我啊

        
v-on:click可简写为@click
        
点我啊

        
面向数据编程，改变数据来改变DOM，不直接操作DOM
        

            
{{oldContent}}

            点击改变DOM内容
        


        
属性绑定v-bind:
        
我是一个P标签，使用原生title
        
我是一个P标签，使用v-bind:title
        
我是一个P标签，使用v-bind:title的简写:title
        
我是一个P标签，使用v-bind:title的简写:title，title里还加了文本

        
双向数据绑定 v-model="inputValue"
        
        
我跟上面的input输入框进行了绑定，它变我也变。
        
{{inputValue}}

        
计算属性
        输入你的姓：

        输入你的名：

        
你的姓名是：{{fullName}}
        
监听器watch，监控数据变化
        
姓+名change次数总共是{{count}}

        
v-if 显示隐藏
        
显示还是隐藏，这是个问题。
        显示/隐藏

        
v-show 显示隐藏
        
显示还是隐藏，这是个问题。
        显示/隐藏

        
v-for 循环
        

            
{{item}}
        

        

========================我是分割线========================

    

    

注意 data 的格式与以下不同： 

export default {
    data(){
      return{

      }
    },
    methods:{

    }
  }

易错：

el : " #root " 位置写错，写在data里面。

 

vue.js 下载地址：

https://cdn.jsdelivr.net/npm/vue