标签：es6 vue console log -- 插槽 let name

Ⅰ 动态组件

【一】基本使用

【1】不使用动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
    <script src="./js2/vue.js"></script>
</head>
<body>

<div class="app">
    <div>
        <button @click="type='home'">首页</button>
        <button @click="type='goods'">商品</button>
        <button @click="type='order'">订单</button>

    </div>

    <home v-if="type=='home'"></home>
    <goods v-else-if="type=='goods'"></goods>
    <order v-else></order>

</div>

</body>
<script>

    Vue.component('home',{
        template:`
          <div>
                <h1>首页</h1>
          </div>`,
        data(){
            return {}
        }
    })

    Vue.component('goods',{
        template:`
          <div>
                <h1>商品页</h1>
          </div>`,
        data(){
            return {}
        }
    })

    Vue.component('order',{
        template:`
          <div>
                <h1>订单</h1>
          </div>`,
        data(){
            return {}
        }
    })


    var vm = new Vue({
        el: '.app',
        data: {
            type:'home'
            },
    })

</script>
</html>

【2】使用动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
    <script src="./js2/vue.js"></script>
</head>
<body>

<div class="app">
    <div>
        <button @click="type='home'">首页</button>
        <button @click="type='goods'">商品</button>
        <button @click="type='order'">订单</button>
    </div>

<!--    动态组件-->

    <component :is="type" ></component>
</div>


</body>
<script>

    Vue.component('home',{
        template:`
          <div>
                <h1>首页</h1>
          </div>`,
        data(){
            return {}
        }
    })

    Vue.component('goods',{
        template:`
          <div>
                <h1>商品页</h1>
          </div>`,
        data(){
            return {}
        }
    })

    Vue.component('order',{
        template:`
          <div>
                <h1>订单</h1>
          </div>`,
        data(){
            return {}
        }
    })


    var vm = new Vue({
        el: '.app',
        data: {
            type:'home'
            },
    })

</script>
</html>

【二】keep-alive的使用

keep-alive可以让输入框内有的内容一致保持，不会因为切换而重置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <div>
        <button @click="type='home'">首页</button>
        <button @click="type='goods'">商品</button>
        <button @click="type='order'">订单</button>

    </div>

    <keep-alive>
        <component :is="type"></component>
    </keep-alive>
</div>


</body>
<script>

    Vue.component('home', {
        template: `
          <div>
          <h1>首页</h1>
          </div>`,
        data() {
            return {}
        }
    })

    Vue.component('goods', {
        template: `
          <div>
          <h1>商品页</h1>
          </div>`,
        data() {
            return {}
        }
    })

    Vue.component('order', {
        template: `
          <div>
          <h1>订单页</h1>
          <input type="text" v-model="search" placeholder="请搜索">
          </div>`,
        data() {
            return {
                search: ''
            }
        }
    })


    var vm = new Vue({
        el: '.app',
        data: {
            type: 'home'
        },
    })
</script>
</html>

Ⅱ 插槽

【一】基本插槽

一般情况下，编写完1个组件之后，组件的内容都是写死的，需要加数据只能去组件中修改，扩展性很差
然后就出现了插槽这个概念，只需在组件中添加<slot></slot>，就可以在body的组件标签中添加内容

# 1 有个组件 
	<child/>
    <child>可以放内容</child>
    
# 2 插槽的作用
	写在组件中的  数据
    都会被赋值并替换掉组件中得<slot></slot>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <home>
        <div>
            <img src="./img/4.jpg" alt="">
        </div>

    </home>
</div>


</body>
<script>

    Vue.component('home', {
        template: `
          <div>
          <h1>首页</h1>
          <slot></slot>
          </div>`,
        data() {
            return {}
        }
    })


    var vm = new Vue({
        el: '.app',
        data: {},
    })

</script>
</html>

【二】具名插槽

可以指定标签放在某个插槽的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <home>
        <div slot="a">
            <img src="./img/4.jpg" alt="">
        </div>

        <div slot="b">
            <h3>我是h3标题</h3>
        </div>

    </home>
</div>


</body>
<script>

    Vue.component('home', {
        template: `
          <div>
           <slot name="b"></slot>
          <h1>首页</h1>
          <slot name="a"></slot>
          </div>`,
        data() {
            return {}
        }
    })


    var vm = new Vue({
        el: '.app',
        data: {},
    })

</script>
</html>

Ⅲ vue项目创建

【一】关于版本

# 关于版本
	-vue2：只能用vue-cli创建
    -vue3：既可以用vue-cli又可以用vite

【二】 vue-cli

#  vue-cli：vue 脚手架，用来创建vue空项目的工具(软件)
	-安装：必须依赖于nodejs的环境  --- >类比django-admin

【三】搭建node环境

#  搭建node环境  --->搭建python环境
	-nodejs：20.16版本
    -下载安装包：分平台
   	-一路下一步安装即可
    -有两个命令
        node：就是python
        npm: 就是pip

网址：https://nodejs.org/zh-cn
傻瓜式安装
他会自动添加到你的环境变量中

【四】npm源的替换（包管理工具）

#  npm源的替换（包管理工具）
	-npm 下载第三方包时，去国外下，速度很慢
    -替换一下国内镜像站：阿里云源
    	-npm config set registry http://registry.npmmirror.com 
    -使用阿里云提供的cnpm替代npm：提示和显示更友好
    	npm install -g cnpm --registry=https://registry.npmmirror.com
        以后用cnpm替代npm即可
        装完可以输入cnpm检验
        
#  nodejs的包管理工具
	npm、yarn、cnpm

【五】安装 vue-cli

#  安装 vue-cli--就能创建vue项目
	cnpm install -g @vue/cli  # pip install django--->djang-admin.exe-->创建项目
    安装完成，会释放出一个vue命令

【六】vue-cli创建项目

#  vue-cli创建项目
	vue create 项目名

自定义创建

选择需要的

选择vue版本

history模式选择

选择配置文件

是否保存此次设置

开始创建，这种也能创建就是很慢

创建成功

运行成功

输入网址，再次确认

【七】使用编辑器打开

#  项目运行的两种方式
	-方式一：terminal中
    	npm run serve
    -方式二：pycharm 点绿色箭头运行
    	配置一个 npm 命令

【1】terminal中打开

如果出现这种报错

在已经安装好Node.js的情况下，在Visual Studio Code终端运行npm指令时，出现报错。

报错内容为：npm命令时显示‘npm’不是内部或外部命令

如果还是不行就打开settings里面的terminal，重新启动运行

若还是报错

（1）问题原因：npm环境变量配置问题

在cmd窗口输出node，回车后弹出信息node不是内部或外部命令，也不是可运行的程序，这时候就是环境变量配置的问题！

1.方法一：以管理员身份运行（推荐）

右击vscode，选择一管理员身份运行，即可解决问题。

2.方法二：查看npm环境变量配置

cmd运行node -v, npm -v检查是否安装。
如果此时cmd窗口提示node不是内部或外部命令，也不是可运行的程序，依旧是环境变量的问题

（1）配置node环境变量：

打开此电脑 ==> 右键属性 ==> 高级系统设置 ==> 环境变量

用户变量下，新建用户变量。变量值写node.js的安装路径即可

（2）npm的全局模块的存放路径以及cache的路径及增加环境变量:
（2.1）在node.js下建立node_global和node_cahce文件夹

cmd窗口输入：

npm config set prefix “您想创建文件的地址”
npm config set cache “您想创建文件的地址”。一个设置了全局变量，一个设置了缓存。
这种设置是不可逆的如果这样配置之后后续如果卸载再重新安装默认全局变量，跟缓存会创建到你现在所选的地址

新增系统Path变量

如果环境变量配好的话，仍然报错，那就以管理员的身份启动vscode，然后再次尝试

（2）C:\Program Files\nodejs\node_cache”之类的东西，可是后来不想要了，想要恢复默认值，怎么办呢？

方法是删除C:\Users\Administrator.npmrc这个文件。如果.npmrc不在这个目录下，就全局搜一下啦。
但是删除之后再terminal中 npm run serve 打开
会报以下错误

需要重新配置环境变量

注意：很多可能会发现改完之后没用，这是因为环境变量更改完之后需要重启才能配置成功。

【2】pycharm 点绿色箭头运行

先进行配置

【3】打开项目.js项目爆红

打开steetings里面的jshint

【八】如果上述创建的很慢

用Vue 项目管理器

在浏览器中打开

Ⅳ vue项目目录结构

# vue_demo001 项目名
	-node_modules：黄色是被git管理了表示忽略文件-->当前项目的所有依赖-->如果没有项目运行不了
    			  相当于python项目中有个文件夹 .venv
        		   特别多小文件-->把项目发送给别人，这个文件夹删除
                    cnpm install  #项目根路径下执行，就会重新创建出来，根据package.json安装
                
    -public # 文件夹
    	-favicon.ico  # 网页小图标
        -index.html   # vue：spa 单页面应用-->只有一个html页面-->不要动它
        
    -src             #文件夹 ，vue的核心代码，后期我们都在这里面写代码
        -assets      # 文件夹，放公共静态资源，js，css，图片
        	-logo.png  # 静态图片
	   -components   #文件夹 组件，以后小组件放在这个文件夹内【页面组件和小组件】
    		-HelloWorld.vue # 默认提供的小组件
       		-后期我们写的小组件放这里
       -router      #文件夹，第三方包，vue-routr的东西，后面会详细学   路由
			-index.js # vue-router的代码
       -store       #文件夹，第三方包，vuex的东西，后面会详细学   状态管理器
    		-index.js # vuex的代码

        
   	  -views      # #文件夹 组件，以后页面组件放在这个文件夹内【页面组件和小组件】
        	-AboutView.vue  # 关于页面
        	-HomeView.vue   # 首页
        
      -App.vue   # 根组件
      -main.js   # vue项目的核心js文件，项目运行从他开始
        
   -.gitignore       # git管理软件的忽略文件-->后面会有git
   -babel.config.js  # babel的配置文件，不用动，vue支持最新es语法-->把新版本语法--转成es5语法
   -jsconfig.json    # 不用管
   -package.json     # 配置信息，项目依赖,后面会用axios，装完后，在里面就有
   -package-lock.json# package锁定文件，锁定版本
   -README.md        # 项目描述文件
   -vue.config.js    # vue项目配置文件-->相当于py里面的settings.py

        
        
# 补充：
	svg图片：可以无限放大缩小
    ico，png，jpg：图片文件，放大后会模糊看不清
    
    
# pycharm中删除的文件找回
	-项目上点右键-->show history-->revert回来即可

Ⅴ vue开发规范

【一】 vue项目执行流程

# 1 我们运行：npm run serve  -->编译并运行项目
	-xx.vue--->浏览器识别不了-->浏览器只能识别 html，css，js
    -把vue项目-->编译-->编译成功纯粹的  html，css，js-->运行起来-->浏览器中访问
    
    
# 2 重点
	index.html--->div-->id叫app
    App.vue ---> 组件-->在固定的位置写固定的代码即可
    	-<template>   html内容
        -<style>       css内容
        -<script>       js内容
    main.js-->js代码
    	# 找到 index.html-->app这个div-->把App.vue组件中写的东西，放到index.html中
    	new Vue({
              render: h => h(App.vue)
           }).$mount('#app')

【二】vue开发

# 1 访问根路径，显示 HomeView.vue这个组件
	-通过vue-router控制的：router-->index.js
        const routes = [  #  相当于django 的urls.py
              {
                path: '/',
                name: 'home',
                component: HomeView
              },
             {
                path: '/about',
                name: 'about',
                component: AboutView
              },
           ]
        
# 2 目前可以访问-->显示原理是vue-router控制的  相当于最后组件的显示是在这里替换
	http://192.168.1.252:8081/  --->显示 HomeView 组件
    http://192.168.1.252:8081/about--->显示 AboutView 组件
    
    
# 3 App.vue -->根组件
	-如果没有vue-router，访问 根路径会显示 App.vue中写的东西
    -只保留：
    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    
# 4 总结：以后我们想新建页面
	1 在view文件夹下创建  xx.vue--- >页面组件
    2 在router--->index.js  注册路由
    3 浏览器中访问路径，就会显示 刚刚创建的组件
    
    
    
# 5 页面组件编写规范：三部分
	-<template>   html内容
    -<style>       css内容
    -<script>       js内容
    	export default {
		}
        
        
# 6 引入组件使用
	1 导入
    2 注册成局部组件
    3 在template 写即可
    	-自定义属性-->父传子
        -自定义事件-->子传父

【三】代码实现

SPView.vue

<template>
  <div class="home">
    <h1>hjj</h1>
    <img :src="img" alt="">
    <button @click="handleChange">点我换美女</button>
  </div>
</template>

<style>
h1{
  color: aqua;
}
</style>

<script>
export default {
  data() {
    return {
      img: 'https://img0.baidu.com/it/u=3267244253,462024830&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800'
    }
  },
  methods: {
    handleChange() {
      this.img='http://img0.baidu.com/it/u=965399968,3165806993&fm=253&app=138&f=JPEG?w=1067&h=800'
    }
  },

}
</script>

router.index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import SPView from '../views/LQZView.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
    {
        path: '/hjj',
        name: 'hjj',
        component: SPView
    },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

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

export default router

Ⅵ es6语法

【一】 let,const

# 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 声明的变量在进入作用域时就已经被创建，并且被绑定到了该作用域中，但是在变量的声明语句之前，访问这些变量会进入暂时性死区，因为此时变量尚未初始化


# python的LEGB
作用域加载顺序是由外而内

B : built in : 内置变量
G : global : 全局变量
L : locals() 局部变量
E : enclose function locals : 内嵌变量

// 1 变量和常量定义  let  const，之前定义变化要用var,以后定义变量就用let或const

// let age=99
// age=100
// function sqq(){
//   console.log(name)
//   var name='zyb'
// }
// sqq()

【二】箭头函数–this指向问题

# 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 指向新创建的实例对象
##### 总结：
	在对象内，this代指当前对象
    如果是函数，this代指全局对象global，window，undefine都有可能
    箭头函数没有自己的this，使用上一层




# 4 箭头函数：
箭头函数的 this 指向定义时所在的作用域的 this 值，而不是调用时的 this 值。换句话说，箭头函数的 this 是词法作用域，而不是动态作用域

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

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

this指向问题

// 3 this 指向
// function demo01() {
//     console.log(this.name)
//     console.log(this.age)
// }
// demo01()

// function demo01() {
//
//     console.log(this)
// }
// demo01()
// Window{window: Window, self: Window, document: document, name: '', location: Location,…}


// let person = {
//     name: 'lqz',
//     age: 19,
//     showname: () => {
//         console.log(this.name)  // this 是window
//     }
// }
// let person = {
//     name: 'lqz',
//     age: 19,
//     showname:function () {
//         console.log('外部：this 是 person对象')  // this 是 person对象
//         console.log(this)  // this 是 person对象
//         function a(){  // 函数作为普通函数调用
//             console.log('内部：this 是 window对象')
//             console.log(this)
//         }
//         a()
//     }
// }

// let person = {
//     name: 'lqz',
//     age: 19,
//     showname: function () {
//         console.log('外部：this 是 person对象')  // this 是 person对象
//         console.log(this)  // this 是 person对象
//         let a = () => {
//             console.log('内部：this 是 person对象')
//             console.log(this)
//         }
//         a()
//     }
// }
// person.showname()
//
//

//  这只是个普通函数
// function demo001() {
//     console.log('外部：this 是window')
//     console.log(this)
//     let a = () => {
//         console.log('内部：this 是 window对象')
//         console.log(this)
//     }
//     a()
// }
//
// function demo001() {
//     console.log('外部：this 是window')
//     console.log(this)  // this 是 是window
//     function a() {
//         console.log('内部：this 是 window对象')
//         console.log(this) // 是window
//     }
//
//     a()
// }
//
// demo001()
//
//
//
// let demo002 = () => {
//     console.log(this)   // 是window
// }
// demo002()

【三】模版字符串

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

【四】解构赋值

#1  解构赋值允许从数组或对象中提取数据，并将其赋值给变量。
	如果结构的值在对象中没有，就undefind，可以赋初值
    let user = {name: 'zyb', age: 19, hobby: '烫头',girls:['柳如烟', '花楼']}
    let {name,age=999,girls,height=190} = user
    console.log(height) // 190
	console.log(age) // 19
#2  解构赋值可以方便地交换变量的值，同时还支持默认值
    let user = {name: 'zyb', age: 19, hobby: '烫头', girls: ['柳如烟', '花楼']}
    // 老语法
    // let name=user.name
    // let age=user.age
    // 新语法
    let {name,age,girls} = user
    console.log(name)
    console.log(age)
    console.log(girls)
    user.name='xxx' // 修改了name，不会受影响，因为name是值类型
    user.girls.pop()
    console.log(name)

    console.log(girls)// 修改了girls，会受影响，因为girls是引用
    console.log(user)

 // 1 解对象
    let user = {name: 'zyb', age: 19, hobby: '烫头'}
    // let name=user.name
    // let age=user.age
    let {name,age,hobby,a=10} = user
    console.log(name,age,hobby,a)

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

【五】默认参数

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

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

【六】展开运算

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

//  展开运算
let a={age:19,hobby:'咚咚咚'}
let user={name:'zyb',age:20,...a}
console.log(user)  // {name: 'zyb', age: 19, hobby: '咚咚咚'}


let l2=[1,2,3]
let l1=[44,55,66,...l2]
console.log(l1) // [44, 55, 66, 1, 2, 3]

function demo01(a,...b){
    console.log(a) // 1
    console.log(b) // [2,34,4]
}
demo01(1,2,34,4)

let l=[44,5,66,7]
demo01(...l)

标签：es6,vue,console,log,--,插槽,let,name
From： https://www.cnblogs.com/zyb123/p/18357731

动态组件,插槽,vue项目创建,vue项目目录结构,vue开发规范,es6语法

Ⅰ 动态组件

【一】基本使用

【1】不使用动态组件

【2】使用动态组件

【二】keep-alive的使用

Ⅱ 插槽

【一】基本插槽

【二】具名插槽

Ⅲ vue项目创建

【一】关于版本

【二】 vue-cli

【三】搭建node环境

【四】npm源的替换（包管理工具）

【五】安装 vue-cli

【六】vue-cli创建项目

【七】使用编辑器打开

【1】terminal中打开

（1）问题原因：npm环境变量配置问题

1.方法一：以管理员身份运行（推荐）

2.方法二：查看npm环境变量配置

（2）C:\Program Files\nodejs\node_cache”之类的东西，可是后来不想要了，想要恢复默认值，怎么办呢？

【2】pycharm 点绿色箭头运行

【3】打开项目.js项目爆红

【八】如果上述创建的很慢

Ⅳ vue项目目录结构

Ⅴ vue开发规范

【一】 vue项目执行流程

【二】vue开发

【三】代码实现

Ⅵ es6语法

【一】 let,const

【二】箭头函数–this指向问题

【三】模版字符串

【四】解构赋值

【五】默认参数

【六】展开运算

相关文章

赞助商

阅读排行

动态组件,插槽,vue项目创建,vue项目目录结构,vue开发规范,es6语法

Ⅰ 动态组件

【一】基本使用

【1】不使用动态组件

【2】使用动态组件

【二】keep-alive的使用

Ⅱ 插槽

【一】基本插槽

【二】具名插槽

Ⅲ vue项目创建

【一】 关于版本

【二】 vue-cli

【三】搭建node环境

【四】npm源的替换（包管理工具）

【五】安装 vue-cli

【六】vue-cli创建项目

【七】使用编辑器打开

【1】terminal中打开

（1）问题原因：npm环境变量配置问题

1.方法一：以管理员身份运行（推荐）

2.方法二：查看npm环境变量配置

（2）C:\Program Files\nodejs\node_cache”之类的东西，可是后来不想要了，想要恢复默认值，怎么办呢？

【2】pycharm 点绿色箭头运行

【3】打开项目.js项目爆红

【八】如果上述创建的很慢

Ⅳ vue项目目录结构

Ⅴ vue开发规范

【一】 vue项目执行流程

【二】vue开发

【三】代码实现

Ⅵ es6语法

【一】 let,const

【二】箭头函数–this指向问题

【三】模版字符串

【四】解构赋值

【五】默认参数

【六】展开运算

相关文章

赞助商

阅读排行

【一】关于版本