VIEW
VUE: data-oriented programming
JQuery: DOM-oriented
- When Jquery manipulates data, it needs to manipulate dom
- Vue is mainly oriented to data operations (JSP)
VUE features
Overall composition = template + data
-
template
<body> <!-- 视图 --> <div id="div"> { {msg}} </div> </body> -
Data Sources
// 脚本 new Vue({ el:"#div", data:{ msg:"Hello Vue" } });
Vue is a progressive front-end framework for building user interfaces.
Only focus on the view layer, and it is very easy to learn, and it can also be easily integrated with other libraries or existing projects.
Realize the view component that responds to data binding and composition through the simplest possible API.
Features
Easy to use: Quickly get started on the basis of HTML CSS JavaScript.
Flexible: Simple and small core, progressive technology stack, enough to cope with applications of any scale.
Performance: 20kb min+gzip running size, ultra-fast virtual DOM, the most worry-free optimization.
Getting started with Vue
-
Download and import the vue.js file.
-
Write an entry program.
View: Responsible for page rendering, mainly composed of HTML+CSS.
Script: Responsible for business data model (Model) and data processing logic.
<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 option: Specify the location of the template to receive the elements in the page. (Acquired according to the commonly used selector).
data option: Specify the data used in the template. It is used to save the data in the current Vue object. Variables declared in the view need to be assigned here.
methods option: used to define methods. The this operation can be used in the method. The method can be called directly by the object name, and this represents the current Vue object.
method ordinary form
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>
instruction:
Write template file to use
It is a special attribute with the prefix v-, and different commands have different meanings.
例如 v-html，v-if，v-for
When using instructions, it is usually written on the attributes of the label, and the value can use JS expressions.
)]
Text interpolation
v-html: Parse text into HTML code.
Put the variable content in the text of the label
<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>
Binding properties
v-bind: Bind attribute values to HTML tags.
Operation tag attribute value
<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>
Conditional rendering
v-if: Conditionally render an element, render if it is judged to be true, otherwise it will not render.
v-else: Conditional rendering.
v-else-if: Conditional rendering.
v-show: Display an element according to conditions, the difference is that the value of the display attribute is switched.
<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>
List rendering
v-for: List rendering, traversing the properties of the elements or objects of the container.
<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>
Event binding
v-on: bind events to HTML tags.
<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>
Form binding
Two-way binding of variables and input boxes, changing one party will also change the other party
v-model: Create two-way data binding on form elements.
Two-way data binding
Update the data data, the data in the page will also be updated.
Update page data, data data will also be updated.
<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 introduction
Element: Website rapid prototyping tool.
Is it a set of Vue-based website component libraries provided by the front-end development team of Ele.me.com.
Vue is a prerequisite for using Element.
Components: The components that make up a web page, such as hyperlinks, buttons, pictures, tables, etc.~
Element official website: https://element.eleme.cn/#/zh-CN
Basic use of Element-UI
- css file import
- First import the Vue js file
- Import your own 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>