Vue——基础应用
【1】绑定数据
<!-- 语法糖 v-bind:属性 简写：属性 -->
<div id="app">
<input type="text" v-model="username" />
<input type="text" v-bind:value="username" @input="handle" />
</div>
================================================
let vm = new Vue({
el: "#app",
data() {
return {
username: 'macro'
}
},
methods: {
handle(event) {
this.username = event.target.value;
}
}
});
【2】操作CSS
<div id="app">
<p :class="className">自然段</p>
<p :class="{current:isCurrent,wrong:isWrong}">自然段</p>
<p :class="[currentClass,wrongClass]">自然段</p>
<span :class="spanDisplay">123</span>
<span :class="{spanDisplay:isHidden}">123</span>
<button @click="btnDisplay">切换</button>
<div :style="{width:'200px',height:'200px',color:'red',background_color: 'skyblue'}">我是一个div</div>
<p :class="{current}">测试</p>
</div>
======================================================
<style>
.current {
height: 200px;
width: 200px;
background-color: pink;
}
.wrong {
height: 200px;
background-color: red;
}
.spanDisplay {
display: none;
}
</style>
======================================================
let vm = new Vue({
el: "#app",
data() {
// 注意关键字用法
return {
className: 'current wrong',
currentClass: 'current',
wrongClass: 'wrong',
isCurrent: false,
isWrong: true,
spanDisplay: '',
isHidden: false
}
},
methods: {
btnDisplay() {
// this.spanDisplay = 'spanDisplay';
this.isHidden = !this.isHidden;
this.isCurrent = !this.isCurrent;
this.isWrong = !this.isWrong;
},
}
});
【3】v-if应用
<!--
v-if 通过创建元素和销毁元素达到元素的显示与隐藏
v-show 通过display:none控制元素的显示与隐藏
从性能角度：元素频繁显示与隐藏：v-show;否则，v-if
-->
<!-- <div v-if="xueli==='博士'">优秀</div>
<div v-if="xueli==='研究生'">人才</div>
<div v-if="xueli==='本科'">大众</div>
<div v-if="xueli==='其他'">其他</div> -->
【4】vue 自我引导
<div id="app">
<input type="text" v-focus v-color="color" />
</div>
===================================
Vue.directive('focus', {
inserted(el) {
console.log(213);
console.log(el);
el.focus();
}
});
======================
Vue.directive('color', {
bind(el, binding) {
el.style.color = binding.value;
}
});
【5】v-for操作
<ul>
<li v-for="(item,index) in students" :key="item.id">{{index+1}}-{{item.id}}-{{item.name}}-{{item.hobby}}</li>
</ul>
let vm = new Vue({
el: "#app",
data() {
return {
students: [{
id: 1,
name: 'macro',
hobby: ''
}, {
id: 2,
name: 'zs',
hobby: ''
}, {
id: 3,
name: 'wo',
hobby: ''
}],
obj: {
uname: 'zs',
age: 25,
gender: '男'
}
}
},
});
【6】form操作
<div id="app">
<form action="">
<input type="text" v-model.trim.lazy="uname">{{uname}} // 清楚左右空格 .lazy表示input blur时触发
<!-- 数据类型 -->
<input type="text" v-model.number="age"> //其本质还是字符串，超过17位后parseFloat()进行处理
<input type="radio" value="1" v-model="sex" name="" id="">
<input type="radio" value="2" v-model="sex" name="" id="">
<input type="checkbox" value="1" v-model="skills" name="" id="">HTML
<input type="checkbox" value="2" v-model="skills" name="" id="">CSS
<select v-model="city" multiple name="" id="">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
</form>
</div>
========================================
let vm = new Vue({
el: '#app',
data() {
return {
uname: ' macro ',
sex: '2',
skills: ['1', '2'],
city: ['bj', 'sh'],
age: 24
}
}
});
