创建vue项目、ES6语法总结、vue-router、登陆跳转、scoped、ref进阶、props

【环境搭建】

node环境搭建

 

 

 退出ctrl+c

 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------

vue环境搭建

 

 

 

 

 

 

 

 

 

 

 

运行项目遇到的报错问题

 ===========================================================

总结

# 1 工程化---》创建vue项目
    -要按vue要求的套路写代码--》写的都是vue的东西
    -最终上线--》要编译---》把vue的代码--》编译成 html，css，js
    -创建工程，编译需要使用：nodejs--》webpack
    
# 2 安装node环境
    -官网下载一路下一步安装
    -两个命令
        npm---->pip
        node--->python
    
# 3 搭建vue的环境
    #1  装cnpm 这个包---》淘宝提供的--》以后有了它--》装模块 cnpm替代npm
    npm install -g cnpm --registry=https://registry.npmmirror.com
    ### 解决方案1：
    // 1. 清空缓存
    npm cache clean --force
    // 2. 关闭SSL验证
    npm config set strict-ssl false
    // 3. 安装
    到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm   )

    ### 解决方案2：
    // 1. 清空缓存
    npm cache clean --force
    // 2. 切换新源
    npm config set registry https://registry.npmmirror.com
    // 3. 查看源是否设置成功
    npm config get registry
    // 4. 安装
    到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm   )
 # 2 安装vue脚手架
    cnpm install -g @vue/cli

 # 3 装完脚手架，就会有个vue名令，通过vue命令创建vue项目
    vue create myfirstvue # 按下面步骤
    
    
# 4 使用webstorm打开项目

# 5 运行项目
    -1 在命令行中[项目跟路径]：使用npm run serve
    -2 配置webstorm--》点绿色箭头执行
        新建一个npm命令--》执行 serve脚本

。

。

。

【vue项目目录结构】

myfirstvue        # 项目名
    -node_modules # 等同于python的venv--》虚拟环境-->里面有很多js，项目的依赖-》可以删除---》项目就不能运行了--》在你本地--》cnpm install--》根据package.json项目的依赖，再重新安装--》又可以运行了
    -public       # 文件夹，一般不动
        -favicon.ico # 小图标
        -index.html  # spa--》单页面应用--》整个vue项目，就只有这一个html-如果禁用了js--》整个vue都用不了
        
     -src        # 文件夹---》核心代码
        -assets  #文件夹，都放静态文件--》图片，css，js。。。
            -logo.png # 静态图片
        -components  # 小组件，给页面组件使用
            HelloWorld.vue # HelloWorld 组件
        -views       # 页面组件，页面跳转，实现像 html跳转一样的效果
            AboutView.vue # 关于页面
            HomeView.vue  # 首页
        -store            # vuex--》状态管理器
            index.js
        -router            # vue-router---》路由配置文件
            index.js
        -App.vue           # 根组件
        -main.js           # 整个项目入口
        
   -.gitignore    # git忽略文件，学了git就会了
   -babel.config.js # 装了bable配置文件--》把高版本es语法转成es5
   -jsconfig.json # 不管
   -package.json  # 项目依赖文件--》项目依赖--》npm install--》根据他装
   -package-lock.json # 锁定文件，之前项目中使用模块版本
   -README.md     # 项目介绍
   -vue.config.js # vue整体配置文件   
        

。

。

。

【vue项目运行机制】

# 1 main.js--->指定了index.html--->id为app的div---》根App.vue 这个组件做了关联
# App是 个组件
new Vue({
  render: h => h(App)  # 代指 el
}).$mount('#app')

new Vue({
    el:'#app'
})

。

。

。

【组件写法】

# template 写之前我们方在template标签的模版字符串
<template>
  <div id="app">
    <h1>我是根组件</h1>
    <button @click="haneldShow">点我弹alert</button>
  </div>
</template>

# script标签--》原来js代码都写在这里、
<script>
export default {
  name: 'HelloWorld', // 组件名字
  data() {
    return {}
  },
  methods: {
    haneldShow() {
      alert('111')
    }
  }
}
</script>


#style
<style>

button{
  background-color: aqua;
}
</style>

 。

。

。

【ES6语法总结】

# let 定义变量
# const定义常量
------块级作用域----
# var 以后尽量少用，函数作用域

# 在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。

# ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束



# "暂时性死区"（Temporal Dead Zone，简称 TDZ）是指在 ES6 中使用 let 或 const 声明变量时，变量存在但无法访问的区域。这种行为是为了在 JavaScript 中引入块级作用域而设计的。

# 在 JavaScript 中，使用 var 声明的变量在其声明语句之前就可以被访问，这种行为称为"变量提升"。而在使用 let 或 const 声明变量时，变量虽然存在于作用域中，但是在声明语句之前访问这些变量会导致引发 ReferenceError 异常。

# 暂时性死区的产生原因是，let 和 const 声明的变量在进入作用域时就已经被创建，并且被绑定到了该作用域中，但是在变量的声明语句之前，访问这些变量会进入暂时性死区，因为此时变量尚未初始化

。

1.1箭头函数

# 1 简化代码
# 2 箭头函数内部，没有自己的this---》使用上一级的
    let f=()=>{}
    
# 3 this指向问题
# 1 在全局上下文中，this 指向全局对象，在浏览器环境中通常是 window 对象，在 Node.js 中是 global 对象
    console.log(this) # window 对象
    
# 2 函数调用：
    # 2.1 如果函数作为普通函数调用，this 指向全局对象（在严格模式下为 undefined）
    # 2.2 如果函数作为对象的方法调用，this 指向调用该方法的对象。

# 3 构造函数：
    在构造函数中，this 指向新创建的实例对象
    
# 4 箭头函数：
箭头函数的 this 指向定义时所在的作用域的 this 值，而不是调用时的 this 值。换句话说，箭头函数的 this 是词法作用域，而不是动态作用域

# 5 DOM 事件处理函数：
在 DOM 事件处理函数中，this 指向触发事件的 DOM 元素

#6  ES6 类方法：
在 ES6 类方法中，this 指向调用该方法的对象实例

。

1.2 模版字符串

　　let a=`我的名字是:${name}`

1.3 解构赋值

　　　　#1 解构赋值允许从数组或对象中提取数据，并将其赋值给变量。

　　#2 解构赋值可以方便地交换变量的值，同时还支持默认值

 

// 1 解对象
    let user = {name: 'lyf', age: 19, hobby: '烫头'}
    // let name=user.name
    // let age=user.age
    let {name,age,hobby,a=10} = user
    console.log(name,age,hobby,a)
=========================================================
    // 2 解数组
    let l=[11,22,33]
    let[a,b]=l
    console.log(a,b) //11，22
================================================
    //3 结构函数返回值
    function getuserInfo() {
        return {name: 'lyf', age: 19, hobby: ['烫头', '喝酒']}
    }

    let {name1='1', hobby} = getuserInfo()
    console.log(name1, hobby)  # 1 [ '烫头', '喝酒' ]

 

。

1.4 默认参数

# ES6 允许在函数参数中设置默认值，当调用函数时未提供参数时，将使用默认值

# 案例 function demo01(name,age=19) { console.log(name,age) } demo01('lqz')

。

1.5 展开运算

#1 展开运算符 ... 可以将可迭代对象（如数组、字符串、对象）展开为多个参数或元素。
#2 也可以用于函数参数

# 案例1 
let a={age:19,hobby:'抽烟'}
let user={name:'lqz',age:20,...a}
console.log(user) // {name:'lqz',age:19,hobby:'抽烟'}


# 案例2
let l=[1,2,3]
let l1=[44,55,66,...l]
console.log(l1)

# 案例3
function demo01(a,...b){
    console.log(a)
    console.log(b)
}
demo01(1,2,34,4)
let l=[44,5,66,7]
demo01(...l)

。

1.6 模块化

***  默认导入导出语法（用的最多）,只能导出一个，一般导出一个字典对象
    -导出语法
        export default 一般是个字典对象
　　exportdefault {

    name,
    add
}

 5 -导入语法  6 import 别名 from '路径'  7  以后 别名 就是 导入的对象  8  注意路径对应的是要导入文件路径，并给导入成功的文件对象起了一个别名  9 --------------------------------------------- 10 --------------------------------------------- 11 12 *** 命名导出导入法 13 14 -导出语法 可以导出多个 注意导出的变量与上面定义的变量名不能一样 15 export const name = '彭于晏' 16 export const add = (a, b) => { return a + b } 17 export const age = 19 18 19 -导入语法 20 import {name, add} from './lqz/s1' 21  console.log(name) 22 console.log(add(33, 44)) 23 24 --------------------------------------------- 25 --------------------------------------------- 26 27 *** 导入的简写形式 28  包下的 index.js文件，导入的时候可以省略，不用写到index.js的路径！！！ 29  它等同于ptyhon的__init__.py 导入包名实际是导入的__init__.py文件 30 31  但是包下的文件只要不叫index.js，那么导入该文件的时候，都不能省略！！ 32 33 34 -例如： 35 # 包名是lqz 包下有个index.js文件 36 # 导入的时候简写为 import lqz from './lqz'

。

。

。

【vue项目中，组件的使用】

#### ##  1 创建组件Child## ## ## ## ## ## ## 

<template>
  <div>
    <div class="top">
      <button>后退</button>
      <span @click="handleShow">{{ title }}</span>
      <button>前进</button>
    </div>

  </div>

</template>


<script>
export default {
  name: 'Child',
  data() {
    return {
      title: '首页'
    }
  },
  methods: {
    handleShow() {
      alert('1111')
    }
  }
}

</script>


<style scoped>
.top {
  display: flex;
  justify-content: space-between;
}
</style>

=================================================================
#### ##  2在其他组件中使用## ### ## ##### ## 
<template>
  <div id="app">
    <h1>我是根组件</h1>
    <button>点我弹alert</button>
    <hr>
    <Child></Child>
  </div>
</template>
<script>
 // @ 代指---》src文件夹
import Child from "@/components/Child.vue";
export default {
  name: 'HelloWorld', //组件名字
  components:{
    Child  //注册局部组件
  }
}
</script>

<style>
button{
  background-color: aqua;
}
</style>

。

。

。

【vue-router简单使用】

# 1 单页面应用，就无法实现页面的跳转
# 2 借助于 vue-router-->实现组件切换--》效果就是页面跳转

# 3 使用
### 3.1 App.vue--->固定成
<template>
  <div id="app">
    # 全局组件---》访问某个路径--》这个位置就替换成页面组件的内容
    <router-view></router-view>
  </div>
</template>

### 3.2 写页面组件：HomeView  AboutView
<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
}
</script>
-----------------------------------------------
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

### 3.2 注册路由：router/index.js
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
      {
    path: '/about',
    name: 'about',
    component: AboutView
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

。

。

。

【案例：登陆跳转】

　　#1 首页---》按钮--》点击--》跳转到--》LoginView.vue---》写个登陆功能--》登陆成功--》跳转到FilmsView.vue--->如果登陆失败，提示错误

 后端
1 # 统一按如下方式解决跨域
    -1 安装
        pip3 install django-cors-headers
    -2 app中注册
        INSTALLED_APPS = [
            。。。
            'corsheaders',
        ]
    -3 中间件中注册
        MIDDLEWARE = [

            'corsheaders.middleware.CorsMiddleware',
        ]
    -4 配置文件中配置
    # 允许跨域源
    CORS_ORIGIN_ALLOW_ALL = True
    # 允许的请求头
    CORS_ALLOW_HEADERS = (
        "accept",
        "accept-encoding",
        "authorization",
        "content-type",
        "dnt",
        "origin",
        "user-agent",
        "x-csrftoken",
        "x-requested-with",

        # 额外允许的请求头
        'token',
    )
-----------------------------------------------------------
逻辑层
from django.shortcuts import render

# Create your views here.
from rest_framework.viewsets import ViewSet
from rest_framework.response import Response
import json


class UserView(ViewSet):
    def create(self, request, *args, **kwargs):
        username = request.data.get('username')
        password = request.data.get('password')
        if username == 'jh' and password == '123':
            return Response({'code': 100, 'msg': '登陆成功', 'token': 'aa.bb.cc'})
        else:
            return Response({'code': 101, 'msg': '用户名或密码错误'})


class FilmsView(ViewSet):
    def list(self, request, *args, **kwargs):
        with open('./films.json', 'r', encoding='utf-8') as f:
            res_dict = json.load(f)

        return Response(res_dict)
------------------------------------------------------------------
路由层
from rest_framework.routers import SimpleRouter

from app01.views import UserView,FilmsView

router = SimpleRouter()
router.register('user', UserView,'user')
router.register('films', FilmsView,'films')

urlpatterns = [

]
urlpatterns += router.urls

。

前端

HomeView.vue

<template>
  <div class="home">
    <h1>首页</h1>
    <div v-for="item in filmsList">
      <p>{{item.name}}</p>
      <p><img :src="item.poster" alt="" height="200px" width="150px"></p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'HomeView',
  data(){
    return{
      filmsList:[]
    }
  },

  created() {
    axios.get('http://127.0.0.1:8000/app01/films/').then(res=>{
      this.filmsList=res.data.result
    }).catch(err=>{
      alert('请联系管理员')
    })
  }
}
</script>
------------------------------------------------------------------------------
LoginView.vue
<template>
  <div class="about">
    <h1>登录</h1>
    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="password"></p>
    <p><button @click="handleLogin">登录</button></p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'LoginView',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      axios.post(
          'http://127.0.0.1:8000/app01/user/',
          {
            username: this.username,
            password: this.password
          },
          {
            headers: {
              "Content-Type": 'application/json'
            }
          }).then(res => {
            console.log(res.data)
            if(res.data.code==100){
              // 跳转 首页
              this.$router.push('/')
            }else {
              alert(res.data.msg)
            }
      })
    }
  }

}
</script>



<style scoped>

</style>
--------------------------------------------
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from "@/views/AboutView.vue";
import LoginView from "@/views/LoginView.vue";

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
      {
    path: '/about',
    name: 'about',
    component: AboutView
  },
    {
    path: '/login',
    name: 'login',
    component: LoginView
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router


=============================
ps:前端后端必须都要启动才不会报错

。

。

。

【scoped】

# 加在style上，表示样式只在当前vue中生效
<template>
  <div id="app">
    <h1>xxx</h1>
    <router-view></router-view>
  </div>
</template>


<style scoped>

h1 {
  background-color: pink;
  font-size: 60px;
}
</style>

 。

。

。

【ref】

AboutView.vue

<template>
  <div class="about">
    <h1 ref="h1">This is an about page</h1>
    <Child ref="child"></Child>
    <button @click="handleShow">点我看控制台</button>
  </div>
</template>

<script>
import Child from "@/components/Child.vue";
export default {
  name: 'About',
  data(){
    return{name:'about里面有数据'}
  },
  methods:{
    handleShow(){
      console.log(this.$refs);
    }
  },
  components:{
    Child
  }
}
</script>

Child.vue

<template>
  <div>
    <div class="top">
      <button>后退</button>
      <span @click="handleShow">{{ title }}</span>
      <button @click="handleLog">前进</button>
    </div>

  </div>

</template>


<script>
export default {
  name: 'Child',
  data() {
    return {
      title: '首页'
    }
  },
  methods: {
    handleShow() {
      alert('1111')
    },
    handleLog(){
      console.log(this.$parent.name)
    }
  }
}

</script>


<style scoped>
.top {
  display: flex;
  justify-content: space-between;
}
</style>

父拿子，子拿父

。

。

。

【props】

# 自定义属性--》在子组件中拿到父组件传入的变量

# 父组件中
 <Child ref="child" :myname="name"></Child>
    
# 子组件中
export default {
  name: 'Child',
  data() {
    return {
      title: '首页'
    }
  },
  props:['myname'],
  methods: {
    handleShow() {
      alert('1111')
    },
    handlelog(){
      console.log(this.$parent.name)
      console.log(this.myname)
    }
  }
}

==========================================================================================

进阶版

# 1 方式一：
props:['myname'],
# 2 方式 二 
props: {myname: String},
# 3 方式三  
props: {
    myname: {
      type: String, //类型
      required: true, //必要性
      default: '老王' //默认值
    }
  },

 

 

UTF-8

• 作日回顾
• 今日内容
• 1 es6语法总结
• 1.1 let,const
• 1.2 箭头函数
• 1.3 模版字符串
• 1.4 解构赋值
• 1.5 默认参数
• 1.6 展开运算
• 1.7 模块化
• 1.7.1 默认导出和导入
• 1.7.2 命名导出和导入
• 1.7.3 如果在文件夹下有个index.js,只要导到文件夹一层即可
• 1.7.4 vue项目中，组件的使用
• 2 vue-router简单使用
• 3 登陆跳转
• 3.1 后端
• 3.2 前端
• 4 scoped
• 5 elementui
• 6 ref
• 6.1 AboutView.vue
• 6.2 Child.vue
• 7 props
• 作业由 AList 驱动|登录