Vue框架的基本介绍
目录
一.Vue
1.概述
2.三大主流框架
3.优点:
二.Vue搭建
三.语法
1.基本框架
2.插值表达式
3.Vue指令
1.v-text:
2.v-html:
编辑3.v-model:
4.v-on:
5.v-show:
6.v-if:
7.v-else:
8.v-bind:
9.v-for:
一.Vue
1.概述
Vue是一款用于构建用户界面的渐进式的js框架,是一款前端javaScript框架,对javaScript进行封装,核心库只关心视图层,易上手,便于与既有项目整合
2.三大主流框架
vue.js和Angular.js,react.js一起并称为前端三大主流框架
3.优点:
1.体积小
2.效率高(不直接频繁的对网页上的标签进行操作),基于虚拟DOM技术(不需要我们每次手动绑定DOM对象)
3.实现数据双向绑定(同步更新)
4.生态丰富,学习成本低
构建用户界面:基于数据渲染出用户看见的界面
渐进式:使用部分vue或完整vue
框架:就是一套完整的项目解决方法,用于快速构建项目(提升开发效率)
二.Vue搭建
1.下载Vue.js,导入到对应文件的js目录下
2.在html文件中导入Vue.js
<script src="js/vue@2.js"></script>这里需要注意的是,导入标签中不能有任何的内容,因为在<script></script>中有src属性时,浏览器默认不会读取其中的内容
三.语法
1.基本框架
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue@2.js"></script></head><body><!-- 将指定标签与Vue对象绑定绑定 --><div class="tmp"></div><script>let tmp = new Vue({// 与Vue对象绑定的标签选择器el:".tmp",// data中定义了使用的数据 键:值data:{},// 定义函数(要使用Vue的属性,函数必须定义在methods里),包装到Vue对象methods:{}});</script></body>
</html>2.插值表达式
将Vue对象data域中定义的变量直接输出到标签中
<body><!-- 将指定标签与Vue对象绑定绑定 --><div class="tmp">{{message}}</div><script>let tmp = new Vue({// 与Vue对象绑定的标签选择器el:".tmp",// data中定义了使用的数据 键:值data:{message:"hellow,Vue",},// 定义函数(要使用Vue的属性,函数必须定义在methods里),包装到Vue对象methods:{}});</script>
</body>那这样写在浏览器中会显示什么呢?
成功的显示了hellow,Vue,Vue框架帮助我们免去了频繁的获取Dom对象的操作
3.Vue指令
指令带有前缀v-开头,表示它们是vue提供的特殊属性
1.v-text:
将变量显示在标签体中,会解析message中的标签,例如下述代码中有<b></b>标签,在浏览器中这个表情会被解析
<div v-html='message'></div>
//注意这里是简写
data:{message:'<b>hellow</b>'
}2.v-html:
将变量显示在标签体中,把message当成一个字符串,如果meassage中有标签,不会解析执行,纯文本
<div v-text='message'></div>
//注意这里是简写
data:{message:'<b>hellow</b>'
}v-html和v-text在浏览器中的效果如下:
3.v-model:
可以将输入标签中的值,绑定到指定的属性上,将输入框的值与其他标签体绑定
<p>{{messages}}</p>
<input type="text" v-model="messages"/>
//注意这里是简写
data:{messages:''
}
4.v-on:
事件绑定
<input type="button" value="按钮1" v-on:click="text1()"/>
<!-- 简写方法 -->
<input type="button" value="按钮2" @click="text2()"/>methods:{text1(){// 想要使用data里面的数据,注意作用域(this表示Vue对象)alert(this.message);},5.v-show:
根据真假显示或隐藏当前标签,通过display的值隐藏标签
<div v-show="isshow">123</div>data:{isshow:true,
}6.v-if:
根据真假显示或隐藏当前标签,直接删除/创建标签,效率低
<div v-if="isshow">222</div>7.v-else:
配合着v-if使用,v-if不成立执行v-else(if-else必须连续,中间不能隔标签)
<div v-else>345</div>8.v-bind:
1.将动态的值和我们原来静态的值绑定
2.可以动态的改变class属性的值(通过一个boolean值)
<img v-bind:src="imgsrc"/><div v-bind:class="{active:isActive}">状态</div>
{类选择器:boolean值}9.v-for:
循环,模拟从服务器后端响应的数据就是一个数组(json),把数据动态的显示在网页上
<ol><!-- 增强for循环 p是临时变量用于接收数组内容 --><li v-for="p in provinces">{{p}}</li>
</ol>data:{provinces:['北京','天津','上海','西安','汉中'],
}效果如下:
