1. vue项目

1.1 创建项目


# 创建项目
vue create VueDemo

# 或者使用界面方式创建
# 打开图形化界面
vue ui

# 在可视化界面创建项目
略

1.2 文件解读

.
├── README.md
├── babel.config.js
├── node_modules             # 依赖包，库文件
├── package-lock.json
├── package.json
├── public                   # 打包之后用于部署到生产环境的目录
└── src                      # 开发目录
    ├── App.vue              # 完成对组件的引入工作，根组件
    ├── assets               # 静态文件
    │   └── logo.png         
    ├── components           # 项目组件目录
    │   └── HelloWorld.vue   # 示例组件文件，包含template/script/style 3个节点，需要注册APP.vue
    └── main.js              # 项目入口文件

main.js文件解读

// 导入vue.js
import Vue from 'vue'
//导入APP.vue根组建
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    
    
  render: h => h(App), //渲染APP根组件
}).$mount('#app')   //将app挂载到VM控制区域

1.3 MVVM

Model-View-ViewModel的简写。它本质上就是MVC 的改进版

M: 模型—代表真实状态内容的领域模型，或代表内容的数据访问层（以数据为中心）

V: 视图—用户在屏幕上看到的结构、布局和外观（UI）

VM: 视图模型—1.暴露公共属性和命令的视图的抽象;2. 绑定器，视图模型中绑定器在视图和数据绑定器之间进行通信

<body>
    <!-- MVVM模式中的V视图 -->
    <div id="demo">{
   
   { msg }}</div>

    <script type="text/javascript">
        // Vue的实例就是vm控制器
        let vm = new Vue({
      
      
            el: '#demo',   // 控制id为demo的所有内容
            // 数据，MVVM模式中的M
            data: {
      
      
                msg: 'Hello World',               
            }
        })
    </script>
</body>

1.4 项目运行

命令行

# 安装依赖
npm install

# Compiles and hot-reloads for development
npm run serve

# Compiles and minifies for production
npm run build


# Lints and fixes files

npm run lint


# 访问
App running at:
- Local:   http://localhost:8080/ 
- Network: http://xxx:8080/

pycharm运行

run–>Edit Configurtions—>新增npm+Script(server)+ 保存后运行即可

问题

当修改文件名称后运行报错。此时需要删除node_modules文件夹，再使用npm install命令初始化后运行

1.5 uni-app简介

参考文档

https://www.dcloud.io/

https://uniapp.dcloud.io/

vue create -p dcloudio/uni-preset-vue uni-app
选择upi-app创建即可，初次使用可选择upi-app Hello World创建。

2. element ui

可以理解为成熟的开源vue组件库，提供了丰富的组件

2.1 UI框架

mint UI

http://mint-ui.github.io/#!/zh-cn

weUI

https://weui.io/

iView UI

https://iviewui.com/

layui

https://www.layui.com/

element ui

https://element.eleme.cn/#/zh-CN

2.2 element ui

官方文档：https://element.eleme.cn/#/zh-CN/component/installation
安装

# 在项目文件目录下执行命令
cnpm i element-ui -S

使用

// main.js
import Vue from 'vue'

// 倒入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 创建实例之前加入
Vue.use(ElementUI);

// // 创建全局组建
// import HelloWorld from './components/HelloWorld.vue'
// Vue.component('Hello-World', HelloWorld);//全局自定义组件

//导入APP.vue根组建
import App from './App.vue'


Vue.config.productionTip = false

new Vue({
    
    
  render: h => h(App), //渲染APP根组件
}).$mount('#app')   //将app挂载到VM控制区域

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- 父组件传参给子组件 -->
    <HelloWorld msg="Welcome to TestPaltform"/>
    <hello-world/>
    <login/>
    <demo-vue/>
  </div>
</template>

<script>
// 导入子组件
import HelloWorld from './components/HelloWorld.vue' 
import demoVue from './components/demoVue.vue'
import login from './components/login'


// 注册
export default {
    
    
  name: 'App',
  components: {
    
    
    demoVue,
    login,
    HelloWorld
  }
}
</script>

<style>
#app {
    
    
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3. 路由vue-router

3.1 安装使用

官方文档：https://router.vuejs.org/zh/

安装

cnpm install vue-router

3.2 项目代码

/src/main.js

// /src/main.js

// 导入vue.js
import Vue from 'vue'

// 导入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 路由
// 导入vue router
import router from './router/index'

// 创建实例之前加入
Vue.use(ElementUI);

//导入APP.vue根组建
import App from './App.vue'


Vue.config.productionTip = false;

new Vue({
    
    
  router,
  render: h => h(App), //渲染APP根组件
}).$mount('#app')   //将app挂载到VM控制区域

/src/router/index.js

定义路由规则

// /src/router/index.js


// 0. 安装并倒入vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. Use plugin.
// This installs <router-view> and <router-link>,
// and injects $router and $route to all router-enabled child components
Vue.use(VueRouter)

// 2. Define route components
// const Home = { template: '<div>home</div>' }
// const Foo = { template: '<div>foo</div>' }

import demo from '../components/demo'
import HelloWorld from '../components/HelloWorld'
import login from '../components/login'


// 3. Create the router
const router = new VueRouter({
    
    
  mode: 'history',
  base: __dirname,
  routes: [
    // 数组中一个对象即为一个路由
    {
    
     path: '/login', component: login },
    {
    
     path: '/hello', component: HelloWorld },
    {
    
     path: '/demo', component: demo },
  ]
})

// 4. 导出路由
export default router;

App.vue

// App.vue


<template>
  <div id="app">
    <ul>
      <!-- to属性默认为path路径，也可以使用重命名name-->
      <li><router-link to="/">主页</router-link></li>
      <li><router-link to="/login">登陆</router-link></li>
      <li><router-link :to="{ name: 'ly' }">布局</router-link></li>
      <li><router-link to="/helloworld">欢迎</router-link></li>
    </ul>
    <!-- 使用路由 -->
    <router-view/>
  </div>
</template>

<script>
</script>

<style>
#app {
    
    
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding: 0px 0px;
  width: 100%;
  height: 100%;
}
</style>

3.3 获取参数

字符串参数：url?a=b&c=d

export default {
    
    
  ......
  created(){
    
    
    this.a = this.$route.query.a
    console.log(this.a)
  }
}

路径传参数：url/id

//  src/router/index.js

// 3. Create the router
const router = new VueRouter({
    
    
  mode: 'history',
  base: __dirname,
  routes: [
    // 路径传参方式需要额外定义
    {
    
     path: '/helloworld/:id', component: HelloWorld },
  ]
})

export default {
    
    
  ......
  created(){
    
    
    this.a = this.$route.params.id
    console.log(this.a)
  }
}

3.4 嵌套路由

// src/router/index.js


const router = new VueRouter({
    
    
  mode: 'history',
  base: __dirname,
  routes: [               // 父路由
    {
    
     
      path: '/index',     
      component: index,
      children: [         // 子路由
        {
    
     path: '', component: demo1 },
        {
    
     path: 'demo2', component: demo2 },
        {
    
     path: '/demo3', component: demo3 },

      ]
    }
  ]
})

# App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
...

# index.vue
<template>
  <div>
    <h1>父页面</h1>
    <router-view></router-view>
  </div>
</template>
...

# demo1.vue
<template>
  <h1>子页面1</h1>
</template>
...

# dem2.vue
<template>
  <h1>子页面2</h1>
</template>
...

# demo3.vue
<template>
  <h1>子页面3</h1>
</template>
...

访问验证

访问：http://localhost:8080/index

父页面
子页面1

访问：http://localhost:8080/index/demo2

父页面
子页面2

访问：http://localhost:8080/demo3

父页面
子页面3

扫描二维码关注公众号，回复： 13255573 查看本文章

4. 异步请求axios

4.1 安装使用

安装

npm install axios -S

使用一

<template>
  <div class="hello">
  </div>
</template>

<script>

import axios from 'axios';

export default {
      
      
  // 此时不能使用this获取参数，因为this指当前函数对象并不是Vue对象，需要使用=>函数
  mounted(){
      
      
    axios.get('https://dog.ceo/api/breeds/image/random')
        .then(function (response) {
      
      
          console.log(response) 
        })
        .catch(function (err) {
      
      
          console.log(err)
        })
  }};
</script>
<style>
</style>

使用二：箭头函数

<template>
  <div class="hello">
    <el-image
      :src="url"
      fit="cover">
    </el-image>
  </div>
</template>

<script>

import axios from 'axios';

export default {
      
      
  data(){
      
      
    return {
      
      
      url: '',
    }
  },
  mounted(){
      
      
    axios.get('https://dog.ceo/api/breeds/image/random')
        .then(response=>{
      
      
          console.log(response) 
          this.url = response.data.message
        })
        .catch(function (err) {
      
      
          console.log(err)
        });
  }
}
</script>

<style>
</style>

4.2 箭头函数及封装

参考文档

https://blog.csdn.net/weixin_42218847/article/details/81540996

https://blog.csdn.net/m0_37686205/article/details/88776259

api封装

//  src/api/api.js
import axios from 'axios';

var host = 'https://dog.ceo';


export const dogs = () => {
    
    	
    return axios.get(`${
      
      host}/api/breeds/image/random`)	
};

<template>
  <div class="hello">
    <el-image
      :src="url"
      fit="cover">
    </el-image>
  </div>
</template>

<script>

// import axios from 'axios';
import {
      
      dogs} from '../api/api'   // 导入api中的函数

export default {
      
      
  data(){
      
      
    return {
      
      
      url: '',
    }
  },
  mounted(){
      
      
    dogs()          // 使用导入的api函数
        .then(response=>{
      
      
          console.log(response) 
          this.url = response.data.message
        })
        .catch(function (err) {
      
      
          console.log(err)
        });
  }
}
</script>

<style>
</style>

5. 插槽

5.1 匿名插槽

不使用插槽

父页面使用子组件，默认情况下，在子组件开始和结束标签之间添加的内容会忽略展示，仅展示原来子组件内容

# main.js

import demo from './components/demo'
Vue.component('demo', demo);

# pdemo.vue

<template>
  <div>
    <h1>父页面</h1>
    <demo>
      <p>修改子组件内容</p>
    </demo>
  </div>
</template>

<script>
</script>
<style>
</style>

# demo.vue

<template>
  <div>
    <h2>子页面</h2>
  </div>
</template>

<script>
</script>
<style>
</style>

父页面
子页面

使用插槽

要想展示子组件标签内新添加的内容，就需要在子组件添加插槽，此时新添加的内容展示顺序按照插槽位置

# demo.vue

<template>
  <div>
    <h2>子页面</h2>
    <slot></slot>
  </div>
</template>

<script>
</script>
<style>
</style>

父页面
子页面
修改子组件内容

插槽默认内容

插槽可设置默认内容。父组件调用子组件时标签内不添加内容则展示默认内容，添加内容则展示新添加的内容

# demo.vue

<template>
  <div>
    <h2>子页面</h2>
    <slot><p>插槽使用时默认添加的内容</p></slot>
  </div>
</template>

5.2 命名插槽

当子组件内有多处需要替换时，可以使用命名插槽指定位置进行替换

# demo.vue

<template>
  <div>
    <h2>子页面</h2>
    <!-- 匿名插槽 -->
    <slot><p>插槽使用时默认添加的内容</p></slot>

    <!-- 命名插槽1 -->
    <slot name='slot01'></slot>
    <!-- 命名插槽2 -->
    <slot name='slot02'></slot>
  </div>

</template>

# pdemo.vue

<template>
  <div>
    <h1>父页面</h1>
    <demo>
      <p>修改子组件内容</p>

      <p slot='slot01'>vue2.6之前版本用法,兼容</p>

      <template v-slot:slot01>vue2.6之后版本用法<br/></template>
      
      <template #slot02>vue2.6之后版本用法，简写</template>

    </demo>
  </div>
</template>

父页面
子页面
修改子组件内容
vue2.6之后版本用法
vue2.6之后版本用法，简写

5.3 插槽作用域

父组件需要获取子组件数据时，要用到插槽作用域

# demo.vue
<template>
  <div>
    <slot name='slot01' :user='username'></slot>
    <slot name='slot02' :age='age'></slot>
    <slot name='slot03' :add='addr'></slot>
  </div>

</template>

<script>
export default{
      
      
  data(){
      
      
    return{
      
      
      age: '18',
      username: 'zhangsan',
      addr: 'wuahn',
    }
  } 
}
</script>

<style>
</style>

# pdemo.vue

<template>
  <div>
    <demo>
      <!-- vue2.6之前版本用法 -->
      <p slot="slot01" slot-scope="scop">{
   
   { scop.user }}</p>
     
      <!-- vue2.6之前版本用法 -->      
      <template #slot02='sope'>
        <p>{
   
   { sope.age }}</p>
      </template>

      <template #slot03='addr'>
        <p>{
   
   { addr }}</p>
      </template>

    </demo>
  </div>
</template>

zhangsan
18
{ “addr”: “wuahn” }

6. 生命周期

在这里插入图片描述

WEB--vue学习02

文章目录

1. vue项目

1.1 创建项目

1.2 文件解读

1.3 MVVM

1.4 项目运行

1.5 uni-app简介

2. element ui

2.1 UI框架

2.2 element ui

3. 路由vue-router

3.1 安装使用

3.2 项目代码

3.3 获取参数

3.4 嵌套路由

4. 异步请求axios

4.1 安装使用

4.2 箭头函数及封装

5. 插槽

5.1 匿名插槽

5.2 命名插槽

5.3 插槽作用域

6. 生命周期

猜你喜欢