Vue基本知识点学习

Vue基础知识点学习 day01

1.基本认识:
Vue是一个构建数据驱动的 web 界面的渐进式框架,所谓’‘渐进式’‘其实就是你掌握了Vue的多少用法就使用多少,不像一些框架必须掌握所有才能进行运用。
2.Vue特性

• 轻量
  Vue.js库的体积非常小的，并且不依赖其他基础库。

• 数据绑定
  对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

• 指令
  内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。

• 插件化
  Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

• 组件化
  组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
  3.Vue资源安装
  很简单，到官网上下载就可以，任意版本都行，然后直接将js拷贝到项目中就完事
  4.Vue的简单使用认识

  • 步骤一(引入js文件):

  

   这里需要注意两个小问题:
   		1.必须是双标签,单标签的
  

  Vue架构认识

  MV VM模式：(medol view viewmodel)
  具体解释:
  

  VueJS表达式

  VueJS表达式写在双大括号内：{{ expression }}
  VueJS表达式把数据绑定到 HTML
  VueJS将在表达式书写的位置"输出"数据
  VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量

  1
  		基本的算术运算
  		 /*
            * 运算 字符串 有字符串时除了‘+’加是字符串的拼接 其他会正常运算
            **/
           num: 5 + 10,
           nums: "5" + 10,
           chengfa: 5 * 9,
           chufa: 10 / 2,
           chengfas: "50" * 10,
  

  2
  		
  
  			
  			{{ show1?"真":"假"}} //真
  		
  		
  		
  

  3
  	1.  直接使用字符串字面值作为字符串对象
  	2.  使用data中的字符串对象
  	
  
  	    {{"这是字面值"}}
  
  	    {{"这是字面值".length}}
  
  	    {{message.length}}
  		//获取字符串长度
  	    {{message.substring(1,5)}}
   //截取1-5个字符
  	    {{message.substring(2,6).toUpperCase()}}
  
  	
  	
  	
  

  4
  	对象操作
  	在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样
  	
  
  	    {{user}}
  
  	    {{user.toString()}}
  
  	    {{user.name}}
  
  	    {{user.age}}
  
  	    {{user.getAge()}}
  
  	
  	
  	
  

  5
  	数组操作
  	在表达式中可以使用JavaScript数组中的任何语法来操作数组.
  	
  
  	    {{hobbys}}
  
  	    {{hobbys[0]}}
  
  	    {{hobbys.length}}
  
  	
  	
  	
  

  Vue指令

  可以去查看官方文档有详细的介绍和使用方法，作用

  ## 常见的指令
  	v-text=“表达式”  设置标签中的文本
  	v-html=“表达式”  设置标签中的html
  	v-if=“表达式”    判断条件	
  	v-for=“表达式”   循环
  	v-model=“表达式” 数据双向绑定
  	v-on=“表达式”    注册事件
  

  5:vue指令:
     指令:v-*;
     
    v-text:操作的文本;
    
    v-html:操作的html;
    
    v-for:
       v-for=” currentObject in  Objects”
     如果是对象:
       每次遍历得到的是对象的属性值:
   	v-for=” (v,k,i) in  Objects”
  
     如果是数组:
       每次遍历得到的是数组中单独的一个值:
  	 v-for=” (array,i) in  arrays”
   
   	 v-bind:给html标签绑定属性
      单一属性绑定:v-bind:属性名=”表达式”
      绑定一个对象:v-bind=”表达式”
      
   	v-model:数据模型的绑定:双向绑定
    	v-model=”表达式”;
  	作用于:   input  select textarea;如果是复选框:应该data使用数组;
  
  	v-show:是否显示,判断表达式的值,
  	true:显示;false:隐藏(只是增加一个样式:display:none,html元素没有删除的哦)
  
  	v-if:
  	1:   v-if=”表达式”:true就做事情,false:压根就把这个元素给删除了;
  	2:v-if=”表达式”
      	v-else
  	3:v-if=”表达式”
     	v-else-if=”表达式”
     	v-else-if=”表达式”
      v-else
   
  	v-on:
  	 给一个html标签绑定事件:
  	v-on:事件名=”表达式”;
  	 注意:this:当前对象
  
  

  具体代码:

  v-text=“表达式”  设置标签中的文本
  	
  
          {{text}}
      
      
      
  

  
  
      {{title}}，
  
  
  
  

  
          
  
              
  数目小于20
          
          
  
              
  数目大于20小与40
          
          
  
              
  数目大于40
          
      
  
      
  

   
  v-model只作用于以下表单:  [input  select(下拉) textarea(文本域)]
  
      
  
          
          {{title}}
          
          {{text}}
          
              
                  {{a.name}}
              
          
      
  
      
  

  
      
  
          {{title}}
      
  
      
  

  
      
      	按钮  	//这里有两种注册事件的写法 一： v-on:click="say"	
      										二:@click="say()" 方法的()括号可写可不写,需要传值就写上
      
      
  
  

  组件:自定义编标

  局部组件