在VUE中样式标签的种类非常繁多,今天抽空来整理一下,便于后期记忆\使用.
- 表示这是个头标签 ,里面是头信息内容
- 表示这是个主体标签,里面写主体内容
- 表示这是一个组件的定义,里面存放的是定义组件的内容
- 标签用于定义客户端脚本，比如 JavaScript,元素即可以包含脚本语句,也可以通过"src"属性指向外部脚本文件
- 表示这里面是添加的样式的标签
- {{差值表达式}} 内容为data对象的属性
- 是一个块级元素,这意味着它的内容自动地开始一个新行.实际上,换行是
元素应用class或id属性,但是更常见的情况只应用其中的一种,这两者之间的差异是,class用于元素组(类似的元素,或者可以理解为某一类元素),而id用于标识单独的唯一元素.
8.1
{{AAA}}
插值表达式,渲染之后再进行展示,不会出现大括号形式,要么是空白,要么是已渲染好页面,这样界面更优美
8.2
是以v-clock优化之后的效果展示
8.3 <h3 v-html-“html”>
v-html是指的是以html解析之后的形式进行展现
8.4
{{name}}
v-pre的属性指的是不需要进行处理,跳过渲染过程,跳过VUE的解析
8.5
{{once}}
v-once指的是元素只被解析一次,数据改变,内存当中改变,浏览器的展现不改变
- 按钮的名称表示这是一个可以点击的按钮,和button偶尔会结合使用的一个功能.stop,阻止该操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>防止冒泡事件练习</title>
</head>
<body>
<div id="app" @click="addNum">
{{num}}
<button v-on:click.stop="addNum">实现自增方法</button>
<!-- 简化写法 -->
<button @click.stop="addNum">自增方法实现</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
num: 100
},
methods:{
addNum(){
this.num++
}
}
})
</script>
</body>
</html>这里的运行结果是单击一下"自增方法实现"按钮,实现自增+1的操作,防止单击一次,上下两个addNum的方法都执行,这样就可以阻止冒泡事件的发生了.
拓展知识点:事件冒泡(由于操作过程中方法进行了嵌套关系,所以会触发冒泡机制,如果想要阻止冒泡事件,添加.stop方法可阻止冒泡事件)
- 跳转到的目标网站名称 这里的a标签表示标签定义超链接,用于从一个页面链接到另一个页面,标签元素最重要的属性是href属性,它指定链接的目标,在所有浏览器中,链接的默认外观如下:未被访问的连接有下划线而且是蓝色的;已被访问的连接带有下划线而且是紫色的;活动链接带有下划线而且是红色的.
可以在后面添加上@click方法这样链接上href属性即可以实现点击跳转的功能实现
<a href=“http://www.baidu.com” @click=“getMessage”>百度 getMessage里面可以添加上需要实现的功能
11.表示这是一个可以输入的输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="demo_form.php">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
</form>
<p>点击"提交"按钮,表单数据将被发送到服务器上的"demo-form"</p>
</body>
</html>按照菜鸟教程上面的这个案例测试运行一下结果如下:
标签规定了用户可以在其中输入数据的输入字段,元素在元素中使用,用来声明允许用户输入的input控件,输入字段可以通过多种方式改变,取决于type属性.
标签里面常用的属性name\type\value等,这里面用菜鸟教程写过的小案例来测试一下运行的结果.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input框的属性测试案例</title>
</head>
<body>
<form>
<input type="text" name="username" /><br />
<input type="submit" value="提交" />
<input type="button" value="点我" onclick="msg()" />
<!-- 输入类型：button,定义可以点击的按钮，在用户点击按钮时候启动一段JavaScript -->
<hr />
<input type="checkbox" name="vehicle[]" value="Bike"/> 我有一辆自行车<br />
<input type="checkbox" name="vehicle[]" value="car"/> 我有一辆小轿车<br />
<input type="checkbox" name="vehicle[]" value="Boat"/> 我有一艘船<br />
<!-- 输入类型：checkbox，复选框允许用户在一定数量的选择中选取一个或者多个选项 -->
<hr>
<input type="color" name="favcolor"/><br />
<!--输入类型：color 这个功能可以供您从拾色器中选择您喜欢的颜色 -->
<hr>
日期:<input type="date" name="bday" />
<!--输入类型：date 这个功能可以供您选择需要的日期:年月日 -->
<hr>
时间(日期和时间):<input type="datetime-local" name="bdaytime" />
<!--输入类型：datetime 这个功能可以供您选择需要的具体的：年月日时分秒的时间，时间颗粒度更细 -->
<hr />
本地时刻（日期和时间)：<input type="datetime-local" name="bdaytime" />
<!-- 输入类型：datetime-local,定义date和time控件（不带时区），和上一个控件注意区分-->
<hr >
生日(月和年)：<input type="month" name="bdaymonth">
<!-- 输入类型:month，定义month和year控件（不带时区和具体哪一天) -->
<hr >
E-mail： <input type="email" name="useremail" />
<!-- 输入类型：e-mail,定义用于e-mail地址的字段（当提交表单时候会自动对email字段的值进行验证 -->
<hr >
选择一个文件：〈<input type="file" name="img"/>
<!-- 输入类型：file,定义文件选择字段“浏览...”按钮，供文件上传 -->
<hr >
<input type="hidden" name="country" value="Norway" />
<!-- 输入类型：hidden：定义隐藏字段对于用户是不可见的，隐藏字段常常存储默认值，或者由JavaScript改变它们的值 -->
<hr>
<input type="image" src="./src/小美女.jpg" alt="Submit"/><br>
<!-- 输入类型：image，定义图像作为提交按钮 -->
数量(1到5之间):<input type="number" name="quantity" min="1" max="5" />
<!-- 输入类型:number 定义用于输入数字的字段(您可以设置接收数字的限制) -->
<hr>
请您输入密码:<input type="password" name="pwd"/>
<!-- 输入类型:password定义密码字段(密码字段中的字符会被遮蔽) -->
<hr />
您的性别是:<input type="radio" name="gender" value="male" />male
<input type="radio" name="gender" value="female"/>female
<!-- 输入类型radio: 允许用户在一定数量的选择中选取一个选项 -->
<hr />
您前的颜值等级为(1-10之间):<input type="range" name="points" min="1" max="10"/>
<!-- 输入类型:range 用于定义精确值不重要的输入数字的控件(比如slider控件).您也可以设置接收数字的限制 -->
<hr>
<input type="reset" />
<!-- 输入类型:reset ,定义重置按钮(重置所有表单值为默认值 -->
<hr />
<input type="submit" />
<!-- 输入类型:submit,定义提交按钮 -->
<hr />
请输入您的电话号码:<input type="tel" name="usrtel" />
<!-- 输入类型:电话号码 用于定义输入电话号码的字段 -->
<hr>
选择您的适合时间:<input type="time" name="usr_time"/>
<!-- 输入类型:time 定义用于输入时间的控件(不带时区) -->
<hr>
添加您的主页:<input type="url" :ref="http://www.baidu.com" name="homepage"/>
<!-- 输入类型:url 用于定义url输入的字段 -->
<hr >
请选择您要标记的周:<input type="week" name="week_year"/>
<!-- 定义week和year控件(不带时区) -->
</form>
</body>
</html>测试代码运行结果如下图:
12. 事件处理
我们可以用v-on指令来监听DOM事件,从而执行JavaScript代码.
v-on指令可以缩写为@符号
语法指令:v-on:click="methodName"或者简写为@click=“methodName”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件处理练习</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button @click="counter +=1">增加1</button>
<p>这个按钮被点击了{{ counter }}</p>
</div>
<script>
const app = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>把代码测试运行一下,得到的运行结果如下:
通常情况下,我们需要使用一个方法来调用JavaScript方法.V-on可以接受一个定义的方法来调用.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件处理练习</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button @click="counter +=1">增加1</button>
<p>这个按钮被点击了{{ counter }}次</p>
<!-- 'greet'是在下面定义的方法名字 -->
<button @click="greet">点我</button>
</div>
<script>
const app = {
data() {
return {
counter: 0,
name: '测试方法'
}
},
methods:{
greet(event){
//'methods'内部的'this'指向当前活动实例
alert('hello'+this.name+'!')
//'event'是原生DOM event
if(event){
alert(event.target.tagName)
}
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>测试一下,运行代码结果如下:
除了直接绑定到一个方法,也可以用内联JavaScript语句:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件处理练习</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button @click="say('hi小美女')">Say hi</button>
<button @click="say('WOOW小帅哥')">Say WOOW</button>
</div>
<script>
const app = {
data() {
},
methods:{
say(message){
alert(message)
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>运行的结果如下:
事件处理程序中可以有多个方法,这些方法之间由逗号间隔开来:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on事件处理中多个方法</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<!-- 这两个one()和two()执行按钮点击事件 -->
<button @click="one($event),two($event)">
点我
</button>
</div>
<script>
const app = {
data(){
},
methods: {
one(event){
alert("第一个事件处理器逻辑")
},
two(event){
alert("第二个事件处理器逻辑")
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>运行测试代码结果如下:
事件修饰符:
Vue.js为V-on提供了事件修饰符来处理DOM事件细节,例如:event.preventDefault()或者event.stopProgagation().
Vue.js通过由.表示指令后缀来调用修饰符
.stop -阻止冒泡
.prevent -阻止默认事件
.capture -阻止捕获
.selef -只监听触发该元素的事件
.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>
<!-- click事件只能点击一次 -->
<a v-on:click.once="doThis"></a>按键修饰符:
Vue允许为V-on在监听键盘事件添加为修饰符,这件可以再按下某个键盘键之后执行某个方法.
<!-- 即使alt或者shift被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有ctrl被按下的时候才会触发 -->
<button @click.ctrl.exact="onCtrlClick">B</button>
<!-- 没有任何系统修饰符被按下的时候才会触发 -->
<button @click.exact="onClick"></button>来写一个课堂上的小案例测试运行一下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按键修饰符测试案例练习</title>
</head>
<body>
<div id="app">
<input type="text" name="name" @keyup.enter="handler1" value="按下回车键有效" />
<input type="text" name="name" @keyup.left="handler2" value="按下左键有效" />
<input type="text" name="name" @keyup.space="handler3" value="按下空白键有效" />
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
},
methods: {
handler1() {
console.log("按键机制触发")
},
handler2() {
console.log("按左键有效")
},
handler3() {
console.log("按下空格键有效")
}
}
})
</script>
</body>
</html>测试代码运行执行效果如下:
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
