Vue 基础语法
插值操作
1.Mustache( 双大括号 或者 胡子符号)
<body>
<div id="app">
<h1>Mustache:
</h1><br>
<div>*基本输出:{{message}}
</div>
<div>*长度输出:{{message.length}}
</div>
<div>*字符拼接:{{message+' 123'}}
</div>
<div>*三元表达式:{{message.length<10?true:false}}
</div>
<div>*过滤器:{{message | toUpper }}
<b>//一般用于数据格式化
</b></div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello ,vueJS'
},
filters: {
toUpper: function (value) {
return value.toUpperCase()
}
}
})
</script>
</body>
2.v-once
<body>
<div id="app">
<h2>{{message}}
</h2>
<h2 v-once>{{message}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
3.v-html
<body>
<div id="app">
<h2>{{url}}
</h2>
<h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
url: '<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
4.v-text
<body>
<div id="app">
<h2>{{message}}, 李银河!
</h2>
<h2 v-text="message">, 李银河!
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
</body>
5.v-pre
<body>
<div id="app">
<h2>{{message}}
</h2>
<h2 v-pre>{{message}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
</body>
6.v-cloak
<body>
<div id="app" v-cloak>
<h2>{{message}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
setTimeout(function () {
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
}, 1000)
</script>
</body>
属性绑定
1.v-bind的基本使用
<body>
<div id="app">
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref">百度一下
</a>
<img :src="imgURL" alt="">
<a :href="aHref">百度一下
</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
imgURL: 'https://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',
aHref: 'http://www.baidu.com'
}
})
</script>
</body>
2.v-bind绑定 class
<body>
<div id="app">
<h2 :class="active">{{message}}
</h2>
<h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}
</h2>
<h2 class="title" v-bind:class="getClasses()">{{message}}
</h2>
<button v-on:click="btnClick">按钮
</button>
<h2 class="title" :class="[active, line]">{{message}}
</h2>
<h2 class="title" :class="getClasses()">{{message}}
</h2>
<h2 class="title" :class="['active', 'line']">Hello World
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isActive: true,
isLine: true
},
methods: {
btnClick: function () {
this.isActive = !this.isActive
},
getClasses: function () {
return {active: this.isActive, line: this.isLine}
}
}
})
</script>
3.v-bind绑定 style
<body>
<div id="app">
<h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}
</h2>
<h2 :style="getStyles()">{{message}}
</h2>
<h2 :style="[baseStyle, baseStyle1]">{{message}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
finalSize: 100,
finalColor: 'red',
baseStyle: {backgroundColor: 'red'},
baseStyle1: {fontSize: '100px'}
},
methods: {
getStyles: function () {
return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
}
}
})
</script>
</body>
计算属性
<body>
<div id="app">
<h2>{{firstName + ' ' + lastName}}
</h2>
<h2>{{getFullName()}}
</h2>
<h2>{{fullName}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Lebron',
lastName: 'James'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
methods: {
getFullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
事件监听
1.基本使用
<body>
<div id="app">
<h2>{{counter}}
</h2>
]
<button @click="increment">+
</button>
<button @click="decrement">-
</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increment() {
this.counter++
},
decrement() {
this.counter--
}
}
})
</script>
</body>
2.参数传递
<div id="app">
<button @click="btn1Click()">按钮1
</button>
<button @click="btn1Click">按钮1
</button>
<button @click="btn2Click">按钮2
</button>
<button @click="btn3Click(abc, $event)">按钮3
</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
abc: 123
},
methods: {
btn1Click() {
console.log("btn1Click");
},
btn2Click(event) {
console.log('--------', event);
},
btn3Click(abc, event) {
console.log('++++++++', abc, event);
}
}
})
</script>
</body>
3.修饰符
<body>
<div id="app">
<div @click="divClick">
aaaaaaa
<button @click.stop="btnClick">按钮
</button>
</div>
<br>
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<input type="text" @keyup.enter="keyUp">
<button @click.once="btn2Click">按钮2
</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
methods: {
btnClick() {
console.log("btnClick");
},
divClick() {
console.log("divClick");
},
submitClick() {
console.log('submitClick');
},
keyUp() {
console.log('keyUp');
},
btn2Click() {
console.log('btn2Click');
}
}
})
</script>
</body>
条件判断
1.v-if v-else v-else-if 的基本使用
<body>
<div id="app">
<h2 v-if="score>=90">优秀
</h2>
<h2 v-else-if="score>=80">良好
</h2>
<h2 v-else-if="score>=60">及格
</h2>
<h2 v-else>不及格
</h2>
<h1>{{result}}
</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
score: 99
},
computed: {
result() {
let showMessage = '';
if (this.score >= 90) {
showMessage = '优秀'
} else if (this.score >= 80) {
showMessage = '良好'
}
return showMessage
}
}
})
</script>
</body>
2.v-if 和 v-show
<body>
<div id="app">
<h2 v-if="isShow" id="aaa">{{message}}
</h2>
<h2 v-show="isShow" id="bbb">{{message}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isShow: true
}
})
</script>
</body>
循环遍历
1.v-for遍历数组
<body>
<div id="app">
<ul>
<li v-for="item in names">{{item}}
</li>
</ul>
<ul>
<li v-for="(item, index) in names">
{{index+1}}.{{item}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
names: ['why', 'kobe', 'james', 'curry']
}
})
</script>
</body>
2.v-for遍历对象
<body>
<div id="app">
<ul>
<li v-for="item in info">{{item}}
</li>
</ul>
<ul>
<li v-for="(value, key) in info">{{value}}-{{key}}
</li>
</ul>
<ul>
<li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
info: {
name: 'why',
age: 18,
height: 1.88
}
}
})
</script>
</body>
双向绑定
1.v-model的基本使用
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
</body>
2.v-model结合Radio
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2>您选择的性别是: {{sex}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
sex: '女'
}
})
</script>
</body>
3.v-model结合CheckBox
<body>
<div id="app">
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>您的爱好是: {{hobbies}}
</h2>
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isAgree: false,
hobbies: [],
originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
}
})
</script>
</body>
4.v-model结合Select
<body>
<div id="app">
<select name="abc" v-model="fruit">
<option value="苹果">苹果
</option>
<option value="香蕉">香蕉
</option>
<option value="榴莲">榴莲
</option>
<option value="葡萄">葡萄
</option>
</select>
<h2>您选择的水果是: {{fruit}}
</h2>
<select name="abc" v-model="fruits" multiple>
<option value="苹果">苹果
</option>
<option value="香蕉">香蕉
</option>
<option value="榴莲">榴莲
</option>
<option value="葡萄">葡萄
</option>
</select>
<h2>您选择的水果是: {{fruits}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
fruit: '香蕉',
fruits: []
}
})
</script>
</body>
5.v-model相关修饰符
<body>
<div id="app">
<input type="text" v-model.lazy="message">
<h2>{{message}}
</h2>
<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}
</h2>
<input type="text" v-model.trim="name">
<h2>您输入的名字:{{name}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
age: 0,
name: ''
}
})
var age = 0
age = '1111'
age = '222'
</script>
</body>
