VUE是一套前端框架,尤雨溪,前谷歌的软件工程师。
框架:提供一整套解羞方法(显示,效果,请求访问)
库:只提供针对某一种情况的解决方案
-
Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)
-
Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!
-
Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)
-
前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果;
1、类比JQUERY
jquery | vue | 说明 |
---|---|---|
$().text() | {{ … }} | 插值表达式,为标签设置文本内容 |
$().attr() <br/> $().prop() | v-bind | 为标签设置属性 |
$().val() | v-model | 获取或为表单设置值 |
$().html() | v-html | 获取或为标签设置内容包含html值 |
二、VUE入门案例
1、搭建vue环镜
-
引入vue.js支持
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -
创建vue入口和实例对象
2、vue页面构成
-
模板(html代码)
-
数据(JS代码vue实例中的内容)
-
指令:配合数据(vue实例)在模板中对数据显示做效果(判断,循环),指令一般以v-开头
3、data函数的写法
-
写法一:
<script type="text/javascript">
//实例化vue实例
let vue=new Vue({
el:"#app", //表示哪个节点是vue的根节点,vue的挂载点,所有vue代码都要写在该id属性值所在的div标签中
data:{
user:{username:'张三',age:18}
}
});
</script> -
写法二:
<script type="text/javascript">
//实例化vue实例
let vue=new Vue({
el:"#app", //表示哪个节点是vue的根节点,vue的挂载点,所有vue代码都要写在该id属性值所在的div标签中
data(){//在这里面声明的变量是全局的,在整登个new Vue范围内都可以调用
return {
users: { //对象
username: "a",
age: 19
}
}
}
});
</script>
需要注意的是,虽然 data 属性的写法有 2 种,但是
-
第 1 种的
data: { ... }
对象的写法在未来会出现问题!某些场景中它不适用。 -
第 2 种的
data () { return {...} }
函数的写法则一直有效。<font color=red>以后我们使用第二种方式,不在使用第一种方式</font>.
三、VUE常用指令
1、循环指令v-for
-
基本用法
<ul>
//us表示保存循环出的每个值
//in循环关键字,相当于foreach的:
//userList要循环的数组
<li v-for="us in userList">姓名:{{us.username}} 年龄:{{us.age}}</li>
</ul> -
获得循环下标
<ul>
//us表示保存循环出的每个值
//index表示循环的下标
//in循环关键字,相当于foreach的:
//userList要循环的数组
<li v-for="(us,index) in userList">序号:{{index+1}} 姓名:{{us.username}} 年龄:{{us.age}}</li>
</ul>
2、判断指令v-if v-else
v-else-if 和 v-else是用来判断
<body>
<div id="app">
<!--
14> 未成年
15 20 少年
21 30 青年
-->
<p v-if="age<14">未成年</p>
<p v-else-if="age>=15 && age<=20">少年</p>
<p v-else-if="age>=21 && age<=30">青年</p>
</div>
</body>
<!--重点-->
<script type="text/javascript">
//实例化vue实例
let vue=new Vue({
el:"#app", //表示哪个节点是vue的根节点,vue的挂载点,所有vue代码都要写在该id属性值所在的div标签中
data(){//在这里面声明的变量是全局的,在整登个new Vue范围内都可以调用
return {
age:18
}
}
});
</script>
3、标签属性绑定v-bind
为标签设置属性值
语法:
v-bind:属性名="变量名"
案例:
<div id="app">
//disabled:属性名称
//disabStr:disabled属性的值
<input type="button" v-bind:disabled="disabStr" value="我是按钮">
</div>
</body>
<!--重点-->
<script type="text/javascript">
//实例化vue实例
let vue=new Vue({
el:"#app",
data(){
return {
//变量,用来保存disabled属性的值
disabStr:false
}
}
});
</script>
4、v-bind为标签绑定样式
5、v-model双向数据绑定
-
v-bind:用来为标签设置属性值,只能将data函数中的变量值赋给属性
-
v-model:主要用在表单上,获得表单的数据并保存到data的变量中
6、添加html到标签指令v-html