vue的入门
VUE 的了解
1.vue 前端框架(发展了解)
1.1html–超文本标记语言(静态网页)
1.2.css +javascript --动态的网页(jsp/php/asp)
1.3.ajax —局部刷新技术----h5
1.4.node.js —前端的后台的写法 /java
1.5.vue ,elementUI…前后端的分离的项目
流行的就是架构 就是mvvm
前后端分离项目
2.Vue的安装
2.1 先 1.安装nodejs的环境 – 2.在idea中安装nodejs插件-- termital 在安装 npm init -y
创建vue npm install vue
3.vue的运用
3.1 let(块) var(全局) const(常量) 的区别
for(var i =0;i<4;i++){
console.log(i)
}
console.log(i);
console.log("----------------");
for(let j =0;j<5;j++){
console.log(j)
}
console.log(j);
const util= 5; //const 是定义常量不能再赋值
3.2,解构数组和对象
let arr=[1,2,3];
let [a1,a2,a3]=arr;
console.log(a1);
console.log(a2);
console.log(a3);*/
//解构对象
/*let student={"name":"小包","age":18};
let {name,age}=student;
console.log(name);
console.log(age);
3.3,解构表达式+箭头表达式
const person={
name:"张三",
age:18
}
function hello(person) {
console.log(person.name)
}
var hello1 =({name})=>console.log(name)
hello(person);
hello1(person);
3.4 导入导出
导出
//第一种
export const util={
sum(a,b){
return a+b;
}
}
//第二种
let name ="张三"
let age =18
export {name,age}
//第三种
export default {
sum(a,b){
return a+b;
}
}
导入
import num from 'a.js'
import {name,age} from 'a.js'
import xxx from 'a.js'
3.5简单的运算
<h1>{{5+5}}h1>
<h1>{{5+"v5"}}h1>
<h1>{{5+"5"}}h1>
<h1>{{"5"-"5"}}h1>
<h1>{{5*5}}h1>
<h1>{{"5"*"5"}}h1>
<h1>{{5/5}}h1>
<h1>{{5/5}}h1>
{{show?"男":"女"}}
<hr>
{{"郭宝贝121121"}}<br/>
{{"郭宝贝121121".length}}<br/>
{{message.length}}<br/>
{{message.substring(1,5)}}<br/>
{{message.substring(2,6).toUpperCase()}}<br/>
3.6 标签的 v-的使用
v-bind
v-bind将一个对象键和值作为标签的属性的名字和值时,后不需要指定属性的名字
![]()
![]()
v-model
v-model双向绑定 作用于type
绑定到type=text的input表单元素
姓名:
{{inputValue}}
打篮球:
踢足球:
{{checkboxValue}}
打篮球:
踢足球:
{{radioValue}}
绑定到textarea的元素文本区域
简介:
{{textareaValue}}
绑定到单选的select的元素,下拉框
技能:
{{skills}}
v-for
<body>
<div id="app">
<h1>循环数组h1>
<ul>
<li v-for="hobby in hobbys">{{hobby}}li>
ul>
<h1>遍历对象h1>
<ul>
<li v-for="value in student">{{value}}li>
ul>
<h1>带索引循环数组h1>
<ul>
<li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}li>
ul>
<h1>带键遍历对象h1>
<ul>
<li v-for="(value,key,index) in student">{{index}}---{{key}}--{{value}}li>
ul>
<hr>
<h1>遍历数组和对象获取表h1>
<table >
<tr>
<th>序号th>
<th>姓名th>
<th>年龄th>
<th>性别th>
tr>
<tr v-for="student in students">
<td>{{student.id}}td>
<td>{{student.name}}td>
<td>{{student.age}}td>
<td>{{student.sex}}td>
tr>
table>
div>
<script>
var app = new Vue({
el: "#app",
data: {
hobbys : ["爬山","游泳","打豆豆","睡觉"],
student : {
name: "mao毛",
age: 222,
sex: "男",
},
students: [
{id:1,name: "高傲", age: 19, sex: "男"},
{id:2,name: "菲菲", age: 12, sex: "女"},
{id:3,name: "梅梅", age: 18, sex: "女"}
]
},
num : 10,
str : "abcdefg",
});
script>
body>
v-show v-if
v-show
v-show不满足条件 标签属性 style="display: none;
看见
躲猫猫
优秀
v-if 不满足条件 标签将会删除
看见
躲猫猫
优秀
v-if v-else
<body>
<div id="app">
<div v-if="isVip">欢迎会员div>
<div v-else>请充值div>
div>
<script>
var app = new Vue({
el: "#app",
data: {
isVip: false
},
});
script>
body>
v-if v-else -if v-else -if v-else
<body>
<div id="app">
<h1>v-else可以不写条件v-if= v-else-if h1>
<div v-if="score>=90">优秀!!div>
<div v-else-if="score>=70">良好!!div>
<div v-else-if="score>=60">及格!!div>
<div v-else="score<60">不及格!!div>
div>
<script>
var app = new Vue({
el: "#app",
data: {
score: 100
},
});
script>
body>