vue01

vue导入方式及优缺点

1.Vue加载方式一：下载到本地

2.Vue加载方式一:使用cdn导入(链接)

前台框架：angular、react、vue
vue：有前两大框架优点，摈弃缺点；没有前两个框架健全 
vue优点：
中文API
单页面应用：提升移动端app运行速度
组件化开发
数据双向绑定：变量全局通用
虚拟DOM：缓存机制
数据驱动思想(相比DOM驱动)：只考虑数据，不需要在意DOM结构

Vue下载及官方文档：由此进入

挂载点

new Vue（{
el:"#app", // css3选择器，一个页面可以有多个实例，对应多个挂载点
}）
1) html与body不能作为挂载点
2)一个vue对象挂载点之后索引一个匹配结果，所以挂载点一般用id标识

　插值表达式

{{ 变量以及变量的简单运算 }}

1) 用实例成员data为vue环境提供数据，数据采用字典{}形式
2) 在插值表达式{{}}中，直接书写数据的key来访问数据
3) 在外部通过接受实例的变量app，访问实例成员(实例成员都用$开头)，间接访问到数据 app.$data.info
4) 在外部也可以通过实例变量app直接访问数据

    
    
    
    
    
    




    
{{ info }}
    
{{ num }}
    
{{ arr }}
    
{{ dic }}
    
 {{ dic['name'] }}

过滤器

    
    




   
 {{ num+100 }}
   
 {{ num+msg }}
  
    
 {{ msg.split('')[4] }}
  
    
{{ msg | f1 }}
    
{{ num | f2 }}
  
    
{{ 10,20,30,40 | f3 }}
    
    
{{ 10 | f3}}

文本指令

1）v-指令名="变量"，变量是需要data提供数据值的；
2）v-指令名="常量"，常量采用常量基本的语法，数字与布尔类型等可以直接书写的直接书写，字符串等需要特殊符号的需要添加符号；
3）v-html可以解析html语法；

4) 反引号：可以在一对反引号内些多行文本，可以是普通文本，也可以是事先定义好的变量；

js面向对象

js语法中{}就是一个对象，可以意通过点取值

js 函数

ES6中定义变量的4中方式

   var a = 10;
   let b = 20;
   const c = 30;
   d = 40;  # 不加声明词定义的是全局变量，即使在函数内部定义的在函数外部也能正常访问。如果在函数外部也有变量d,则修改全局的变量
   
let、const定义的变量不能重复定义，且具备块级作用域
全局作用域 > 块级作用） > 局部作用域
块级作用域：只要在{}内用let定义的变量就是块级作用域
局部作用域：在函数内部定义的let

几种函数的书写方式

function、箭头函数、方法的区别

function和方法内部有this，箭头函数没有。

this指向Vue的两种方式

//  这种方式function找到的是axios

事件指令

事件指令：   v-on:事件名="方法变量"
简写：  @事件名="方法变量"

    
    





    
{{ msg }}
    
{{ msg }}

    


    
{{ action }}
    


     
    
{{ info }}
    
    
{{ info }}
    
{{ info }}

属性指令

属性指令：   v-bind:属性名="变量"
简写：       :属性名="变量"

    
    
    


    

    
        
红色字体

        
        
简单使用
        


        
        
        


        
        

        
        


        
        
        
        



        
        
样式属性
        
样式属性