2.VUE模板语法，属性，样式，事件绑定，事件修饰符

于 2021-05-17 21:18:02 发布
阅读量155 收藏
点赞数 1
分类专栏： VUE基础学习 文章标签： vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42881159/article/details/116948612
版权

一、概述

    Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
    Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
    结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

二、插值

1.文本

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：

<div id="app"> 
	<!--方法1--> 
	<h3>昵称：{{ username }}</h3> 
	<!--方法2--> 
	<h3>大区：<span v-text="area"></span></h3> 
	<!--方法3--> 
	<template> 
		<h3>段位：{{ rank }}</h3>
		 <h3>擅长英雄：{{ heros }}</h3> 
	</template> 
</div> 
var app = new Vue({ 
	el: "#app", 
	data: { 
		username: "蓉城丶木子李", 
		area:"微信1区 绚烂刀锋", 
		rank:"荣耀王者", 
		heros:"露娜、李白、诸葛亮、狄仁杰" 
		} 
});

在这里插入图片描述

2、Html

使用 v-html 指令用于输出 html 代码：

<div id="app"> 
	<div v-html="message">
</div> 
new Vue({ 
	el: "#app", 
	data: {
		 message: "<h1>Hello, world!</h1>" 
		 } 
	})

3、属性

使用 v-bind 指令用于绑定属性：

代码1：

<div id="app"> 
	<h1 v-bind:id="className"></h1>
</div>
new Vue({ 
	el: "#app",
	data: {
	 	className: "title" 
	 	} 
})
<!-- 显示结果 --> 
<div id="app"> 
	<h1 id="title"></h1> 
</div>

代码2：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue-2.4.0.js"></script>
    <style>
        .test1{
            background-color: #9acfea;
        }
        .test2{
            color: orange;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--v-bind 可以简写为冒号：-->
        <p v-bind:id="id" :title="title">你好，box</p>
        <!--v-bind指令支持js代码-->
        <p :title="title + '嘿嘿'">hello </p>
        <p :titlt="title.substr(0,2)">hello2</p>
        <hr>

        <p style="color: red">你好，小红</p>
        <!--一定要记住的点: v-bind中要么调用data里的属性名，要么自己写正确的js代码-->
        <p :style="{color:'red'}">你好，小红2</p>
        <p :style="style">你好，小红3</p>
        <p :style="style" :title="'vue 中控制属性'">你好，小红4</p>
        <!--true和false是表示布尔类型的关键字加了单引号则变成普通的字符串-->
        <input type="checkbox" :checked="true">
        <!--一次处理多个样式，用数组-->
        <p :style="[style,style2]">你好，小红5</p>

        <p class="test1 test2" id="pc"> 你好，小张</p>
        <p :class="['test1 test2']"> 你好，小张</p>
        <p :class="['test1',{'test2':false}]">你好，小张</p>
        <p :class="['test1',{'test2':flag}]">你好，小张</p>
        <p :class="classObj">你好，小张</p>
        <button type="button" v-on:click="toggle">切换样式</button>
    </div>
</body>
<script>
  new Vue({
     el:"#app",
     data:{
       id:"username",
       title:"你好世界",
         style:{
           color:'pink',
             'font-size':'30px',

         },
         style2:{
           'font-weight':'900',
         },
         flag:false,
         classObj:{
            'test1':false,
             test2:true,
         },

     },
      methods:{
         toggle(){
             // if (this.flag){
             //     this.flag = false;
             // }else {
             //     this.flag = true;
             // }
             this.flag=!this.flag;      //只有布尔类型可以怎样写
         }
      },

      created(){
         let pc = document.querySelector("#pc");
          console.log(pc.className);
          pc.classList.add('test3');
      }
  });
</script>
</html>

在这里插入图片描述

4、表达式

Vue.js 提供了完全的 JavaScript 表达式支持。

<div id="app"> 
	<template> 
		<p>{{num + 5}}</p> 
		<p>{{isRain ? "下雨了，出门记得带雨伞！" : "今天天气不错！"}}</p> 
		<p>{{str.split("").reverse().join("")}}</p> 
		<p v-text="'Hello, ' + name + ' !'"></p> 
	</template> 
</div> 
new Vue({ 
	el: '#app', 
	data: { 
		num: 5, 
		isRain: true, 
		str:"HELLO", 
		name: "木子李" 
	} 
})

三、指令、参数、修饰符

\1. 指令：指令是带有 v- 前缀的特殊属性。
\2. 参数：在指令后以冒号指明。
\3. 修饰符：是以 . 指明的特殊后缀，用于指出特殊何种方式定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue-2.4.0.js"></script>
</head>
<body>
  <div id="app">
    <div style="height: 200px;width: 200px;background-color: pink" @click="divClick">
      <p style="height: 100px;width: 100px;background-color: orange" @click="pClick">
        <!--.stop修饰符表示事件的冒泡到此为止（阻止事件冒泡）-->
        <button type="button" @click.stop="btnClick">阻止冒泡</button>
      </p>
    </div>
    <!--.capture 秀是否有表示事件捕获-->
    <div style="height: 200px;width: 200px;background-color: pink" @click.capture="divClick">
      <p style="height: 100px;width: 100px;background-color: orange" @click.capture="pClick">
        <!--.stop修饰符表示事件的冒泡到此为止（阻止事件冒泡）-->
        <button type="button" @click.capture="btnClick">捕获</button>
      </p>
    </div>

    <!--.prevent 修饰符默认默认行为-->
    <a href="https://baidu.com" target="_blank" @click.prevent="aClick">百度</a>

    <!--.self 修饰符表示只在自身触发-->
    <div style="height: 200px;width: 200px;background-color: pink" @click="divClick">
      <p style="height: 100px;width: 100px;background-color: orange" @click.self="pClick">
        <!--.stop修饰符表示事件的冒泡到此为止（阻止事件冒泡）-->
        <button type="button" @click="btnClick">.self</button>
      </p>
    </div>

    <!--.once 修饰符表示该事件只生效一次-->
    <!--修饰符可以组合使用-->
    <a href="https://baidu.com" target="_self" @click.prevent.once="aClick">百度</a>

  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{

    },
    methods:{
      aClick(){
        console.log("你点击了a标签");
      },
      divClick(){
        console.log("你点击的是div");
      },
      pClick(){
        console.log("你点击的是p");
      },
      btnClick(){
        console.log("你点击的是btn");
      }
    },
  })
</script>
</html>

在这里插入图片描述

四、用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue-2.4.0.js"></script>
</head>
<body>
<!--使用Vue外层一定要有一个包裹元素-->
<div id="app">
  <!--v-model表示数据双向绑定，v到M的双向绑定-->
  <!--v-model只能用在表单元素中-->
  <input type="text" id="username" name="username" v-model="msg" placeholder="请输入用户名">
  <!--vue取值法，双大括号，会自动从data中获取对应的值，取不到会none-->
  <!--属性中使用data中的值必须使用v-bind指令,无需双大括号-->
  <p id="text" v-on:click="show" v-bind:title="info">{{msg}}</p>
</div>
</body>
<script>
  /*1.创建一个Vue实例*/
  let vm = new Vue({
    el:"#app",          //指定数据绑定容器
    data:{              //设置Vue可操作的数据内容
      msg:"今天学习Vue",
      info:"别看我",
    },
    methods:{
      show:function (){
        alert("vue绑定的单击事件 ");
        this.msg="vue控制data的值";
      }

    }
  });
</script>
</html>

在这里插入图片描述

五、绑定事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue-2.4.0.js"></script>
</head>
<body>
  <div id="app">
    <button type="button" v-on:click="getCount">{{count}}</button>
    <button type="button" @click="getCount2">{{count2}}</button>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      count:0,
      count2:99,

    },
    methods:{
      getCount(){
        this.count=++this.count;
      },
      getCount2(){
        this.count2=--this.count2;
      },
    }
  });
</script>
</html>

点击会自动加和减

休息休息夏
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值