vue基础

最新推荐文章于 2024-05-24 13:39:19 发布

莫得感情的代码机器人

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量252

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45888412/article/details/115697324

版权

vue

vue的基本使用

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 移动端禁止用户缩放页面 -->
	<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
    </style>
    <body>
    	<div id="#app">
    		<!-- 绑定参数 -->
    		<span @click="onClick('nice')">{{title}}</span>
    	</div>
    </body>
    <!-- 导入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script>
    	var Vue = window.Vue;
    	new Vue({
			el: '#app', // 绑定标签id
			data: function(){ // 参数
				return{
					title: 'Vue',
				}
			},
			methods: { // 定义方法
				onClick(val){ // 点击时触发事件， 改变参数
					this.title = val;
				},
			},
		})
    </script>
</head>

vue指令

// 双向绑定
v-model
// 绑定属性 这样标签里面的属性就可以与data里面的参数绑定
v-bind:style=""  简写 :style=""
// 事件绑定 与methods里面的方法绑定
v-on:click=""  简写 @click=""
.stop 阻止冒泡，调用 event.stopPropagation()
.prevent 阻止默认事件，调用 event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次
// 富文本解析
v-html=""
// 基于源数据多次渲染元素或模板块
v-for="(item, index) in list" :key="index"
key属性
·使用 v-for 的时候提供 key 属性，以获得性能提升。
·使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
// 条件渲染
v-if="" // 根据表达式的值的真假条件，销毁或重建元素
// v-if可以配合 v-else 或 v-else-if配合使用
v-show=""  // 根据表达式之真假值，切换元素的 display CSS 属性
// 提升用户体验
v-cloak
<div v-cloak>{{title}}</div>
防止刷新页面，网速慢的情况下出现{{title}}等数据格式

控制标签style样式

// 写法需用驼峰，逗号隔开
<div :style="{color: active, fontSize: 12 + 'px' }"></div>
// 可以通过使用data里面的属性，通过js控制变换style 
data(){
	return{
		active: '#333333',
	}
}
// 直接可以在data里面写好属性
<div :style="activeSTyle"></div>
// 写法也必须是驼峰
data(){
	return{
		activeSTyle: {
			color: '#333333', 
			fontSize: '12px'
		},
	}
}
// 数组写法
<div :style="[style1, style2]"></div>
data(){
	return{
		style1: {
			color: '#333333'
		},
		style2: {
			fontSize: '12px'
		},
	}
}

生命周期

<script>
	export default{
		data(){
			return{
			}
		}，
		beforeCreate(){
			// 创建前 
			// 此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。
		},
		created(){
			/*
			* 创建后 实例已经创建完成之后被调用 可以做：
			* 	调用methods中的方法，改变data中的数据
			* 	修改可以通过vue的响应式绑定体现在页面上
			* 	获取computed中的计算属性···
			*/
		},
		beforeMount(){
			// 挂载开始之前被调用
			// data里面的数据和模板生成html，完成了el和data 初始化,还未挂载在页面上
		},
		mounted(){
			// 挂载完成，一般在这里做一下页面数据请求，只执行一次
		},
		beforeUpdate(){
			// 在数据更新之前被调用
		},
		updated(){
			// 组件DOM更新完成后调用，这里避免更新状态，因为会导致更新无限循环
		},
		beforeDestroy(){
			// 销毁前调用，一般用于清除定时器和监听DOM事件
		},
		destroyed(){
			// 销毁后调用，调用后，所有的事件监听器会被移出，子实例销毁。
		}
	}
</script>

侦听器 watch

用来监测Vue实例上的数据变动

<template>
	<div>
		<input v-model="value" />
	</div>
</template>
<script>
	export default{
		data(){
			return{
				value: '',
				text: '',
			}
		},
		watch: {
			// 侦听value属性 当value发生改变时就会触发事件
			value(val){
				this.text = this.value;
			},
		}
	}
</script>

自定义基座运行时报错

You are using the runtime-only build of Vue where the template compiler is not available

原因

vue有两种形式的代码分别是compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式，指向了"dist/vue.runtime.common.js"位置
在main.js文件中，初始化vue是compiler模式的，因此出现上面的报错信息。

  el: '#app',
  router: router,
  store: store,
  template: '<App/>',
  components: { App }
})

解决方法

解法一：将mian.js中的代码修改：

  router,
  store,
  render: h => h(App)
}).$mount("#app")

解法二：vue.config.js文件加上webpack的配置：

resolve: {
	alias: {
		'vue$': 'vue/dist/vue.esm.js' 
	}
}

莫得感情的代码机器人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础

vuevue的基本使用<head> <meta charset="UTF-8"> <meta content="yes" name="apple-mobile-web-app-capable">  <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum
复制链接

扫一扫