vue是一个前端javascript框架,对javascript进行封装.
vue.js和 Angular.js、React.js 一起，并成为前端三大主流框架！
特点:1.体积小(封装的文件小)
2.更高的运行效率,不直接频繁的对网页上的标签进行操作,基于dom技术进行优化
3.实现数据双向绑定,程序员只关心要操作的数据即可,把数据渲染到标签上交给vue框架处理.
4.生态丰富、学习成本低
Vue 指令
指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性
v-text、v-html
javascript
<div id="app">
<div>
abc ,{{message}} ,123
</div>
<div v-html="message1">123</div>
<div v-text="message1">123</div>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
message:"hello vue",
message1:"<b>hello</b>",
}
});
</script>{{message}} v-html,v-text区别
{{message}}不会覆盖标签体中的内容,只是在标签内部插入一个值
v-html和v-text 会用数据覆盖标签体中的内容
v-html:能解析字符串中的标签
v-text:不能解析字符串中的标签
v-on
作用是为元素绑定事件
事件名不需要写 on 指令可以简写为@
绑定的方法定义在 methods 属性中,可以传入自定义参数
javascript
<input type="button" value="按钮1" v-on:click="test1()"/>
<input type="button" value="按钮2" @click="test1()"/>
let app = new Vue ({
el:"#app",
data:{//定义数据
message:"hello"
}
methods:{//定义函数
test1(){
//函数实现
}
}
})v-model
作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值 双向数据绑定
javascript
<p>
{{name}}
</p>
<!-- v-model 可以将输入标签中的值 绑定到指定的属性上-->
<input type="text" value="" v-model="name"/>v-show
javascript
<!--
v-show="布尔值" 根据布尔值显示或隐藏当前标签
通过display的值控制标签显示或隐藏,每次不需要重新创建标签,效率高
-->
<div v-show="isshow">123</div>isshow为true时显示，为false时隐藏
v-if
javascript
<!--
v-if="布尔值" 根据布尔值显示或隐藏当前标签
每次从网页中要删除/创建标签,数量多了效率低
v-if 和 v-else标签必须挨着
-->
<div v-if="boolean">aaa</div>
<div v-else>bbb</div>v-show 和 v-if的区别
v-show 通过通过display的值控制标签显示或隐藏
v-if 每次从网页中要删除/创建标签
v-if 过多会可能影响网页性能
v-bind
作用是为元素绑定属性
完整写法是 v-bind：属性名
简写的话可以直接省略 v-bind，只保留：属性名
javascript
<!-- <img src="imgsrc"/> 错误写法,不能将data中的属性填充到普通标签属性中-->
<!-- <img v-bind:src="imgsrc"/> -->
<img :src="imgsrc" :title="title"/>
<!-- 通过isActive控制是否为标签添加指定的类名-->
<div v-bind:class="{ active: isActive }">状态</div>v-for
作用是根据数据生成列表结构
数组经常和 v-for 结合
使用语法是（item，index）in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上是响应式的
为循环绑定一个 key 值 :key="值" 尽可能唯一
javascript
<div id="app">
<ul>
<li v-for="p in provinces">{{p}}</li>
</ul>
<table border="1">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr v-for="student in students">
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.gender}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
provinces:['北京','天津','上海','重庆','陕西'],
students:[{id:1,name:'jim',gender:'男'},
{id:2,name:'tom',gender:'男'},
{id:3,name:'lili',gender:'女'},
{id:4,name:'lili',gender:'女'},
{id:5,name:'lili',gender:'女'}]
}
});
</script>