内容导读
- vue3的安装与配置
- vue3基本语法与常用指令
- vue方法、计算属性与监听器
- 表单元素的数据绑定
一、vue.js的安装与配置
1. vue.js的简介与作用
vue.js读作为[vju:]与view读音相似,它也是一个js库,用于实现前端单页应用,以移动端优先的原则设计app应用,最主要要的功能是实现各种网页设计之外,能够方便地加载数据并进行渲染。
比如:不需要我们显式地找网页中的元素,而是通过vue.js的一系列指令直接操作网页中的元素
关开vue版本:vue2.0(2013年底将不再更新),目前流行vue3.0版本
2. vue环境配置
(1)直接导入外部的依赖,实现vue.js网页的开发
比如:
<script scr="https://unpkg.com/vue@3/dist/vue.global.js"></script>
(2)使用类似于v-if或v-for等指令完成前端网页
说明:请下载专门前端开发工具HBuilder,或webstorm/sumline
二、vue3的基本语法与常用指令
- 基本语法,使用步骤
直接导入网络上的vue3的依赖-》生成Vue指定对象createApp-》使用对象调用Vue的构造方法,设置变量的值,最后通过mount方法挂载网页中的元素。
2. 常用六种指令
v-if:条件指令
v-html:插值指令
v-show:显示指令
v-for:循环指令
v-bind:属性绑定指令
v-on:事件指令
2.1 vue3的基本语法(使用格式)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue初步应用</title>
</head>
<body>
<h2>1.vue的两插值(加载文本或网页标签)</h2>
<!-- (1)直接通过vue的表达式输出语句加载内容 -->
<h3 id="app">
{
{200+300}}
 
{
{money}}
{
{msg}}
</h3>
<h3 id="app1">
<p v-html="face"></p>
<p v-html="msg"></p>
</h3>
</body>
<!--1导入vue.js的依赖-->
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<!--2.生成一个vue.js的对象,指定此对象绑定的元素-->
<script>
//3.1 创建一个vue实例,名字必须是系统指定的对象名{createApp}
const {createApp} = Vue;
//通过app对象调用有参构造方法
createApp({
data() {
return {
money: 99888,
msg: '我就是我',
}
}
//必须直接挂载前端需要渲染的元素
}).mount("#app");
//可以调用vue对象来扩展功能
//createApp
//3.2 再挂其它元素
createApp({
data(){
return{
face:"<i style='color:red'>98</i>",
msg:'一片冰在玉壶!'
}
}
}).mount("#app1")
</script>
</html>
2.2 vue3 常用指令(渲染数据)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue常用指令</title>
</head>
<body>
<h3>1.v-html,加载网页内容</h3>
<h3>2.v-if,条件判断</h3>
<div id="app1">
<p v-if="flag">
{
{msg}}
</p>
</div>
<div id="app2">
<p v-for="name in arr">
<!-- {
{name}} -->
<span v-html="name"></span>
</p>
</div>
<h3>3.v-bind,属性的管理</h3>
<div id="app3">
<a v-bind:href="">走你</a>
<!--可以简写为这样-->
<a :href="">走你</a>
<img v-bind:src="">
<!--可以简写为这样-->
<img :src="">
</div>
<h3>4.v-on指令,事件管理</h3>
<div id="app4">
<p>{
{poem}}</p>
<!-- v-on绑定单击事件,可以简写为@click="play()"-->
<input type="button" value="点我" v-on:click="play()">
</div>
</body>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<script>
// 生成vue实例
const {
createApp
} = Vue;
//1.通过实例加载数据
createApp({
data() {
return {
flag: false,
msg: "不错哦"
}
}
}).mount("#app1")
//2.重新挂载元素,遍历数组对象
createApp({
data() {
return {
arr: ['tom', 'bean', 'mary', 'nick', 'alig']
}
}
}).mount("#app2")
//3.重新挂载元素,实现事件管理
createApp({
//声明全局变量
data() {
return {
poem:"一江春水向东流",
n:1
}
},
methods:{
// 方法的定义
play:function(){
if(this.n==1){
this.poem='万水千山总是情';
this.n=2;
}else if(this.n==2){
this.poem='一江春水向东流';
this.n=1;
}
}
}
}).mount("#app4")
</script>
</html>
三、vue方法声明与调用
在vue中处理复杂的逻辑的时候,我们经常使用计算属性、方法及监听器。
- methods:方法:它们是挂载在Vue对象上的函数,通常用于做事件处理函数,或自己封装的自定义函数。
- computed:计算属性:在Vue中,我们可以定义一个计算属性,这个计算属性的值,可以依赖于某个data中的数据。或者说:计算属性是对数据的再加工处理。
- watch:监听器:如果我们想要在数据发生改变时做一些业务处理,或者响应某个特定的变化,我们就可以通过监听器,监听数据的变化,从而做出相应的反应。
3.1 methods 方法
在使用vue的时候,可能会用到很多的方法,它们可以将功能连接到事件的指令,甚至只是创建一个小的逻辑就像其他函数一样被重用。接下来我们用方法实现上面的字符串反转。
<body>
<div id="app">
<p>原数据:{
{msg}}</p>
<p>新数据:{
{reversedMsg()}}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
msg: 'hello world!'
}
},
methods: {
reversedMsg() {
return this.msg.split('').reverse().join('');
}
}
}).mount('#app');
</script>
</body>
虽然使用computed和methods方法来实现反转,两种方法得到的结果是相同的,但本质是不一样的。
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变的时候才会重新求值,这就意味着只要message还没有发生改变,多次访问reversedMessage计算属性立即返回的是之前计算的结果,而不会再次执行计算函数。
而对于methods方法,只要发生重新渲染,methods调用总会执行该函数。
如果某个computed需要的遍历一个极大的数组和做大量的计算,可以减小性能开销,如果不希望有缓存,则用methods。
课堂练习:
使用Vue计算属性实现统计该字符串的字符数量并截取字符串前2位字符。
3.2 computed 计算属性
计算属性是根据依赖关系进行缓存的计算,并且只在需要的时候进行更新。
<body>
<div id="app">
<p>原数据:{
{msg}}</p>
<p>新数据:{
{reversedMsg}}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
msg: 'hello world!'
}
},
computed: {
reversedMsg() {
return this.msg.split('').reverse().join('');
}
}
}).mount('#app')
</script>
</body>
一个案例:根据商品数量修改总价
<body>
<div id="app">
<table width="100%" style="text-align: center;">
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>合计</th>
</tr>
<tr>
<td>1</td>
<td>小米10</td>
<td>{
{price}}</td>
<td>
<button @click="subtract">-</button>
{
{quantity}}
<button @click="add">+</button>
</td>
<td>{
{totalPrice}}</td>
</tr>
</table>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
price:2999,
quantity:1
}
},
computed:{
totalPrice(){
return this.price*this.quantity;
}
},
methods:{
add(){
this.quantity++;
},
subtract(){
this.quantity--;
}
}
}).mount('#app')
</script>
</body>
另一个案例:对数据进行过滤处理。
<body>
<div id="app">
{
{moneyStr}}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
money: 100
}
},
computed:{
moneyStr(){
return this.money + '¥'
}
}
}).mount('#app')
</script>
</body>
3.3 watch 监听器
watch能够监听数据的改变。监听之后会调用一个回调函数。
此回调函数的参数有两个:
- 更新后的值(新值)
- 更新前的值(旧值)
3.3.1 监听基本数据类型
下面使用watch来监听商品数量的变化。如果商品数量小于1,就重置成上一个值。
<body>
<div id="app">
<table width="100%" style="text-align: center;">
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>合计</th>
</tr>
<tr>
<td>1</td>
<td>小米10</td>
<td>{
{price}}</td>
<td>
<button @click="subtract">-</button>
{
{quantity}}
<button @click="add">+</button>
</td>
<td>{
{totalPrice}}</td>
</tr>
</table>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
price: 2999,
quantity: 1
}
},
computed: {
totalPrice() {
return this.price * this.quantity;
}
},
methods: {
add() {
this.quantity++;
},
subtract() {
this.quantity--;
}
},
watch:{
quantity(newVal,oldVal){
console.log(newVal,oldVal);
this.quantity = newVal<=0?oldVal:newVal
}
}
}).mount('#app')
</script>
</body>
3.3.2 深度监听
上面的例子中,监听的简单的数据类型,数据改变很容易观察,但是当需要监听的数据变为对象类型时,上面的监听方法就失效了。
因为上面的简单数据类型属于浅度监听,对应的对象类型就需要用到深度监听,只需要在上面的基础上加上deep: true就可以了。
<body>
<div id="app">
<table width="100%" style="text-align: center;">
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>合计</th>
</tr>
<tr>
<td>1</td>
<td>小米10</td>
<td>{
{goods.price}}</td>
<td>
<button @click="subtract">-</button>
{
{goods.quantity}}
<button @click="add">+</button>
</td>
<td>{
{totalPrice}}</td>
</tr>
</table>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
goods:{
price: 2999,
quantity: 1
}
}
},
computed: {
totalPrice() {
return this.goods.price * this.goods.quantity;
}
},
methods: {
add() {
this.goods.quantity++;
},
subtract() {
this.goods.quantity--;
}
},
watch:{
goods:{
handler(newVal,oldVal){
/**
* 注意:虽然使用深度监听,可以监听到对象的改变。
* 但是,由于是对象类型,所以newVal与oldVal都指向同一个对象。
* 所以,newVal与oldVal中的quantity都是改变后的新值。
*/
console.log(newVal,oldVal);
this.goods.quantity = newVal.quantity<=0?oldVal.quantity:newVal.quantity;
},
deep:true //深度监听
}
}
}).mount('#app')
</script>
</body>
- 上面代码中,由于监听的是对象类型,所以newVal与oldVal都指向同一个对象。
- 所以,在深度监听对象时,是不能正确获取更新前的对象和更新后的对象的。
解决方案:利用计算属性将对象变成字符串后再监听。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
商品名称:{
{goods.name}}; 数量:
<button @click="sub">-</button>{
{goods.quantity}}<button @click="add">+</button>
<br>
总价:{
{total}}
</div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
data() {
return {
goods:{
name: '小米手机',
quantity: 1
}
}
},
computed:{
total(){
return this.goods.quantity*100;
},
goodsStr(){ //这里新添加一个计算属性,将对象转变为字符串
return JSON.stringify(this.goods);
}
},
methods:{
add(){
this.goods.quantity++;
},
sub(){
this.goods.quantity--;
}
},
watch:{
goodsStr(newVal,oldVal){ //这里不再监听对象,而是监听字符串,就不用深度监听
let newGoods = JSON.parse(newVal);
let oldGoods = JSON.parse(oldVal);
this.goods.quantity = newGoods.quantity<=0?oldGoods.quantity:newGoods.quantity;
}
}
}).mount('#app');
</script>
</body>
</html>
四、Vue表单数据绑定
v-bind实现了数据的单向绑定,将vue实例中的数据同元素属性值进行绑定,接下来看一下vue中的数据双向绑定v-model。
1. 网页代码
<h3>1.双向数据绑定v-model</h3>
<!-- v-model主要用于输入框标签 -->
<div id="app">
<!--input标签使用v-model指令,用于双向渲染数据-->
<!--v-model用于给后端传数据,通过ajax传递-->
<input type="text" v-model="name">
<p v-html="name"></p>
<p>
{
{name}}
</p>
</div>
2. JS代码
//一、vue指令v-model的用法
//1.生成vue的实例
const {
createApp
} = Vue;
let app = createApp({
data() {
return {
//声明变量
name: 'tom'
}
} //data
})
//2.app实例挂载元素
app.mount('#app')
更多精彩内容请持续关注本站!