es6基本语法和vue指令系统
今日内容
es6的语法
let
特点：
1.局部作用域
2.不会存在变量提升
3.变量不能重复声明
const
特点：
1.局部作用域
2.不会存在变量提升
3.不能重复声明，只声明常量 不可变的量
模板字符串
tab键上面的反引号 ${
变量名}来插值
let name = '未来';
let str = `我是${
name}`
箭头函数
function(){} === ()=>{} this的指向发生了改变
es6的类
原型 prototype 当前类的父类（继承性）
class Person{
constructor(name){
this.name = name;
}
fav(){
}
}
Vue的基本用法
vue的介绍
前端有三大框架： 可以去github查看三个框架的 star星
| 框架 | 介绍 |
|---|---|
| vue | 尤雨溪,渐进式的JavaScript框架 |
| react | Facebook公司，里面的高阶函数非常多，对初学者不用好 |
| angular | 谷歌公司，目前更新到6.0，学习angular得需要玩一下typescript |
| Vue angular2.0 3.0~6.0 React(高阶函数 es6)初学者不友好 |
vue的基本引入和创建
-
1.下载
cdn方式下载
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script> -
2.引包
<script src='./vue.js'>script> -
3.实例化
//2.实例化对象 new Vue({ el:'#app', //绑定那块地 data:{ //数据属性 种子 msg:'黄瓜', person:{ name:'wusir' }, msg2:'hello Vue' } });
Vue的模板语法
可以插入任何你想插入的内容，除了if-else if-else用三元运算符代替
<h2>{
{ msg }}h2>
<h3>{
{ 'hhahda' }}h3>
<h3>{
{ 1+1 }}h3>
<h4>{
{ {'name':'alex'} }}h4>
<h5>{
{ person.name }}h5>
<h2>{
{ 1>2? '真的': '假的' }}h2>
<p>{
{ msg2.split('').reverse().join('') }}p>
Vue的指令系统之v-text和v-html**
v-text相当于innerText
v-html相当于innerHTML
Vue的指令系统之v-if和v-show
v-show 相当于 style.display
v-if和v-show的区别
记住：
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-bind 和v-on
v-bind可以绑定标签中任何属性
v-on 可以监听 js中所有事件
简写：
v-bind:src 等价于 :src
v-on:click 等价于 @click
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.active{
background-color: green;
}
style>
head>
<body>
<div id="app">