VueJs学习笔记
一、入门
创建vue实例
var app = new Vue({
el:"#app",
data() {
return {
myData:"value"
//需要存储的数据
}
},
methods: {
add:function(){
//添加方法
}
},
})
插值表达式(mytext="<b>Hello</b>")
<!-- 用myText的值插入到下面的位置,不将值解析html -->
<div>{{myText}}</div>
<!-- 用myText的值替换下面的标签,将值解析为html -->
<span v-html="myText"></span>
v-model (双向数据绑定)
<input type="text" v-model="myArgs">
v-for
<div id="app">
<ul>
<!-- :key的值是将标签与值唯一绑定,当数据的位置发生变化时,对应的标签也能发生变化 -->
<li v-for="value,key in values" :key="id">
第{{key}}个标签:{{value}}
</li>
</ul>
</div>
v-on 简写 @事件=“方法名”
var app = new Vue({
el:"#app", //id选择器
data() {
return {
}
},
methods: {
onMouse:function(){
alert("事件触发")
}
},
})
<div id="app">
<button v-on:click="onMouse">单机触发事件</button>
</div>
v-show=“参数”
参数为Boolean类型,当值为真,当前元素显示,反之不显示
v-if=“参数”
与v-show用方法相同,但是v-if是直接删除标记的元素
v-on:事件=“方法” 简写 @事件=“方法”
<!-- 事件对象 $event -->
<!-- 事件触发调用的第一个参数默认为$event -->
<button @click="myEvent($event)">事件</button>
消息事件
@事件.stop="方法" //阻止事件冒泡
$event.stopPropagation();
@事件.self="方法" //是否是自己触发的
$event.preventDefault()
@事件.prevent="方法"
$event.keyCode //获取建码
@keydown.键码="方法"
@keyup.键码="方法"
//vue内部封装了部分键码的别名 enter left right 。。。。。
v-bin:属性=“参数” 简写 :属性=“参数”
<img :src="" alt="">
<!-- classA是否生效取决于a的值 -->
<img src="" class="[classA:a,class,.....]">
<!-- myStyle:{-->
<!-- backgroundColor:"red",-->
<!-- fontSize:"10px"-->
<!-- }-->
<img src="" :style="myStyle">
filter 过滤器
<!-- 多个filter使用 -->
{{要过滤的内容|filterA|filterB|filterC|.......}}
<!-- filter传递参数 -->
{{要过滤的内容|filterA(参数)}}
//局部
filters:{
过滤器名:function (需要过滤的内容,参数){
return 处理后的内容
}
}
//全局
Vue.filter('过滤器名称',过滤函数)
自定义指令
- 指令的参数
v-组件名:参数.修饰符1.修饰符2="表达式"
binding:{
arg: "参数"
expression: "expression",
modifiers:{
修饰符1:true,
修饰符2:true
}
No properties
name: "指令"
rawName: "v-指令:参数"
value: 值
}
//指令名定义时不写 v- ,使用时加
Vue.directive('指令名', {
//el 被绑定的目标对象
//binding 目标对象的详细参数,如指令绑定的表达式计算的值(value),传入的表达式的值(expression),名称(name).....
bind(el) {
//组件绑定到父组件
},
inserted(el, binding) {
//渲染到父组件
},
update(el, binding) {
//更新组件时
},
componentUpdated(el, binding) {
//渲染更新到页面
},
unbind(el, binding) {
//只调用一次,指令与元素解绑时调用
}
})
- 局部指令注册
new Vue({
directives:{
"指令":{
}
}
})
计算属性 computed
//在使用时与data内定义的属性没有区别
//计算属性内的依赖的数据发生改变时,就会触发get方法,否则数据是固定的(缓存的)
computed:{//不支持异步
属性:{
get(){
return 属性的值;
},
set(newValue){
}
},
属性(){//只有get的时候
return "属性的值";
}
}
属性观察 watch
watch:{
需要监听的对象(){
//当被监听对象发生改变时执行
}
//多层监听
'a.b.c':{
//当被监听对象发生改变时执行
}
//深度监听(监听对象本身及其属性值的变化)
需要监听的对象:{
handler(){
//当被监听对象发生改变时执行
},
deep:true
}
}
组件
Vue.component(
'myTemplate',
{
template:`
<div>{{aa}}</div>
`,
data(){
return{
aa:'hello!'
}
}
}
)
let app = new Vue({});
app.$mount("#app");
<div id="app">
<my-templete my-text="xxxx"></my-templete>
</div>
</body>
<script>
Vue.component(
'myTemplete',
{
template:`
<div>{{test}}</div>
`,
props: ['myText'],
data(){
return{
test:this.myText
}
}
}
)
let app = new Vue({});
app.$mount("#app");
</script>
//子组件的定义 <组件名 @自定义事件='函数'></组件名>
//特殊同时监听自定义组件事件名与原生事件名相同,又想同时监听两个事件可以<组件名 @原生事件.native='函数'></组件名>
this.$emit('自定义事件',传入的参数....);
插槽( 拓展组件 )
-
匿名插槽 <slot></slot>
<body> <div id="app"> <组件名> 用来替换插槽的内容 </组件名> </div> </body> <script> Vue.component( '组件名', { template:` <div> <slot></slot> </div> ` } ) let app = new Vue({}); app.$mount("#app"); </script>
-
具名插槽
<body> <div id="app"> <组件名> <template v-slot:插槽名> 用来替换插槽的内容 </template> </组件名> </div> </body> <script> Vue.component( '组件名', { template:` <div> <slot name="插槽名"></slot> </div> ` } ) let app = new Vue({}); app.$mount("#app"); </script> </html>
-
作用域插槽(将组件的参数传入插槽)
<body>
<div id="app">
<模板名>
<!-- 参数由组件传入 -->
<!-- 无论传入的参数有多少个,所有的参数都会聚合成到一个传入参数上 -->
<template v-slot:插槽名="传入的参数">
<div>{{传入的参数.参数1}}</div>
<div>{{传入的参数.参数2}}</div>
</template>
</模板名>
</div>
</body>
<script>
Vue.component(
'模板名',
{
template:`
<div>
<slot name="插槽名" :参数1="值" :参数2="值"></slot>
</div>
`,
data(){
return {
}
}
}
)
let app = new Vue({});
app.$mount("#app");
</script>
props:{
参数名:类型,//基础数据校验(null 和 undefined会通过任何类型验证)
参数名:[类型1,类型2,.....],
参数名:{
type:类型,//传入参数的类型
default:function(){//设置默认值,必须由函数返回得到
return 默认值
},
required:true //or false 是否必须传值
},
//自定义校验函数
参数名:{
validator:function(value){
return false//or true 是否校验成功
}
}
}
-
非props数据会直接覆盖原生同名属性
Vue.component( 'myTemplete', { inheritAttrs:false,//是否启用属性覆盖或继承,关闭后可通过this.$attrs获取这些属性 template:` <div> {{test}} </div> ` } )
组件通信
通过设置组件的ref属性,父组件可以通过( this.$refs.子组件的ref值 )直接获取子组件对象
<div ref="xxx"></div>
this.$refs.xxxx //获取组件对象
二、 单文件模板
components:{
},
filters:{
}
<template>
模板内容
</template>
<script>
export default {
name: 'App', //组件名(供模板内部使用)
// 其属性使用同上
}
</script>
<style scoped>
</style>
import 组件导入后的名称 from '组件文件路径'
export default{
name:'当前组件名',
components:[
组件导入后的名称
]
}
<!-- 根据is后面提供的属性值相同的组件显示,反正不显示(动态切换时会再次创建组件) -->
<div cname="a"></div>
<div cname="b"></div>
<component :is="cname"></component>
<!-- 保留组件状态 -->
<keep-alive>
<component :is="cname"></component>
</keep-alive>
<!-- 上面会触发两个生命周期 -->
<!-- deactivated 冻结
actived 激活 -->
//通过全局方式使用插件,插件的注册必须在使用之前
Vue.use(obj)
obj={
install(_vue){//Vue.use会自动调用obj中的install方法并为传入一个Vue对象
_vue.prototype.插件名 = 插件对象;
}
}
//通过(this.插件名)调用
脚手架
路由
import router from './router'
Vue.use(router);
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')//懒加载
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
<template>
<div id="nav">
<!-- to="跳转到的地址" -->
<!-- 默认模糊匹配,匹配成功的标签会添加一个类 route-link-active -->
<!-- exact精准匹配,匹配后标签会添上面的基础上添加一个类:route-link-exact-active -->
<router-link to="/" tag='生成的链接标签类型' exact>Home</router-link> |
<!-- name为路由映射时的name值 -->
<router-link to="{name:'About'}">About</router-link>
</div>
<router-view/>
</template>
- vue.config.js配置地址转发解决跨域
module.exports={
publicPath: '/kkb',//起始地址
devServer:{
port:8088,//部署到的本地端口
proxy:{
'/api':{//拦截路径
target:'http://localhost:8080',//转发到的地址
pathRewrite:{
'^/api':''//去除地址开头的/api
}
}
}
}
}
//路由映射示例
{
path: '/item/:itemId',
name: 'item',
component: Item
}
其中 :itemId
表示匹配的 url 中动态部分内容,如上面的 1,2,3 等,同时该值将被赋值给路由的变量 this.$route.params.itemId
<!-- 对应路由使用示例 -->
<router-link :to='{name: "item", params:{itemId: item.id}}'>{{item.name}}</router-link>