Vue 基础入门
Vue HTML 指令
<div v-text="name">渲染文本</div>
<div v-html="html">渲染 HTML</div>
<div v-bind:id="id">动态属性绑定</div>
<div :id="id">动态属性绑定简写</div>
<div>{{可以写表达式}}</div>
<div v-show="true">显示隐藏</div>
<div v-if="error">显示隐藏</div>
<div v-once>只渲染一次</div>
<div :[key]="vaule">动态属性名绑定</div>
<div v-on:click="add">设置事件(点击)</div>
<div @click="add">设置事件(点击)简写</div>
<div @[key]="add">设置动态事件</div>
<div @click.prevent="add">修饰符,阻止默认行为</div>
<div @click="add($event,30)">参数传递</div>
Vue JavaScript 代码
const app = Vue.createApp({
data() {
// 数据
return {
numberA: 1,
numberB: 2,
}
},
watch: {
// 监听
numberA(newValue, oldValue) {
console.log('number', newValue, oldValue)
},
numberB(newValue, oldValue) {
console.log('number', newValue, oldValue)
},
},
computed: {
// 计算属性
errorA() {
if (message) {
return this.tip + message
}
},
errorB: {
get() {
return this.tip + message
},
set(tip) {
this.tip = tip
},
},
},
methods: {
// 方法
add(event) {
this.error = '提示:'
if (this.number < 10) this.number++
},
desc(event) {
this.error = '警告:'
if (this.number > 0) this.number--
},
},
})
const vm = app.mount('#app')
v-if 与 v-show
v-if
不渲染 Dom 元素,v-show
通过样式控制。
v-show
不能使用在 template
之上
v-for
可以遍历纯数字、数组、对象
关于 event 事件
<button @click="this.orderBy = 'fraction', sum($event, 1, 2, 3)">FractionShort</button>
methods: {
sum(event, ...args) {
console.log(event)
}
},
事件修饰符
@click.stop //阻止单击事件继续传播
@click.capture //添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理,然后才交由内部元素进行处理。
@click.stop.prevent //修饰符可以串联
@click.self //只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的。
@click.once //只执行一次
@click.passive //无视所有默认行为的拦截,即不判断代码部分是不是有拦截。
@submit.prevent //提交事件不再重载页面
// ctrl alt shift meta
// enter esc space delete up down left right
@keyup.esc //按下特定按键触发
@click.alt.exact //按住特定按键,点击鼠标触发
表单操作
<input type="checkbox" v-model="afIsPost" true-value="yes" false-value="no" />
<input type="checkbox" v-model="afLesson" value="PHP" />
PHP
<input type="checkbox" v-model="afLesson" value="Linux" />
Linux
<input type="radio" v-model="afRadio" value="男" />
男
<input type="radio" v-model="afRadio" value="女" />
女
<input type="radio" v-model="afRadio" value="🏳️🌈" />
🏳️🌈
<select v-model="afCaty" multiple>
<option value>请选择</option>
<option value="BeiJing">北京</option>
<option value="ShangHai">上海</option>
<option value="WuHan">武汉</option>
</select>
<!-- 光标离开后才处理 -->
<input type="text" v-model.lazy="afgoodA" />
<!-- 设置值为数字 -->
<input type="text" v-model.number="afgoodB" />
<!-- 去除两端空格 -->
<input type="text" v-model.trim="afgoodC" />