VueJS学习笔记
分类:
IT文章
•
2022-07-27 16:10:11
一、基本用法
1、Vue.js 使用了基于 HTML 的模版语法
<html>
<header>
<title>vue.js 测试</title>
</header>
<body>
<div>
<h3 id="firstVue">
{{mydata}}
{{mydata2}}
<button>{{mydata3}}</button>
</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var myvue=new Vue({
el:"#firstVue",
data:{
mydata:"是大户大师的",
mydata2:"张三李四王五",
mydata3:"点击",
}
})
</script>
</body>
</html>
View Code
2、使用 v-html 指令用于输出 html 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container" style=" 100%;">
<div v-html="show"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vue=new Vue({
el:"#container",
data:{
show:"<h3>VueJS简明教程</h3>"
}
})
</script>
</body>
</html>
View Code
3、使用 v-model:
语法使用户的页面输入反向传递回vue实例变量
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container" style=" 100%;">
<input v-model="show" type="text"/>
<div v-html="show"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vue=new Vue({
el:"#container",
data:{
show:"<h3>VueJS简明教程</h3>",
}
})
</script>
</body>
</html>
View Code
4、HTML 属性中的值应使用 v-bind 指令。
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写:
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
以下实例判断 use 的值,如果为 true 使用 class1 类的样式,否则不使用该类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.showClass{
color: orange;
}
</style>
</head>
<body>
<div id="container">
<label>修改颜色</label><input type="checkbox" v-model="use"/>
<div v-bind:class="{'showClass':use}">
<h3>hell Word</h3>
</div>
<div v-html="show"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vue=new Vue({
el:"#container",
data:{
show:"<h3>VueJS简明教程</h3>",
use:''
}
})
</script>
</body>
</html>
View Code
判断是否选中,选中的话显示样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<label>修改颜色</label><input type="checkbox" v-model="use" />
<div v-bind:style="{'color': 'orange','display':use?'block':'none'}">
<h3>hell Word</h3>
</div>
<div v-html="show"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#container",
data: {
show: "<h3>VueJS简明教程</h3>",
use: false
}
})
</script>
</body>
</html>
View Code
v-bind:href 的使用,在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<a v-bind:href="href">hello Word</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#container",
data: {
href:"http://www.runoob.com"
}
})
</script>
</body>
</html>
View Code
5、if else 表达式支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container" style=" 100%;">
{{1+1}} <br/>
{{isCheck?'true':'false'}} <br/>
{{strs.split(',').join()}} <br/>
<div v-bind:id="'list'+id">你好 vue</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vue=new Vue({
el:"#container",
data:{
isCheck:true,
strs:'张三,李四,王五',
id:11
}
})
</script>
</body>
</html>
View Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<h3 v-if="Math.random()>0.5">这是第一条</h3>
<div v-else>
<a href="https://www.baidu.com">hello Word</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#container",
})
</script>
</body>
</html>
View Code
带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<h3 v-if="check1">这是第一条</h3>
<div v-if="check2">
这是第二条
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#container",
data: {
check1:true,
check2:true
}
})
</script>
</body>
</html>
View Code
6、v-bind:on 的使用,它用于监听 DOM 事件:
<a v-on:click="doSomething">
按钮的事件我们可以使用 v-on 监听事件,并对用户的输入进行响应。
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<h3>{{show}}</h3>
<button v-on:click="controlShow">控制反转</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#container",
data: {
show:'锄禾日当午!'
},
methods:{
controlShow:function(){
this.show=this.show.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
View Code
7、 我们也可以使用 v-show 指令来根据条件展示元素:
<h1 v-show="ok">Hello!</h1>
8、v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<ol>
<li v-for="item in arrays">
{{item.name}}
</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var arrays=[
{name:'张三',age:11},
{name:'李四',age:23},
{name:'王五',age:52},
];
var vue = new Vue({
el: "#container",
data:{
arrays:arrays
}
})
</script>
</body>
</html>
View Code
二、监听属性
1、watch 实现简单的计数器
<html>
<header>
<title>vue.js 测试</title>
</header>
<body>
<div>
<h3 id="firstVue">
计数器:{{total}}
<br/>
<button v-on:click=" total++ ">点击</button>
</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#firstVue",
data:{
total:1,
}
})
//监听 total 数值的变化
vm.$watch("total",function(after,before){
alert('计数器值的变化 :' + before + ' 变为 ' + after);
})
</script>
</body>
</html>
View Code
2、watch 实现简单的 米m 和 千米km 的转换。
<html>
<header>
<title>vue.js 测试</title>
</header>
<body>
<div>
<div id="container">
千米 : <input v-model.number="km" />
米 : <input v-model.number="m" />
</div>
<p id="info"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#container",
data: {
km: "0",
m: "0",
},
watch: {
m: function (val) {
this.m = val;
this.km = val / 1000;
},
km: function (val) {
this.km = val;
this.m = val * 1000;
}
}
})
//监听 total 数值的变化
vm.$watch("km", function (newValue, oldValue) {
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
})
</script>
</body>
</html>
View Code
三、事件处理
1、事件监听可以使用 v-on 指令:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<button v-on:click="say('hello')">点击</button>
<button v-on:click="say('你好')">点击</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#container",
methods:{
say:function(message){
if(message){
alert(message);
}
}
}
})
</script>
</body>
</html>
View Code
2、事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。
Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
-
.stop
- 阻止冒泡
-
.prevent
- 阻止默认事件
-
.capture
- 阻止捕获
-
.self
- 只监听触发该元素的事件
-
.once
- 只触发一次
-
.left
- 左键事件
-
.right
- 右键事件
-
.middle
- 中间滚轮事件
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名:
.enter
.tab
-
.delete
(捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta