1.Vue基础(@事件名+v-show+created+v-bind)
javaScript渐进式框架,方便操作页面的数据,显示数据。
·
Vue基础
文章目录
一.Vue简介
1.定义:
javaScript渐进式框架,方便操作页面的数据,显示数据
2.特点:
- 响应式编程,页面的数据和js的数据是互相绑定的,当其中一个值发生变化,对应的值也会变化
- 组件化,可以把页面元素功能封装起来(java的方法)
3.建立vue程序步骤
-
引入vue.js文件
<!-- 引入js文件 --> <!-- 第一步:引入vue.js文件 第二步:在body中定义div容器,并且绑定id 作用 (展示数据) 第三步:定义vue对象作用(定义数据,操作数据) 写vue的目的:定义数据,操作数据,显示数据 --> <script src="../js/vue.js"></script>
-
html>>body中声明元素
<div id="app"> <!-- 插值表达式{{属性名}},直接获取的是数据第一级的 --> {{name}} <span>{{person.id}}</span> <!-- 三元表达式 ,sex==1就是男,否则就是其他--> <h3>{{person.sex==1?"男":"其他"}}</h3> <!-- 通过下标索引拿到具体对象>>属性 --> <h3>{{cars[0].engine}}</h3> </div>
-
script标签内声明vue对象
<script> // 申明一个数组array let arr = [{ name: "arrn", age: 18 }, { name: "jerry", age: 19 }] console.log(arr[1].name);//通过下标获取具体数组内容 // 申明一个对象 let obj = { id: 1, name: "Arran", age: 18 } console.log(obj.name); // 控制台输出 console.log(1111); new Vue({ el: "#app", //element指定vue对象操作的元素 data: {//声明数据 name: "hello!!!", person: { id: 1, name: "arran", age: 18, sex: 1 }, cars: [{ brand: "大众", engine: "200cc" }] }, methods: {//定义方法,操作数据 } }) </script>
vue对象作用域范围: Array, object,string…
二.Vue的常用指令
this指向vue对象
1.v-text和v-html
<div v-html="sex1"></div>
-
v-text:更新数据内容,直接更新文本
sex1:"女" //输出女
-
v-html: 替换文本同时会解析html标签
sex1: '<span style="color: red">男</span>' //输出: 男(红色)
2.v-show
和v-if显示和隐藏数据
- v-show是css样式控制display
- v-if是删除dom元素
<div id="app">
<!-- v-show="flag" 属性值为true则显示否隐藏 -->
<!-- v-show和v-if区别: 1.show使用css样式隐藏,适用频繁调用;2.if使用注释删除 -->
<img v-show="flag" src="../img/on.png" alt="" width="200px" height="200px">
<img v-if="flag" src="../img/on.png" alt="" width="200px" height="200px">
<button @click="btn">显示|隐藏</button>
</div>
<script>
new Vue({
el: "#app",
data: {
flag: true
},
methods: {
btn() {
//this指向vue对象
this.flag = !this.flag
}
}
})
</script>
3.v-on和@事件名
触发事件
click: 点击一次; 当鼠标点击,触发事件 dblclick: 双击;当鼠标双击,触发事件 focus: 获取焦点; 当得到了光标,触发事件 blur: 失去焦点; 当失去了光标,触发事件 mouseover:鼠标移至; 鼠标移至某标签上方,触发事件 monseenter mouserout:鼠标移出; 鼠标移出某标签上方,触发事件 keyup:键盘按下; 键盘按下,触发事件 input 内容发生改变
<div id="app">
<button @click="sub">-</button>
//插值表达式
{{num}}
<button @click="add">+</button>
</div>
<script>
new Vue({
// 获取页面元素,#app选择器
el: "#app",
data: {
num: 30
},
methods: {
add() {
// this指当前的Vue对象
this.num++
},
sub() {
this.num--
}
},
})
</script>
4.v-bind设置元素属性
<!--点击图片更换图片,类似开关操作-->
<div id="app">
<!-- v-bind:src="imgSrc"可省略 不写 v-bind -->
<!-- 点击图片触发事件change -->
<img :src="imgSrc" @click="change" alt="" width="200px" height="200px">
</div>
<script>
new Vue({
el: "#app",
data: {
imgSrc: "../img/on.png"
},
methods: {
change() {//点击触发事件
if (this.imgSrc == "../img/on.png") {
this.imgSrc = "../img/off.png"
} else {
this.imgSrc = "../img/on.png"
}
}
}
})
</script>
5.created
页面加载运行的代码块
页面加载就执行的代码块置于created()方法内
// 页面加载时执行,每隔1s执行一次sub()
created() {
//每隔1s执行一次sub()方法
//传递函数名(而不是函数调用)给另一个函数时,方法名后去掉()
setInterval(this.sub, 1000)
}
6.v-for
遍历数组,对象,字符串
<!--i表示数组的下标|索引-->
<tr v-for="(good,i) in goods">
<td>{{i+1}}</td>
<td>{{good.code}}</td>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<!--三元表达式-->
<td>{{good.status==0?"下架":"上架"}}</td>
<td>
<button>更新</button>
<!-- 点击删除,拿到对象索引 -->
<button @click="delGood(i)">删除</button>
</td>
</tr>
<script>
new Vue({
el: "#app",
data: {
name: "",
goods: [
{ id: 1, code: 1001, name: "苹果", price: 13, status: 1 },
{ id: 2, code: 1002, name: "香蕉", price: 13, status: 1 },
{ id: 3, code: 1003, name: "西瓜", price: 13, status: 0 },
{ id: 4, code: 1004, name: "梨子", price: 13, status: 1 }
]
},
methods: {
queryGood() {
//申明新数组接受查询对象
let newArr = []
//遍历数组
this.goods.forEach(e => {//e表示数组中每个对象
if (this.name == e.name) {
newArr.push(e)
this.goods = newArr
}
})
},
delGood(i) {
console.log(i);
// 根据下标删除数组内容,从下标i开始删1个
this.goods.splice(i, 1)
},
addGood() {
//跳转页面
location.href = "../view/demo0901Add.html"
}
}
})
</script>
7.v-model
双向绑定
输入框输入数据的同时插值表达式同时赋相同值
<body>
<div id="app">
<form>
<!--输入框输入数据的同时插值表达式同时赋值-->
<p>用户名:<input type="text" v-model="username">{{username}}</p>
<p>帐户:<input type="text" v-model="account"></p>
<p>密码:<input type="password" v-model="password"></p>
<p>电话:<input type="tel" v-model="phone"></p>
<p>邮箱:<input type="email" v-model="email"></p>
<p>性别:<label for="man">
<input type="radio" name="sex" id="man" value="m" v-model="sex">男</label>
<label for="wm">
<input type="radio" name="sex" id="wm" value="f" v-model="sex">女
</label>{{sex}}
</p>
<p>年龄:<input type="text" v-model="age"></p>
<p>创建日期:<input type="datetime" v-model="date"></p>
<input type="button" value="提交" @click="commit">
</form>
</div>
<script>
new Vue({
el: "#app",
data: {
username: "",
account: "",
password: "",
phone: "",
email: "",
sex: "",
age: "",
date: ""
},
methods: {
commit() {
console.log(`${this.username},${this.account},${this.password},${this.phone},${this.email},${this.sex},${this.age},${this.date}`);
}
},
created() {
}
})
</script>
</body>
mmit() {
console.log(${this.username},${this.account},${this.password},${this.phone},${this.email},${this.sex},${this.age},${this.date}
);
}
},
created() {
}
})
</script>
~~~更多推荐
已为社区贡献1条内容
所有评论(0)