30分钟入门前端框架Vue之基础语法篇
很多想学习测试平台开发的小伙伴，对平台的前端实现的技术比较感兴趣，所有就写了一系列Vue框架快速入门的文档教程，这是第一篇，主要给大家介绍vue的一些基础语法。Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。## 1、安装vue
方式一：直接使用script标签引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
方式二： npm安装
在用 Vue 构建大型应用时，推荐使用 NPM 安装
npm install vue
2、数据绑定
使用vue进行数据绑定可以通过插值表达式和指令两种形式
插值表达式:｝
指令:v-text: 在元素里填充纯文本内容
指令v-html: 在元素里填充html
指令v-pre: 在元素里填充原始数据
<div id="app">
<p>{{age}}</p>
<div v-text="msg">123</div>
<div v-html="desc"></div>
<div v-pre>{{desc}}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:"hello 木森",
age:18,
desc:'<h1>musen<\h1>'
}
})
</script>
3、属性绑定
vue不仅支持绑定数据，还支持动态的给元素绑定属性。属性绑定使用v-bind这个指令
v-bind:属性 = 属性值
也可以简写为 :属性 = 属性值
<div v-bind:id="dynamicId"></div>
简写：
<div :id="dynamicId"></div>
4、事件绑定
使用vue给元素绑定事件，需要使用v-on这个指令。
v-on：可以简写为 @：
<button type="button" @click="sub()">-</button>
<button type="button" v-on:click="add()">+</button>
事件绑定函数参数的传递：
-
1、如果事件直接绑定函数的名称，默认会把事件对象作为函数的第一个参数传递
sub:function(event){ console.log(event.target) this.number-- } -
2、如果事件绑定的函数，传参调用，事件对象可以通过$event来传递（最后一个参数）
add:function(p,event){ console.log(event) console.log(p) this.number++ }
5、vue的双向数据绑定
v-model:页面修改数据会变，数据改变，页面也会改
事件监听
view -----> vm ------>model
数据绑定
view <----- vm <------model
案例代码
<div id="app">
<div v-text="msg">123</div>
<div>
<input type="text" v-model="msg">
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:"hello 木森",
age:18,
desc:'<h1>musen<\h1>'
}
})
</script>
6、分支语句
通过条件来控制元素是否渲染到页面
v-if：判断条件成立时渲染元素
v-else-if: if中条件不成立时，判断v-else-if中的条件是否成立，成立则渲染元素
v-else: 前面的条件都不成立时渲染元素
<div id="app">
<div>
<span v-if="score>80">优秀</span>
<span v-else-if="score>60">良好</span>
<span v-else=>不及格</span>
</div>
</div>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
score: 88,
}
})
</script>
v-show:控制元素是否显示到页面（本质就是display属性的控制）
<div v-show="true">值设为true,这个元素会显示出来</div>
<div v-show="false">值设为false,这个元素会影藏起来</div>
7、循环语句
v-for：遍历数组
<li v-for="name in names">{{name}}</li>
v-for:遍历对象
<li v-for="key,value in names">{{key}}{{value}}</li>
v-for集合v-if一起使用：
<li v-if="info.age>18" v-for="(info,index) in infos">
案例代码：
<div id="app">
<table border="" cellspacing="" cellpadding="">
<tr>
<th>姓名</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr v-for='item in stus' :key='item.score'>
<td>{{item.name}}</td>
<td>{{item.score}}</td>
<td v-if="item.score>80">优秀</td>
<td v-else-if="item.score>60">良好</td>
<td v-else>不及格</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
stus: [
{name: '木森',score: 50},
{name: '盼盼', score: 78},
{name: '好先生',score: 89},
],
}
})
</script>
8、修饰符
1、事件修饰符：
.stop:阻止冒泡（事件冒泡:点击子元素，事件会一级一级冒泡到父元素）
.prevnet :阻止事件行为
<div id="app">
<div @click="work">
<button type="button" @click.stop="work2()">按钮1</button>
</div>
<a href="https://www.baidu.com" @click.prevent='work3()'>百度</a>
</div>
<script type="text/javascript">
var vue= new Vue({
el:'#app',
data:{
},
methods:{
work:function(){
console.log('调用了work方法')
},
work2:function(){
console.log('---work2----')
},
work3:function(){
console.log('---work3----')
}
}
})
</script>
2、按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 按下是 `Enter` 时调用 `submit()` -->
<input v-on:keyup.enter="submit">
3、表单修饰符
-
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
-
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
-
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
4、其他修饰符（自行扩展）
- 系统修饰符
- 鼠标按钮修饰符
关于Vue的基本入门就给大家介绍到这里了，下一篇文章再给大家介绍vue的进阶使用方法。
欢迎来到testingpai.com！
注册 关于