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>

---

消息事件

1. 阻止事件冒泡

	@事件.stop="方法" //阻止事件冒泡
	$event.stopPropagation();
	@事件.self="方法"  //是否是自己触发的

2. 阻止默认事件

   $event.preventDefault()
   @事件.prevent="方法"

3. 键盘事件

	$event.keyCode //获取建码
	@keydown.键码="方法"
	@keyup.键码="方法"
	//vue内部封装了部分键码的别名 enter left right 。。。。。

---

v-bin:属性=“参数” 简写 :属性=“参数”

1. 绑定普通属性

<img :src="" alt="">

2. 绑定类

<!-- classA是否生效取决于a的值 -->
<img src="" class="[classA:a,class,.....]">

3. 绑定css

<!--    myStyle:{-->
<!--    backgroundColor:"red",-->
<!--    fontSize:"10px"-->
<!--    }-->
<img src="" :style="myStyle">

---

filter 过滤器

1. 过滤器的使用

    <!-- 多个filter使用 -->
    {{要过滤的内容|filterA|filterB|filterC|.......}}
    <!-- filter传递参数  -->
    {{要过滤的内容|filterA(参数)}}

2. 自定义filter

		//局部
        filters:{
            过滤器名:function (需要过滤的内容,参数){
                return 处理后的内容
            }
        }
        //全局
        Vue.filter('过滤器名称',过滤函数)

---

自定义指令

1. 指令的参数

v-组件名:参数.修饰符1.修饰符2="表达式"
binding:{
arg: "参数"
expression: "expression",
modifiers:{
修饰符1:true,
修饰符2:true
}
No properties
name: "指令"
rawName: "v-指令:参数"
value: 值
}

2. 全局指令注册 Vue.directive

	//指令名定义时不写 v- ,使用时加
    Vue.directive('指令名', {
		//el 被绑定的目标对象
		//binding 目标对象的详细参数，如指令绑定的表达式计算的值(value),传入的表达式的值(expression)，名称(name).....
        bind(el) {
		//组件绑定到父组件
        },
        inserted(el, binding) {
		//渲染到父组件
        },
        update(el, binding) {
		//更新组件时
        },
        componentUpdated(el, binding) {
		//渲染更新到页面
        },
        unbind(el, binding) {
		//只调用一次，指令与元素解绑时调用
        }
    })

3. 局部指令注册

new Vue({
	directives:{
		"指令":{
		}
	}
})

---

计算属性 computed

//在使用时与data内定义的属性没有区别
//计算属性内的依赖的数据发生改变时，就会触发get方法,否则数据是固定的(缓存的)

computed:{//不支持异步
	属性:{
		get(){
		 return 属性的值;
		},
		set(newValue){
		}
	},
	属性(){//只有get的时候
		return "属性的值";
	}
}

---

属性观察 watch

watch:{
	需要监听的对象(){
		//当被监听对象发生改变时执行
	}
	//多层监听
	'a.b.c':{
		//当被监听对象发生改变时执行
	}
	//深度监听(监听对象本身及其属性值的变化)
	需要监听的对象:{
		handler(){
			//当被监听对象发生改变时执行
		},
		deep:true
	}
}

---

组件

• 可复用组件的data必须是一个函数并且这个函数返回一个对象，这样是为了提高组件的复用性

    Vue.component(
        'myTemplate',
        {
            template:`
            <div>{{aa}}</div>
            `,
            data(){
                return{
                    aa:'hello!'
                }
            }
        }
    )
    let app = new Vue({});
    app.$mount("#app");

• props 接受外部传入的参数

<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('自定义事件',传入的参数....);

• 子元素数据双向绑定

  • :属性.sync=’’

  • v-model

   model:{
      //需要实现数据双绑的属性
      prop:'',
      //触发属性改变的事件
      event:''
  },
  

---

插槽( 拓展组件 )

• 匿名插槽 <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验证

props:{
	参数名:类型,//基础数据校验(null 和 undefined会通过任何类型验证)
	参数名:[类型1,类型2,.....],
	参数名:{
		type:类型,//传入参数的类型
		default:function(){//设置默认值,必须由函数返回得到
			return 默认值 
		},
		required:true //or false 是否必须传值
	},
	//自定义校验函数
	参数名:{
		validator:function(value){
			return false//or true 是否校验成功
		}
	}
}

• 非props数据会直接覆盖原生同名属性

  • 特殊属性class,style会直接继承

      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>

• 组件作用域

  • style 添加 scoped 属性后可将样式设为局部样式

• 组件生命周期

• 导入子组件

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.插件名）调用

脚手架

• vue

  • ui 可视化界面

  • create 项目名(创建项目)

  • run

    • serve (启动项目)

    • build (编译项目)

路由

• 拓展Vue路由

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>