创建vue实例

第一个vue实例

     
      {
    {huanying}}
     

 

数据模板引擎

v-开头的指令是帮助我们渲染数据用的

 

v -text 标签内添加文字

 

v -html 标签内添加 <标签>文字</标签>

 

v -for 循环

      
    
       
        
        
{
    {hobby}}
    
       
    
       
        
        
{
    {s.name}}
    
       
      

 

v -if 判断,  v-if  v-else-if  v-else

      
    
       
        
        
如果name=ann显示这一条
    
       
    
       
        
        
如果name=ben显示这一条
    
       
    
       
        
        
如果是别的,显示这一条
    
       
      

 

v -show 根据data中 的布尔值 操作

      
       能显示出来嘛?
      

 

v -bind: 绑定属性

注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href

    
          
          
                  
      
    
       click_here    
       
      

 

v -on: 在标签上面绑定事件

    
          
          
                  
      
    
       
点点点
    
       点击变色
      

 

v -on: 在标签上面绑定事件

用户修改渲染的原始数据后，打印修改后的数据,  

我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改，同时我们还需要监听用户行为，如果用户在标签上面修改了数据（之前的修改，指的是通过vue实例app01进行的数据修改），我们需要获取到数据，针对这个需求，我们可以使用v-mode指令。

      
    
           
           
           
               ann        ben        cat        
       
    {
     {name}}    {
     {genders}}    {
     {girlfriends}}
      

 

计算属性:  computed

      
    
       
                
                 
                      
选项
                      
填写
                 
                
                
                     
                          
人物
                          
                     
                     
                          
地点
                          
                     
                     
                          
干什么
                          
                     
                     
                          
组成的话
                          
{
    {score}}
                    
                
           
    
       
    {
     {who}}
      

 

侦听属性/侦听器:  watch

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

      
    
       
                
                 
                      
科目
                      
的分
                 
                
                
                 
                      
语文
                      
                 
                 
                      
数学
                      
                 
                 
                      
英语
                      
                 
                 
                      
的分
                      
{
    {score}}
                 
                
           
    
       
    {
     {yuwen}}
      

 

获取DOM元素:  methods

    
          
          
                  
      
    
       
        点点点
       
    
       点击变色
      

 

自定义指令:

    
          
          
                  /* 页面展示的时候 方框移动到右下角 */
      
    
       
        Hello Vue!