VUE基础

最新推荐文章于 2023-05-17 19:46:30 发布

King77777777777

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量142

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wq5350/article/details/107000142

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

官网

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KKK</title>
</head>
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
	<div id="app">
	  {{ message }} 
	  {{reversedMessage}}</br>
	  <input v-model="question"/></br>
	  {{ answer }}
	</div>
</body>
<script>
	/* 创建Vue实例 */
	var app = new Vue({
	  /* vue实例绑定的挂载元素 */
	  el: '#app',
	  /* vue中响应式属性 */
	  data: {
	    message: 'Hello Vue!',
	    question:'',
	    answer:''
	  },
	  // 定义vue实例的方法
	  methods: {

	  }
	  // 计算属性基于响应式依赖进行缓存的，只有依赖发生改变才重新计算
	  computed: {
	   reversedMessage: function () {
	     return this.message.split('').reverse().join('')
	   }
	 },
	 // 侦听器，在数据变化时执行异步或开销较大的操作使用
	 watch:{
		question:function(question){
			this.answer=question+'yes';
		}
	 },
	 // 局部组件
	 components: {
    	'component-a': ComponentA
 	 },
 	 // 修改获取值的形式 {{}}->${}
 	 delimiters:['${','}']
	})
</script>

特点

只有当实例被创建时就已经存在于data中的数据才是响应式的(可以使用Object.freeze()来阻止属性响应)
$data、$el等提供对Vue实例中属性的引用。更多引用
Vue的所有生命周期函数都是自动绑定到this的上下文上(不要使用=>）

生命周期

new Vue实例初始化
beforeCreate(无数据，数据观测和事件配置前调用)
created(data有数据,但dom还未挂载)
　
判断有无el属性(无则不走mount),内部有template优先走内部,否则取外部html，渲染优先级render函数 > template属性 > 外部html
　
beforeMount({message}，dom中数据还未解析)
mounted(dom中数据解析完成)
beforeUpdate(数据只有和模版中的数据绑定了才会发生更新)
updated
destroyed(VUE实例指示的所有东西都会解绑定)

语法

{{ msg }}:双大括号与vue实例的属性绑定
key属性：表示数据变化时当前标签不被复用，重新渲染


v-once:执行一次性地插值  <span v-once>这个将不会改变: {{ msg }}</span>
v-html:输出html代码     <span v-html="rawHtml"></span>
v-model:实现双向数据绑定
<input v-model="searchText"> 
等价于
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

条件判断,通过key属性不复用
v-if:标签显示 		   <p v-if="seen">现在你看到我了</p>
v-else-if:条件
v-else:if标签不成立显示
v-show：元素始终会被渲染并保留在 DOM 中

循环遍历，默认使用“就地更新”的策略，优先级高于v-if
v-for:遍历数组或对象属性          <li v-for="(item, index) in items">
							    <div v-for="(value, name) in object">


简写(:属性)
v-bind:(当前标签属性)-绑定标签属性 	   <div v-bind:id="dynamicId"></div>
简写(@事件)
v-on:(事件) -绑定dom事件				   <a v-on:click="doSomething">...</a>

[动态参数]:空格和引号等字符放在其中会导致无效	<a v-bind:[attributeName]="url"> ... </a>

组件

// 全局组件注册
Vue.component('组件名', {
  // 组件属性
  props:['属性名']
  // 组件中绑定的数据
  data(){
	return{
		count:0
	}
  },
  // 组件模板
  template:'<p>{{count}}</p>'
});

通过$emit('事件名',参数)方法并传入事件名称来触发一个事件，父类组件响应组件内部事件

通过.native使组件调用构造器中方法

插槽：<slot name='具名插槽'>默认值</slot> 实现在组件中占位

全局命令

Vue.use( plugin )

安装 Vue.js 插件,需在new Vue()之前调用

Vue.prototype

在原型上定义组件，使其在每个 Vue 的实例中可用。

Vue.directive

注册或获取全局指令。

// 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

Vue.extend

使用基础 Vue 构造器，返回一个构造函数用于生成新组件

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

Vue.set( target, propertyName/index, value )

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。

Template

模板占位符，被display:none修饰的不可见的包裹元素，内部必须只有一个根元素

导入导出

对于导出的js中只能有一个export default，可以有多个export
使用require方法实现动态导入

部分导入导出

// test.js
export function test(){};

// 对于export的资源使用{}导入特定方法，对于自己写的js使用相对路径，导入依赖包直接引入包名即可
import { test } from './test.js';
// 导入全部
import * as XX from './test.js';
调用：XX.test()

全部导入导出

// 全部导出
export default{
	a,
	b
}
// 全部导入
import XX from './test.js';
调用：XX.a

路由及路由器

// 路由器设置
const router = new VueRouter({
	mode:'history',
	base:基路径,
	routes:[{
		path:'/',
		name:'xx',
		component:Home
	}]
});
// 路径拦截 :name
通过this.$route.params.name可以调用到路径上的值
// get传参 http://www.baidu.com:80?name=king
通过this.$route.query.name获得请求中的参数
// 页面代码实现跳转
1. this.$route.push({path:'path',query:{name:'king'}});   -->  /path?name=king
2. this.$route.push({path:'path',params:{name:'king'}});   -->  /path/king

<router-link to="/xxx">go to xxx</router-link>  --> 跳转到 /xxx
<router-view></router-view>  显示跳转后的组件


// 常用钩子函数
router.beforeEach((to, from, next)=>{
	to:进入的路由对象
	from:离开的路由对象
	next:管道中的下一个方法，方法中必须调用next()才会解析hook
});
router.afterEach  全局钩子

在routes路由器中路由添加beforeEnter:(to, from, next)=>{xxx}，路由独享hook

在组件中添加beforeRouteEnter(to, from, next)=>{xxx}，组件独享hook


// 跳转滚动行为
在路由器中添加scrollBehavior(to,from,savePosition){
	// 返回滚动位置
	return {x:0,y:0};
}

axios

axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。

// get请求
axios.get('/path?name=king')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// post请求
axios.post('/path', {
    a: 'aaa',
    b: 'bbb'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });  
// 异步请求
const response = await axios.get('/path?name=king');  
// 常用请求参数
axios({
  method: 'post',
  url: '/path',
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  params: {
    name:king   // 在url中
  },
  data: {      // request body中
    a: 'aaa',
    b: 'bbb'
  }
});