VUE
VUE:面向数据编程
JQuery:面向DOM
- Jquery他操作数据时伴随着需要操作dom
- Vue主要面向数据操作(JSP)
VUE特点
整体构成 = 模板 + 数据
-
模板
<body> <!-- 视图 --> <div id="div"> {{msg}} </div> </body>
-
数据来源
// 脚本 new Vue({ el:"#div", data:{ msg:"Hello Vue" } });
Vue 是一套构建用户界面的渐进式前端框架。
只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合。
通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
特点
易用:在有 HTML CSS JavaScript 的基础上,快速上手。
灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
性能:20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
Vue 快速入门
-
下载和引入 vue.js 文件。
-
编写入门程序。
视图:负责页面渲染,主要由 HTML+CSS 构成。
脚本:负责业务数据模型(Model)以及数据的处理逻辑。
<title>快速入门</title>
</head>
<body>
<!-- 模板 -->
<!-- 视图 -->
<div id="div">
{{msg}}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 脚本
new Vue({
el:"#div",
data:{
msg:"Hello Vue"
}
});
</script>
el 选项:指定模板位置,用于接收获取到页面中的元素。(根据常用选择器获取)。
data 选项:指定模板中使用的数据.用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。
methods 选项:用于定义方法。在方法中能够使用this操作.方法可以直接通过对象名调用,this 代表当前 Vue 对象。
method普通形式
methods:{
study:function(){
alert(this.name + "正在" + this.classRoom + "好好学习!");
}
}
<title>快速入门升级</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
<div>姓名:{{name}}</div>
<div>班级:{{classRoom}}</div>
<button onclick="hi()">打招呼</button>
<button onclick="update()">修改班级</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 脚本
let vm = new Vue({
el:"#div",
data:{
name:"张三",
classRoom:"一班"
},
methods:{
study(){
alert(this.name + "正在" + this.classRoom + "好好学习!");
}
}
});
//定义打招呼方法
function hi(){
vm.study();
}
//定义修改班级
function update(){
vm.classRoom = "二班";
}
</script>
指令:
编写模板文件使用
是带有 v- 前缀的特殊属性,不同指令具有不同含义。
例如 v-html,v-if,v-for
使用指令时,通常编写在标签的属性上,值可以使用 JS 的表达式。
)]
文本插值
v-html:把文本解析为 HTML 代码。
把变量内容放在标签的文本处
<title>文本插值</title>
</head>
<body>
<div id="div">
<div>{{msg}}</div>
<div v-html="msg"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
msg:"<b>Hello Vue</b>"
}
});
</script>
绑定属性
v-bind:为 HTML 标签绑定属性值。
操作标签的属性值
<style>
.my{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="div">
<a v-bind:href="url">百度一下</a>
<br>
<a :href="url">百度一下</a>
<br>
<div :class="cls">我是div</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
url:"https://www.baidu.com",
cls:"my"
}
});
</script>
条件渲染
v-if:条件性的渲染某元素,判定为真时渲染,否则不渲染。
v-else:条件性的渲染。
v-else-if:条件性的渲染。
v-show:根据条件展示某元素,区别在于切换的是 display 属性的值。
<title>条件渲染</title>
</head>
<body>
<div id="div">
<!-- 判断num的值,对3取余 余数为0显示div1 余数为1显示div2 余数为2显示div3 -->
<div v-if="num % 3 == 0">div1</div>
<div v-else-if="num % 3 == 1">div2</div>
<div v-else="num % 3 == 2">div3</div>
<div v-show="flag">div4</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
num:1,
flag:false
}
});
</script>
列表渲染
v-for:列表渲染,遍历容器的元素或者对象的属性。
<body>
<div id="div">
<ul>
<li v-for="name in names">
{{name}}
</li>
<li v-for="value in student">
{{value}}
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
names:["张三","李四","王五"],
student:{
name:"张三",
age:23
}
}
});
</script>
事件绑定
v-on:为 HTML 标签绑定事件。
<title>事件绑定</title>
</head>
<body>
<div id="div">
<div>{{name}}</div>
<button v-on:click="change()">改变div的内容</button>
<button v-on:dblclick="change()">改变div的内容</button>
<button @click="change()">改变div的内容</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
name:"黑马程序员"
},
methods:{
change(){
this.name = "传智播客"
}
}
});
</script>
表单绑定
将变量和输入框进行双向绑定,改变一方另一方也将改变
v-model:在表单元素上创建双向数据绑定。
双向数据绑定
更新 data 数据,页面中的数据也会更新。
更新页面数据,data 数据也会更新。
<title>表单绑定</title>
</head>
<body>
<div id="div">
<form autocomplete="off">
姓名:<input type="text" name="username" v-model="username">
<br>
年龄:<input type="number" name="age" v-model="age">
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
username:"张三",
age:23
}
});
</script>
Element 介绍
Element:网站快速成型工具。
是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库。
使用 Element 前提必须要有 Vue。
组件:组成网页的部件,例如 超链接、按钮、图片、表格等等~
Element 官网:https://element.eleme.cn/#/zh-CN
Element-UI基本使用
- css文件导入
- 先导入Vue的js文件
- 导入自己的js
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速入门</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
</head>
<body>
<button>我是按钮</button>
<br>
<div id="div">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</body>
<script>
new Vue({
el:"#div"
});
</script>