数据选项- data
<script>
export default {
data() {
return {
msg:'a test'
}
},
}
</script>
方法 - methods
methods:{
init(){
alert('Hello world')
}
}
等同于javascript
var init = function(){
alert('Hello world')
}
生命周期 - mounted 组件初始化时执行
例如组件初始化时 调用 methods 里的init方法
mounted() {
this.init()
}
生命周期 - beforeDestroy 组件销毁时执行
例如组件关闭时 弹出确认框
beforeDestroy(){
alert('确定退出?')
}
监听 - watch
例如 某事件改变data 里 msg 的数据时 进行判断并弹框显示信息
watch:{
// data里定义的 msg
// oldVal 改变前的数据
// newVal 新的数据
msg(oldVal,newVal){
if (newVal == 'new test') {
alert('data 里的 msg 被更新了')
}
}
}
Vue 模板语言
插值表达式
例如 使用data里定义的msg 在模板上使用,经过vue处理,展示为真实Dom元素显示在网页上
<template>
<div class="box">
{{msg}}
</div>
</template>
v-show
根据data里的false 或 true 来选择此盒子是否展示
例如 p_show:false 则此p标签将不会展示
<template>
<div class="dom">
<p v-show="p_show"></p>
</div>
</template>
<script>
export default {
data() {
return {
p_show:false
}
},
}
</script>
v-if 条件表达式 类似与v-shwo,但v-show为切换元素的display属性,不造成元素的重新渲染,v-if则是直接删除元素,导致元素重新渲染,项目中根据实际需求来选择适合的指令
例如 当data里的数据为2时 模板上对应的v-else-if则会渲染 其他则不渲染
<template>
<div class="dom">
<p v-if ="p_if == 1"></p>
<p v-else-if="p_if == 2"></p>
<p v-else> </p>
</div>
</template>
<script>
export default {
data() {
return {
p_if:2
}
},
}
</script>
v-bind 简写为引文冒号 :
例如 给元素绑定多个值
<template>
<div class="dom" v-bind="bindTest">
</div>
</template>
<script>
export default {
data() {
return {
bindTest:[{
name:'张三',
age : 20
}]
}
},
}
</script>
或者 指定一个路径
<template>
<div class="dom">
<a :href="url"></a>
</div>
</template>
<script>
export default {
data() {
return {
url:'www.baidu.com'
}
},
}
</script>
监听事件
例如监听元素的点击 ,此点击事件可简写为 @click="btn"
<template>
<div class="dom" v-on:click="btn">
click
</div>
</template>
<script>
export default {
methods:{
btn(){
console.log('dom 被点击了');
}
}
}
</script>
v-model 双向绑定值 ,向input输入值,data里的inpval同步改变,或改变inpval的值,input里的内容也会同步改变
<template>
<div class="dom">
<input v-model="inpVal">
</div>
</template>
<script>
export default {
data() {
return {
inpVal:'我是输入框的值'
}
}
}
</script>
样式类绑定
例如 domStyle为样式属性 isDomStyle为是否添加此样式
<style>
.domStyle{
color: red;
}
</style>
<template>
<div class="dom" :class="{domStyle:isDomStyle}">
111
</div>
</template>
<script>
export default {
data() {
return {
inpVal:'我是输入框的值',
isDomStyle:true
}
}
}
</script>
v-for 列表渲染
例如 item为每一内容,使用v-for时 一般要指定key
<template>
<div class="dom">
<div v-for="(item,index) in list" :key="index">
{{item}}
</div>
</div>
</template>
<script>
export default {
data() {
return {
list:['张三','李四','大帅宇']
}
}
}
</script>