/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
el: '#app',
绑定根视图
components: { App },
加载组件
template: '<App/>'
使用组件
模板语法
插值
1. 文本
数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值:
<span>Message: {{ msg }}</span>
2. 纯 HTML
v-html
:为了输出真正的 HTML ,你需要使用 v-html 指令
3. 属性
<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="someDynamicCondition">Button</button>
4. 使用 JavaScript 表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
指令
1. 参数
2. 动态参数
<a v-bind:[attributeName]="url"> ... </a>
3. 修饰符
缩写
v-bind
缩写 :
v-on
缩写 ‘@’
条件渲染
v-if
v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-else
v-else-if
用 key 管理可复用的元素
v-show
v-if vs v-show
v-if 与 v-for 一起使用
列表渲染
用 v-for 把一个数组对应为一组元素
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>>
在 v-for 里使用对象
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
维护状态
数组更新检测
变更方法
替换数组
注意事项
显示过滤/排序后的结果
在 v-for 里使用值范围
在 上使用 v-for
v-for 与 v-if 一同使用
在组件上使用 v-for
事件处理
监听事件
事件处理方法
内联处理器中的方法
事件修饰符
按键修饰符
按键码
系统修饰键
.exact 修饰符
鼠标按钮修饰符
为什么在 HTML 中监听事件?
监听事件
可以用 v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
event
事件对象
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event
把它传入方法:
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
按键修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
Vue双向数据绑定
v-model
- 基础语法
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
-
值绑定
-
修饰符
.lazy
.number
.trim
Class 与 Style 绑定
绑定 HTML Class
对象语法
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
用在组件上
绑定内联样式
对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
自动添加前缀
多重值
计算属性
计算属性缓存 vs 方法
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
Vue组件基础
父子组件的传值
father
<hr />父子组件之间的传值
<SON v-on:sendmsg="getSonMsg" msg1="给父亲" v-bind:msg2="msg"></SON>
<SON v-on:sendmsg="sonMsg=$event" msg1="给父亲" v-bind:msg2="msg"></SON>
sonMsg:{{sonMsg}}
getSonMsg: function (data) {
console.log(data);
},
son
<button v-on:click="$emit('sendmsg', toFather)">button</button>
插槽
子组件
<slot v-bind:msg="msg" name="hello"></slot>
<slot v-bind:msg="msg" name="world"></slot>
父组件
<useSlot>
<p slot="hello">具名插槽</p>
<p slot="world" slot-scope="slotProps">具名插槽 | slotProps.msg:{{slotProps.msg}}</p>
</useSlot>
动态组件
当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面:
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
自定义指令
main.js
中
//自定义全局指令
Vue.directive('focus', {
inserted(el) {
el.focus();
}
})
使用
<input v-focus type="text" />
局部指令
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
过滤器
全局
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
局部
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
axios的使用
npm install --save axios
在main.js
中引入
import Axios from 'axios'
Vue.prototype.$axios = Axios;
get
请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可选地,上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
注意点:get
请求传递的参数是名是params
,post
是data
post
请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(res=>{
console.log(res);
})
.catch(function (error) {
console.log(error);
});
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
axios的post请求接受的参数是form-data
格式:?name=zpp&age18
解决的·方案是
import qs from 'qs'
axios.post('/user', qs.stringify({
firstName: 'Fred',
lastName: 'Flintstone'
}))
.then(res=>{
console.log(res);
})
.catch(function (error) {
console.log(error);
});
- 请求配置
transformRequest
// `transformRequest` 允许在向服务器发送前,修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
transformRequest: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
可以通过return qs.stringify(data);
处理一下data
注意:只能用在 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法
- 全局的 axios 默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
- 拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
if(config.method === "post"){
config.data = qs.stringify(config.data);
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
if(response.status !== 200){
return;
}
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
- Vue-axios跨域处理
config 中的 index.js文件
proxyTable: {
'/gitapi': {
target: 'https://api.github.com', // 你请求的第三方接口
changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { // 路径重写,
'^/gitapi': '' // 替换target中的请求地址,也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
}
}
},
```、
使用
```javascript
testGitReq: function () {
this.$axios
.get("/gitapi/users")
.then((res) => {
this.gitUser = res.data;
})
.catch(function (error) {
console.log(error);
});
},
操作原声DOM
<p ref="myp"></p>
var myp = this.$refs.myp
myp.addEventListener("click",function(){
"hai"
})
vue-router
路由的使用
1.引入
2.创建Router
3. 注入router
4.显示
//引入
import VueRouter from 'vue-router'
import HelloWorldfrom './components/HelloWorld'
Vue.use(VueRouter)
//2.创建Router
consr router = new VueRouter({
routes:[
{
path:"/hello",
component:HelloWorld
}
]
})
//注入
new Vue({
el: '#app',
router,
components: {
App
},
template: '<App/>'
})
<router-view />
项目没有默认装路由的情况
在router 中的 index.js
router-link
<router-link>
组件支持用户在具有路由功能的应用中 (点击) 导航。 通过to
属性指定目标地址,默认渲染成带有正确链接的<a>
标签,可以通过配置tag
属性生成别的标签.。
<router-link to="/foo" tag="li">foo</router-link>
重定向
重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
}
路由嵌套
要在嵌套的出口中渲染组件,需要在 VueRouter
的参数中使用 children
配置:
显示位置:父级在哪里,显示的位置就放在哪里
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功,
// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
// ...其他子路由
]
参数传递
- 配置路由信息
path:"/hi/:id/:count"
name:"hi"
- 配置路由跳转信息
<router-link to="{name:'hi',oarams:{id:'100',count:20}}" tag="li">foo</router-link>
- 读取信息
{{$router.params.id}}
路由高亮
设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项linkActiveClass
来全局配置。
linkActiveClass: "active",
vue中的插件使用
element-ui
https://www.swiper.com.cn/api/start/new.html
vuex
https://blog.csdn.net/weixin_47180815/article/details/108202812