vue的基础语法操作
什么是vue?
构建数据驱动的web应用开发框架
Vue是一套用于构建用户界面的渐进式框架
为什么要使用vue?
vue框架是目前市场上最流行的框架,vue为程序员编写项目提供了便捷。
使每个人可以更好的负责自己的模块,模块化开发的便捷工具。
vue的文本操作
首先我们要引入vue.js的文件
<div id="app">
{{ msg }}
</div>
<script src="./vue.js"></script>
<script>
new Vue{(
el:"#app";
data:{
msg:"hello vue"
}
)}
</script>
这段代码在页面显示的内容就是data中msg的数据
vue的指令
vue的指令有
input中v-model 就是input的value值
标签上v-html,就是在标签内部插入内容
v-if 条件判断
v-show 条件判断
v-bind 绑定属性
v-on 绑定事件
v-for 遍历循环使用
其中事件的绑定与属性的绑定可以简写为以下情况
<button @click="fn()">click</button> // 其中@为简写的v-on:属性
<div :class="test"></div> // 属性绑定时可以去掉v-bind
//:中的属性值可以是一个变量
v-if 条件判断 v-else-if v-else与v-show 条件判断的区别
v-if的作用是如果满足的我的条件我就创建一个满足条件的内容,如果不满足就创建另外一个并且销毁第一个重新创建
v-show的作用与css的display:block/none;相似不会删除原来已经创建的属性只是让他暂时隐藏
style的属性绑定有两种方法一种是数组的方法还有一种是对象的方法
//这是对象的方法。
<style>
.active {
font-size: 12px;
color: #99f;
}
</style>
<div :class="{active: flag}"></div>//为clss添加属性
data: {
flag: true //为true的时候显示效果。为false的时候不显示效果
}
//这是数组的方法
<style>
.active {
font-size: 12px;
color: #99f;
}
.test {
background-color: #ccc;
}
</style>
<div :class="[activeClass, testClass]"></div>//在使用的时候将属性用数组包裹使这个div可以书写多种css样式
data: {
activeClass: 'active',
testClass: 'test'
//这里是把样式定义为一个属性
}
v-for的循环遍历
v-for = “item of/in list” :key=""//在循环遍历的时候要加上key值,保证他的唯一性
v-for = “(item, index) of/in list” :key="index"
可以遍历数组,可以遍历对象,还可以遍历字符串
一定要加key值
纯手打不易,进来可以点个赞再走~~