目录
简单单文件模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据绑定</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name"><br>
双向数据绑定：<input type="text" v-model:value="name">
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'JOJO'
}
})
</script>
</body>
</html>
vue脚手架
一、创建完整项目
1、全局安装@vue/cil
npm install -g @vue/cli
注意：最好先配置淘宝镜像，加快下载速度 npm config set registry https://registry.npm.taobao.org
2、切换项目所在目录，创建项目
vue create xxx
3、启动项目
npm run serve
4、暂停项目
Ctrl+C
5、脚手架文件结构
.文件目录
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件
二、render函数
这是vue2代的mian.js写法
// main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el:'#app',
// 简写形式
render: h => h(App),
// 完整形式
// render(createElement){
// return createElement(App)
// }
})
查看vue的版本号：vue -V
vue3的mian.js写法
ref属性
1、用处：给元素或子组件注册引用信息
2、html中是DOM元素，组件上是获取组件实例对象vc
标识：<h1 ref="xxx"></h1>
<School ref="xxx"/>
获取：this.$refs.xxxprops配置
1、目的：让组件接收外部传过来的数据
2、传递数据：<Demo name="xxx"/>
接收数据：
a.只接收：props : [ ' name ' ]
b.限制数据类型：props : { name : String }
c.限制类型、必要性和指定默认值：
props:{
name:{
type:String, //类型
required:true, //必要性
default:'JOJO' //默认值
}
}
props只读，不能修改。
v-model绑定的值不能是props传的值
在子组件 ==> 父组件 通信时，要求父组件先给子组件一个函数
scoped样式
1、目的：让样式只能在局部有效，防止冲突
2、样式：
<style scoped>
、、、
</style>scoped样式一般不使用在App.vue中
浏览器存储
1、所在位置：F12中应用程序 => 存储 => 本地存储（Window.sessionStorage）和会话存储（Window.localStorage）
2、方法：
添加键值对：xxxStorage.setItem('key', 'value')
获取值：xxxStorage.getItem('key')
删除键值对：xxxStorage.removeItem('key')
清空所有数据：xxxStorage.clear()
3、区别
SessionStorage存储的内容会随着浏览器窗口关闭而消失
LocalStorage存储的内容，需要手动清除才会消失
自定义事件
自学去~~
全局事件总线
1、目的：组件间的通信方式，适用于任意组件间的通信
2、使用
安装全局事件总线：
new Vue({
beforeCreate() {
Vue.prototype.$bus = this //$bus即当前应用的vm
},
})
使用事件总线：B ==> A
接收数据：（事件回调在A中）
export default {
methods(){
demo(data){...}
}
...
mounted() {
this.$bus.$on('xxx',this.demo)
}
}
发送数据：
this.$bus.$emit('xxx',data)路由
1、路由分类：
后端路由：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据；
前端路由：当浏览器的路径改变时，对应的组件就会显示。
2、应用：
第一步，安装vue-router
npm i vue-router
但是，这种一般没有用，下载不到
必须在package-lock.json中写入，然后它自动下载该库
"vue-router": "^3.5.3"（vue-router版本自定）
第二步，在src文件夹中创建router文件夹index.js文件
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../components/Home'
import About from '../components/About'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写：/news
component:News
},
{
path:'message', //此处一定不要写：/message
component:Message
}
]
}
]
})
第三步，在src/mian.js中引用vue-router
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router' 1
import router from './router' 2
Vue.config.productionTip = false
Vue.use(VueRouter) 3
new Vue({
el:"#app",
render: h => h(App),
router 4
})
第四步，在vue组件中，应用路由
<!-- 原始html中我们使用a标签实现页面跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a>
<a class="list-group-item" href="./home.html">Home</a> -->
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link active-class="active" to="/about">
About
</router-link>
--------active-class="active"点击时激活--------
<router-link active-class="active" to="/home">
Home
</router-link>
<div>
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
</div>
注意点
跳转嵌套路由时，需要写完整路径：<router-link to="/home/news">News</router-link>
通过切换，默认是销毁原有的路由组件，需要时再挂载
每个路由组件都有自己的$route属性（存储着路由信息）==> 路由
一个应用只有一个router，即$router属性 ==> 路由器
命名路由
给路由取名 ==> name
1、命名
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}
简化，利用name跳转
<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>
<!--简化写法配合传递参数 -->
<router-link
:to="{
name:'hello',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
query传参
1、传递参数
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{
id:666,
title:'你好'
}
}">跳转</router-link>
2、接收参数
$route.query.id
$route.query.title
params参数
1、配置路由时，声明接收params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
//---------使用占位符声明接收params参数
path:'detail/:id/:title',
component:Detail
}
]
}
]
}
2、传递参数
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
注意：
路由使用params参数时，必须使用name，使用path无效
编程式路由导航
1、解决：必须需要<router-link/>，即<a/>的替代，不借助<router-link>跳转
2、组件中跳转代码
<template>
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header">
<h2>Vue Router Demo</h2>
<button @click="back">后退</button>
<button @click="forward">前进</button>
<button @click="test">测试一下go</button>
</div>
</div>
</template>
<script>
export default {
name:'Banner',
methods:{
back(){
this.$router.back()
},
forward(){
this.$router.forward()
},
test(){
this.$router.go(3)
}
},
}
</script>
3、指定组件跳转
this.$router.push({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.replace({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退
Element-Ui使用
1、安装element-ui
npm i element-ui
2、在src/mian.js中引入，并使用
//引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';
//使用ElementUI
Vue.use(ElementUI)
3、在组件中应用
Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
https://element.eleme.cn/#/zh-CN/component/在element-ui官网查看代码
------------
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
