Vue浅学一下_vue 2.6.9 element-ui-CSDN博客

本文链接：https://blog.csdn.net/qq_53732811/article/details/124439627

文章目录

Vue
1、第一个Vue程序
2、基础语法
3、vue组件
4、网络通信Axios
6、插槽
7、自定义事件内容分发
8、第一个vue-cli项目
9、webpack打包
10、vue-router路由
11、vue+elementUI
12、路由嵌套
13、参数传递及重定向
14、路由模式和404

Vue

在这里插入图片描述

1、第一个Vue程序

idea安装vue插件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
    <!--view层 模板-->
    <div id="app">
        {{message}}
    </div>
<script>
    'use strict'
    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            message: 'hello vue!'
        }
    })
</script>
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <span v-bind:title="message">鼠标悬浮几秒钟查看此处动态绑定的提示信息！</span>
</div>
    <script>
    'use strict'
    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            message: 'hello vue!'
        }
    })
</script>
    

</body>
</html>

2、基础语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else="type==='C'">C</h1>
</div>
    <script>
    'use strict'
    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            message: 'hello vue!',
            type: 'A'
        }
    })
</script>
    </body>
</html>

for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <p style='color:blue' v-for="item in items">{{item.message}}</p>
</div>
    <script>
    'use strict'
    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            message: 'hello vue!',
            type: 'A',
            items: [{message: '小范'},{message: '小梁'},{message: '小红'}]
        }
    })
</script>
    </body>
</html>

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <button v-on:click="sayHi">点我</button>
</div>
    <script>
    'use strict'
    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            message: 'hello vue!',
            type: 'A',
            items: [{message: '小范'},{message: '小梁'},{message: '小红'}]
        },
        methods: {
            sayHi: function () {
                alert(this.message)
            }
        }
    })
</script>
    </body>
</html>

双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <input type="text" v-model="message"/> {{message}}
</div>
    <script>
    'use strict'
    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    })
</script>
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <select v-model="selected">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
 
    {{selected}}
</div>
 
<script>
    'use strict'
    /*Model 数据*/
    let vue = new Vue({
        el: "#app",
        data: {
            selected: ""
        }
    })
</script>
</body>
</html>

3、vue组件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <xiaofan v-for="item in items" v-bind:xf="item"></xiaofan>
</div>
<script>
    'use strict'
	Vue.component("xiaofan", {
    // 给组件传递数据需要用props
   	 	props: ['xf'],
    	template: '<h1>{{xf}}</h1>'
	})
 
	/*Model 数据*/
	let vue = new Vue({
   	 el: "#app",
    	data: {
        	items: ['java', 'linux', 'python']
    	}
	})
</script>
</body>
</html>

在这里插入图片描述

4、网络通信Axios

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <!--导入axios-->
    <script src="https://unpkg.com/axios@0.20.0/dist/axios.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="vue">
    <div>{{info.name}}</div>
    <div>{{info.age}}</div>
    <div>{{info.hobbies}}</div>
</div>
    <script type="text/javascript">
    'use strict'
        let vue = new Vue({
    el: '#vue',
    // data: {info: {name: "sss"}},
    data() {
      return {
          //请求的返回参数合适，必须和json字符串一样，但可以省略不需要的
          info: {
             name: null,
             age: 0,
             hobbies: []
          }
      }
    },
    mounted() { // 钩子函数 链式编程
        axios.get('../data.json').then(response=>(this.info=response.data))
        // axios.get("../data.json").then(response=>(console.log(response.data)))
    }
	})
    </script>
</body>
</html>

参考链接： https://blog.csdn.net/qq_40359381/article/details/106853936
5、计算属性

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <!--导入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="vue">
    <p>currentTime1 {{currentTime1()}}</p>
    <p>currentTime2 {{currentTime2}}</p>
</div>
 
<script type="text/javascript">
    'use strict'
 
    let vue = new Vue({
        el: '#vue',
        data: {
            message: "xiaofan"
        },
        methods: {
            currentTime1: function () {
                return Date.now();
            }
        },
        computed: { //计算属性methods computed的方法名不要重名字，对于不经常变化的内容可以通过这种方式进行缓存，更优
            currentTime2: function () {
                console.log(this.message);
                return Date.now();
            }
        }
    })
</script>
</body>
</html>

6、插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <!--导入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoitems" v-bind:item="item"></todo-items>
    </todo>
</div>
 
<script type="text/javascript">
    'use strict'
 
    Vue.component("todo-title", {
        props: ["title"],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ["item"],
        template: '<li>{{item}}</li>'
    });
    // slot插槽
    Vue.component("todo", {
        template: '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                    <slot name="todo-items"></slot>\
                    </ul>\
            </div>'
    });
 
    let vue = new Vue({
        el: '#vue',
        data: {
            title: "秦老师",
            todoitems: ["狂神说Java", "狂神说Linux", "狂神说Vue", "狂神说Linux", "狂神说Vue"]
        }
    })
</script>
</body>
</html>

7、自定义事件内容分发

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <!--导入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item, index) in todoitems" v-bind:item="item" v-bind:index="index" v-on:remove="removeItem(index)" v-bind:key="index"></todo-items>
    </todo>
</div>
 
<script type="text/javascript">
    'use strict'
 
    Vue.component("todo-title", {
        props: ["title"],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ["item","index"],
        template: '<li>{{item}}<button v-on:click="remove">删除</button></li>',
        // 只能绑定当前组件的方法
        methods: {
            remove: function (index) {
                // 自定义事件分发 $emit(自定义事件名， 下标)
                this.$emit('remove', index)
            }
        }
    });
    // slot插槽
    Vue.component("todo", {
        template: '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                    <slot name="todo-items"></slot>\
                    </ul>\
            </div>'
    });
 
    let vue = new Vue({
        el: '#vue',
        data: {
            title: "秦老师",
            todoitems: ["狂神说Java", "狂神说Linux", "狂神说Vue", "狂神说Linux", "狂神说Vue"]
        },
        methods: {
            removeItem: function (index) {
                this.todoitems.splice(index, 1)
            }
        }
    })
</script>
</body>
</html>

8、第一个vue-cli项目

在这里插入图片描述

安装Nodejs
node -v
npm -v
安装Node.js淘宝镜像加速器（cnpm）npm install cnpm -g
安装vue-cli cnpm install vue-cli -g
测试是否安装成功
查看可以寄语那些模板创建vue应用vue list

在这里插入图片描述

创建项目vue init webpack myvue

在这里插入图片描述

初始化并运行
```
cd myvue
npm install
npm run dev
```

9、webpack打包

安装并测试

npm install webpack -g
npm install webpack-cli -g

webpack -v
webpack-cli -v

在这里插入图片描述

10、vue-router路由

在当前项目安装 npm install vue-router --save-dev
源码地址：vue-04-router

11、vue+elementUI

创建工程 hello-vue vue init webpack hello-vue

安装依赖
进入工程目录cd hello-vue
- 安装vue-routernpm install vue-router --save-dev
- 安装 element-ui npm i element-ui -S
- 安装依赖npm install
- 安装SASS加载器cnpm install sass-loader node-sass --save-dev
- 启动测试npm run dev

在这里插入图片描述

注意sass-loader的版本
整体效果

在这里插入图片描述

12、路由嵌套

import Vue from 'vue'
import VueRouter from "vue-router"

import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/main',
      component: Main,
      children: [ // 嵌套路由
        {path: '/user/profile', component: UserProfile},
        {path: '/user/list', component: UserList},
        {path: '/user/telephone', component: Telephone}
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

在这里插入图片描述

13、参数传递及重定向

方式1

// 传递 
<!--name-传组件名 params传递参数，需要对象： v-bind-->
 <router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>
 
 
// 接收
import Vue from 'vue'
import VueRouter from "vue-router"
 
import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'
 
Vue.use(VueRouter)
 
export default new VueRouter({
  routes: [
    {
      path: '/main',
      component: Main,
      children: [ // 嵌套路由
        {path: '/user/profile:id', name: 'UserProfile', component: UserProfile},
        {path: '/user/list', component: UserList},
        {path: '/user/telephone', component: Telephone}
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})
 
// 展示
<template>
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}
  </div>
</template>
 
<script>
export default {
  name: "UserProfile"
}
</script>
 
<style scoped>
 
</style>

方式2

// 设置props
import Vue from 'vue'
import VueRouter from "vue-router"
 
import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'
 
Vue.use(VueRouter)
 
export default new VueRouter({
  routes: [
    {
      path: '/main',
      component: Main,
      children: [ // 嵌套路由
        {path: '/user/profile:id', name: 'UserProfile', component: UserProfile, props: true},
        {path: '/user/list', component: UserList},
        {path: '/user/telephone', component: Telephone}
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})
 
// 绑定id
<template>
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}<br/>
    {{id}}
  </div>
</template>
 
<script>
export default {
  props: ['id'],
  name: "UserProfile"
}
</script>
 
<style scoped>
 
</style>

重定向

import Vue from 'vue'
import VueRouter from "vue-router"

import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/main',
      component: Main,
      children: [ // 嵌套路由
        {path: '/user/profile:id', name: 'UserProfile', component: UserProfile, props: true},
        {path: '/user/list', component: UserList},
        {path: '/user/telephone', component: Telephone}
      ]
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/goHome',
      redirect: '/main'
    }
  ]
})

14、路由模式和404

export default new VueRouter({
  mode: 'history', // 不带#
})

路由钩子

<template>
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}<br/>
    {{id}}
  </div>
</template>
<script>
export default {
  props: ['id'],
  name: "UserProfile",
  beforeRouteEnter: (to, from, next)=>{
    console.log("进入钩子之前");
    next(vm => {
      vm.getData();  // 进入路由之前，执行我们自定义的getData方法
    });
  },
  beforeRouteLeave: (to, from, next)=>{
    console.log("离开钩子之前")
    next();
  },
  methods: {
    getData: function () {
      this.axios({
        method: 'get',
        url: 'http://localhost:8080/static/data.json'
      }).then(function (response) {
        console.log(response)
      });
    }
  }
}
</script>
<style scoped>
</style>