vue基础

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 }
})

解决方法

  1. 解法一:将mian.js中的代码修改:
  router,
  store,
  render: h => h(App)
}).$mount("#app")
  1. 解法二:vue.config.js文件加上webpack的配置:
resolve: {
	alias: {
		'vue$': 'vue/dist/vue.esm.js' 
	}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值