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