vue的基础语法操作

• 什么是vue？
• 为什么要使用vue？
• vue的文本操作
• 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值

纯手打不易，进来可以点个赞再走～～