Vue的使用2
一、Js和Vue的使用比较
(一) 绑定元素
Js使用id或者标签名,来通过document.querySelector(“元素名”)来绑定。
1.1 静态绑定:vue使用 : 元素,来绑定,eg: :src
1.2 动态绑定:vue使用 data: { info:" " } 通过v-model来动态绑定标签元素,动态绑定时只能用在表单中。
<!-- v-model=“变量名” 控件值和变量互相影响-->
<input type="text" v-model="info">
<h1>{{info}}</h1>
<img :src="user.url" width="100px " alt="">
<hr>
<input type="text" placeholder="输入用户名" v-model="user.username">
<input type="text" placeholder="输入密码" v-model="user.password">
(二)事件绑定
Js使用 οnclick="f()" 来绑定事件。
Vue通过@click=“f()”或者 v-on:click="f1()">来绑定事件。
<!--vue中的onclick()-->
<input type="button" value="按钮1" @click="f()">
<input type="button" value="按钮2" v-on:click="f1()">
(三)方法和值的创建
Js使用 function f() { }在标签里直接创建方法和值。
Vue在Vue方法中创建方法,与data在同一级。
在创建值时与 let v 在同一级别: let num = parseInt(Math.random() * 100) + 1;
//创建值
let num = parseInt(Math.random() * 100) + 1;
let v = new Vue({
el: "body>div",
data: {
info:""
},
methods: {
f(){
alert("弹出了个内容2")
}
}
})
(四)创键对象
Js在标签下直接创建值 let i={ } //空对象
//1创建空对象
let p1 = {}
//创建对象并赋值
p1.name = "张三";
p1.age = 20;
//创建方法
p1.run = function () {
console.log(this.name + ":" + p1.age);
}
p1.run();
//2实例化自带属性和方法的对象
let p2 = {
name: "李四",
age: 10,
run: function () {
console.log(this.name + ":" + this.age);
}
}
p2.run();
}
创建数组
//3通过数组组装对象的方式分装列表数据
let arr = [
{title: "手机", pice: 21, saleCount: 2100},
{title: "水果", pice: 155, saleCount: 2},
{title: "鞋子", pice: 13, saleCount: 2020},];
//遍历数组(forof==foreach)
for (let product of arr) {//for(类型 变量名 of 遍历目标 )
//获取对象
let tr = document.createElement("tr");
let titleTd = document.createElement("td");
let priceTd = document.createElement("td");
let saleCountTd = document.createElement("td");
//将遍历数组的值传入列表
titleTd.innerText = product.title;
priceTd.innerText = product.pice;
saleCountTd.innerText = product.saleCount;
//td添加tr
tr.append(titleTd, priceTd, saleCountTd);
//获取table表并添加
let table = document.querySelector("table");
table.append(tr);
Vue创建对象和数组
data: {
//创建空对象
user{},
emp: {
name: "", salary: "", job: ""
}
arr: [
{name: "张三", salzry: 3000, job: "销售"},
{name: "李四", salzry: 3000, job: "人事"},
{name: "王五", salzry: 3000, job: "销售"}],
},
(五)vue循环遍历
<!--v-for循环遍历 ----->名字 in 循环数组 -->
<li v-for="name in arr" v-text="name"></li>
<tr v-for="(p,i) in persons">
<td>{{i + 1}}</td>
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.type}}</td>
</tr>
(六)
拼接字符串
input type="button" value="加" @click="f('+')">
<input type="button" value="减" @click="f('-')">
<input type="button" value="乘" @click="f('*')">
<input type="button" value="除" @click="f('/')">
f(x) {
//eval()此方法可以将此字符串以js代码的形式运行
v.text03=eval(v.text01+x+v.text02);
}
随机数
let num = parseInt(Math.random() * 100) + 1;
从数组删除
del(i) {
//从数组中删除元素 splice(起始下标,删除长度)
v.arr.splice(i,1);
}
添加到数组
f() {
//push()方法添加元素到数组中
v.arr.push({name: v.emp.name, salzry: v.emp.salary, job: v.emp.job})
}