「这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战」
简述：
Vue (读音/vju:/，类似于view)是一套用于构建用户界面的渐进式框架。 Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合.使用时，Vue也完全能够为复杂的单页应用提供驱动。
基本使用步骤
第一步：引入vue.js库
<script src="vue.js"></script>
第二步：写一个显示vue数据的div
- {{}}:插值表达式，可以显示vue中的data的数据
<div id="app">{{message}}</div>
第三步：添加vue固定代码
- 创建一个vue对象
- 绑定vue作用的范围
- 定义页面中显示的模型数据
<script>
//创建一个vue对象
new Vue({
el:'#app', //绑定vue作用的范围
data:{ //定义页面中显示的模型数据
message:'Hello Vue！'
}
})
</script>
看效果：
vue数据绑定指令
单向数据绑定：v-bind
- 这个指令一般用于在标签属性里面，获取值。
举个栗子：
<div id="app">
<h1 v-bind:title="message">
{{content}}
</h1>
<!-- 简单写法 -->
<h2 :title="message">
{{content}}
</h2>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
content:'我是标题！',
}
})
</script>
看效果：
双向数据绑定：v-model
<div id="app">
<!-- 单向数据绑定 -->
<p>v-bind</p>
<input type="text" v-bind:value="searchMap.keyword">
<!-- 双向数据绑定 -->
<p>v-model</p>
<input type="text" v-model="searchMap.keyword">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyword:"123"
},
}
})
</script>
看效果：
v-bind和v-model同时绑定着searchMap.keyword数据，此时你会发现当你修改v-model文本框中的数据时，v-bind的内容也在随之改变。
vue事件绑定指令：v-on
举个栗子：
- v-on：指定绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods中定义的的方法。
<div id="app">
<button v-on:click="fun1()">fun1</button>
<!-- 简写 -->
<button @click="fun2()">fun2</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: { //定义属性
searchMap:{
keyword:"Vue"
}
},
methods:{ //定义多个方法
fun1(){
console.log("fun1...")
},
fun2(){
console.log("fun2...")
}
}
})
</script>
看效果：
vue修饰符.prevent
- v-on:submit.prevent="OnSubmit()"：否定默认的提交函数方法，使用自己定义的方法执行。 举个栗子：
<div id="app">
<form action="save" v-on:submit.prevent="OnSubmit()">
<input type="text" id="name" v-model:value="user.name">
<input type="submit" value="提交">
</form>
<h2 v-bind:title="message">{{user.name}}</h2>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
user:{name:'李四'}
},
methods:{
OnSubmit(){
if(this.user.name){
console.log("提交表单！")
}else{
alert("请输入！")
}
}
}
})
</script>
看效果：
vue条件渲染指令：v-if v-else
举个栗子： 通过控制ok的Boolean值改变文本内容（默认是false，则为lisi）
<div id="app">
<input type="checkbox" v-model:value="ok">是或否
<h1 v-if="ok">李四</h1>
<h1 v-else>lisi</h1>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok:false
}
})
</script>
看效果：
vue循环指令 v-for
举个栗子：循环10次，每次循环的数值都赋值给n。
<div id="app">
<ul>
<!-- 循环10次，每次循环的数值都赋值给n -->
<li v-for="n in 10">{{n}}</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {}
})
</script>
看效果：
本文至此结束！希望内容对你有所帮助！
