01.Vue基础

JavaScript回顾：

核心：DOM操作

基础语法：

 

其他： 

Django模版语法：jinja2



Vue

前端框架

核心：数据驱动视图

渐进式JavaScript框架

前后端分离

 

es6部分语法：

　　let 声明变量

var a =[];
for (let i=0; i<10,i++){
  a[i] = function(){
        console.log(3)
    }  
}

a[2](); //2

　　特点：

　　　　1.局部作用域（变量作用域不会提升）

　　　　2.变量不能重复声明

　　const声明变量

　　特点：

　　　　1.局部作用域（变量作用域不会提升）

　　　　2.变量不能重复声明

　　　　3.只声明常量（不可变的量）

 

　　模版字符串

　　tab键上面的反引号

　　${变量}在模版字符串中渲染

let name = '未来';
let str = `我是${name}`

 

 

　　es6 函数(箭头函数)

this的指向发生了改变

this指向定义对象的父类

　　

//常用写法
let add2 = (x) =>{
    return x
};
console.log(add2(20));  //20

let add3 = x => x;
console.log(add3(30));  //30

 

　　es6对象

let person = {
  name:'日天',
  age:30,
  fav:function(){
    console.log(this)    //this为当前对象
    console.log(this.name)  
  }      
}


let person2 = {
  name:'日天',
  age:30,
  fav:() =>{
    console.log(this)     // this指向发生了改变.this指向定义person2的父级对象（上下文）
    console.log(this.name)  
  }      
}

//对象的单体模式
let person3 = {
   name = '日天',
   fav(){
   console.log(this); 　　　// this当前对象  
  }
}

 

　　es6的类

原型 prototype 当前类的父类（继承性）

function Person(name,age){
   this.name=name;
   this.age=age;
}

// 预计原型给对象声明方法 (继承性)
Person.prototype.showName = function(){
    console.log(this.name)
}

var p1 = new Person('alex', '29')


//es6 构造类

class Person{
   constructor(name='alex',age='18'){    //初始化
    this.name = name;
    this.age = age
  }
   showname(){                           //类方法
        console.log(this.name)
  }
   showage(){
        console.log(this.age)
  }
}

let p = new Person();
p.showname()

 Vue的基本用法

　　Vue的介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

　　Vue的模版语法

(1).下载使用Vue

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告！

<!--cdn资源-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<!--文件下载到本地，使用本地资源-->
<script src="./Vue.js"></script> 

(2).一些基本特性

声明式渲染

　　Vue的基本指令

Vue的指令系统之v-text和v-html

v-text相当于innerText
v-html相当于innerHtml

 

Vue的指令系统之v-if和v-show

 

　　Vue的思想 = 数据驱动视图