Vue模板语法（理解前端渲染）

最新推荐文章于 2023-04-19 23:51:40 发布
最新推荐文章于 2023-04-19 23:51:40 发布
阅读量429 收藏
点赞数
分类专栏： 2022Vue学习笔记 文章标签： vue.js 前端 javascript VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Blue54/article/details/124624485
版权

目录

如何理解前端渲染：

前端渲染方式：

1.原生js拼接字符串：

2.使用前端模板引擎

​ 模板语法概括：

指令？

​ v-cloak解决闪动问题。​

 数据绑定指令

数据响应式：

双向数据绑定：

事件绑定：

 事件修饰符：

 按键事件修饰符：

 自定义按键修饰符：

属性绑定：

样式绑定：

样式绑定之class绑定对象用法：

 样式绑定之class绑定数组用法：

样式绑定之style绑定用法

 分支结构

循环结构-遍历数组：

 循环结构-遍历对象

如何理解前端渲染：

前端渲染方式：

1.原生js拼接字符串：

 

2.使用前端模板引擎

 模板语法概括：

指令？

 v-cloak解决闪动问题。

 数据绑定指令

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		[v-cloak]{
			dispaly:none;
		}
	</script>
</head>
<body>
	<div id="app">
		<div v-cloak>{{msg}}</div>
		<div v-text='msg'></div>
		<div v-html='msg1	'></div>
		<div v-pre>{{msg}}</div>
	</div>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
		// v-cloak指令的用法
		// 1·提供样式
		// [v-cloak]{
		// 		display:none;
		// }
		// 2·在插值表达式所在的标签中添加v-cloak指令
		// 背后的原理：先通过样式隐藏内容，然后在内存中进行值得替换，替换好之后再显示最终得结果
		var vm = new Vue({
			el:'#app',
			data: {
				msg:'hello Vue',
				msg1:'<h1>html</h1>',

			}
		})
	</script>
</body>
</html>

数据响应式：

 

 

双向数据绑定：

 

 

 

事件绑定：

 

 更新：

 

 

 事件修饰符：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{num}}</div>
    <div v-on:click='handle0'>
      <button v-on:click.stop='handle1'>点击1</button>
    </div>
    <div>
      <a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-事件修饰符
    */
    var vm = new Vue({
      el: '#app',
      data: {
        num: 0
      },
      methods: {
        handle0: function(){
          this.num++;
        },
        handle1: function(event){
          // 阻止冒泡
          // event.stopPropagation();
        },
        handle2: function(event){
          // 阻止默认行为
          // event.preventDefault();
        }
      }
    });
  </script>
</body>
</html>

 按键事件修饰符：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <form action="">
      <div>
        用户名：
        <input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
      </div>
      <div>
        密码：
        <input type="text" v-on:keyup.f1='handleSubmit' v-model='pwd'>
      </div>
      <div>
        <input type="button" v-on:click='handleSubmit' value="提交">
      </div>
    </form>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-按键修饰符
    */
    Vue.config.keyCodes.f1 = 113
    var vm = new Vue({
      el: '#app',
      data: {
        uname: '',
        pwd: '',
        age: 0
      },
      methods: {
        clearContent:function(){
          // 按delete键的时候，清空用户名
          this.uname = '';
        },
        handleSubmit: function(){
          console.log(this.uname,this.pwd)
        }
      }
    });
  </script>
</body>
</html>

 自定义按键修饰符：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-on:keyup.aaa='handle' v-model='info'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-自定义按键修饰符
      规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
    */
    Vue.config.keyCodes.aaa = 65
    var vm = new Vue({
      el: '#app',
      data: {
        info: ''
      },
      methods: {
        handle: function(event){
          console.log(event.keyCode)
        }
      }
    });
  </script>
</body>
</html>

属性绑定：

 

​
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <a v-bind:href="url">百度</a>
    <a :href="url">百度1</a>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      属性绑定
    */
    var vm = new Vue({
      el: '#app',
      data: {
        url: 'http://www.baidu.com'
      },
      methods: {
        handle: function(){
          // 修改URL地址
          this.url = 'http://itcast.cn';
        }
      }
    });
  </script>
</body>
</html>

​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <input type="text" v-bind:value="msg" v-on:input='handle'>
    <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
    <input type="text" v-model='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-model指令的本质

    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
      methods: {
        handle: function(event){
          // 使用输入域中的最新的数据覆盖原来的数据
          this.msg = event.target.value;
        }
      }
    });
  </script>
</body>
</html>

样式绑定：

样式绑定之class绑定对象用法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active {
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
    .error {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:class="{active: isActive,error: isError}">
      测试样式
    </div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定

    */
    var vm = new Vue({
      el: '#app',
      data: {
        isActive: true,
        isError: true
      },
      methods: {
        handle: function(){
          // 控制isActive的值在true和false之间进行切换
          this.isActive = !this.isActive;
          this.isError = !this.isError;
        }
      }
    });
  </script>
</body>
</html>

 样式绑定之class绑定数组用法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active {
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
    .error {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:class='[activeClass, errorClass]'>测试样式</div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定

    */
    var vm = new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'error'
      },
      methods: {
        handle: function(){
          this.activeClass = '';
          this.errorClass = '';
        }
      }
    });
  </script>
</body>
</html>

样式绑定之style绑定用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
</head>
<body>
  <div id="app">
    <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
    <div v-bind:style='objStyles'></div>
    <div v-bind:style='[objStyles, overrideStyles]'></div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定之内联样式Style：
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        borderStyle: '1px solid blue',
        widthStyle: '100px',
        heightStyle: '200px',
        objStyles: {
          border: '1px solid green',
          width: '200px',
          height: '100px'
        },
        overrideStyles: {
          border: '5px solid orange',
          backgroundColor: 'blue'
        }
      },
      methods: {
        handle: function(){
          this.heightStyle = '100px';
          this.objStyles.width = '100px';
        }
      }
    });
  </script>
</body>
</html>

 分支结构

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
</head>
<body>
  <div id="app">
    <div v-if='score>=90'>优秀</div>
    <div v-else-if='score<90&&score>=80'>良好</div>
    <div v-else-if='score<80&&score>60'>一般</div>
    <div v-else>比较差</div>
    <div v-show='flag'>测试v-show</div>
    <button v-on:click='handle'>点击</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      分支结构

      v-show的原理：控制元素样式是否显示 display:none
    */
    var vm = new Vue({
      el: '#app',
      data: {
        score: 10,
        flag: false
      },
      methods: {
        handle: function(){
          this.flag = !this.flag;
        }
      }
    });
  </script>
</body>
</html>

循环结构-遍历数组：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
</head>
<body>
  <div id="app">
    <div>水果列表</div>
    <ul>
      <li v-for='item in fruits'>{{item}}</li>
      <li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
      <li :key='item.id' v-for='(item, index) in myFruits'>
        <span>{{item.ename}}</span>
        <span>-----</span>
        <span>{{item.cname}}</span>
      </li>

    </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      循环结构-遍历数组
    */
    var vm = new Vue({
      el: '#app',
      data: {
        fruits: ['apple', 'orange', 'banana'],
        myFruits: [{
          id: 1,
          ename: 'apple',
          cname: '苹果'
        },{
          id: 2,
          ename: 'orange',
          cname: '橘子'
        },{
          id: 3,
          ename: 'banana',
          cname: '香蕉'
        }]
      }
    });
  </script>
</body>
</html>

 循环结构-遍历对象

 

Ciwei蓝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue微博发布案例
Dread_Lord9的博客
09-16 595
{ uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },{ uname: '司马懿', imgSrc: './images/9.5/01.jpg' },{ uname: '安其拉', imgSrc: './images/9.5/07.jpg' },{ uname: '老夫子', imgSrc: './images/9.5/15.jpg' },{ uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
day01-Vue模板语法.zip
01-17
在"day01-Vue模板语法.zip"这个压缩包中，我们可以预见到内容可能涵盖了Vue的基础模板语法教程，这对于初学者或者想要深入理解Vue的开发者来说是非常宝贵的资源。 Vue模板语法是Vue.js的一个核心特性，它允许开发者...
前端之vue条件渲染、列表渲染
weixin_46372074的博客
04-25 1342
vue条件渲染、列表渲染条件渲染列表渲染v-for遍历数组keykey的选择v-for遍历对象遍历字符串遍历指定次数列表过滤列表排序 条件渲染 v-if 值为false，v-if在的标签直接在HTML文档中删除； v-show值为false，v-show在的标签display的值为none。 v-if=“表达式” // 表达式就是会返回一个值，此处要能转换为Boolean值。 template标签最大的好处是不影响文档的结构，渲染时会将template标签去掉 template只能和v-if配合使用
用vue方法实现仿发微博的
li_xinghua的博客
07-07 931
用vue方法实现简单的仿发微博功能 展示效果图： ** 代码 ** 在这里插入代码片 Document
Vue.js的模板渲染
qq_41617901的博客
05-22 179
Vue：{{ data }}：模板 / 绑定 / 渲染 / 响应式
手写vue（三）模板渲染解析
最新发布
ZepngLin的博客
04-19 887
vue是如何重新解析，并且生成新的DOM对象的呢？ 1、模板解析 2、生成渲染函数 3、生成虚拟dom 4、生成真实dom，替换Vue容器
前端框架Vue基础语法笔记
01-20
在Vue中，我们可以使用 `data()` 方法来定义数据，然后使用模板语法来绑定数据。例如： ```html // 创建Vue实例 Vue.createApp({ data() { return { text: "Hello World!" } }, template: '<div>{{text}}...
vue管理系统前端模板源码.zip
11-14
2. **声明式渲染**：Vue.js的模板语法允许开发者通过声明式的方式来描述UI如何与数据绑定。这使得代码更具可读性，并降低了出错的可能性。 3. **组件化**：Vue.js的强大之处在于它的组件系统。你可以将UI拆分成可...
vue3的前端规范.zip
05-23
4. **模板语法更新**: Vue3模板语法保留了原有的基础，但也进行了一些调整。例如，`v-if`和`v-for`现在更推荐在模板中使用，而不是在指令中，以提高性能。同时，增加了`teleport`指令，可以将元素渲染到DOM树的其他...
vue前端开发实战PPT
01-25
**第2章 Vue模板应用**: Vue的模板语法是其易于学习和使用的关键之一。这一章可能讲解如何在模板中声明变量、条件语句、循环以及其他指令，以实现动态内容渲染。 **第3章 Vue组件的属性和方法**: 组件是Vue的核心...
Vue某人At某人仿新浪微博某人user艾特艾特某人
08-12
Vue@某人，At某人，仿新浪微博@某人，@user，艾特，艾特某人
基于中文微博特征主题模型的热点话题提取
03-03
基于中文微博特征主题模型的热点话题提取
Vue——模板语法
hulin的博客
03-30 1166
Vue的模板语法
Vue指令，基本语法与渲染
LisnmX的博客
10-07 477
v–show指令：动态的显示与隐藏，v-show指令后接布尔值，与v-if差别：v-if动态删除后代码块中不会在显示语句，而v-show隐藏后依旧存在。v-html指令：v-html是渲染为html。v-if指令、 v-else指令：v-if指令动态创建或删除，v-else指令只能搭配v-if一起使用，两者之后都只能接布尔值；运用基本指令来渲染页面，如：v-for指令遍历数组中的元素来渲染进页面中，v-on指令绑定事件渲染页面。1、v-if 与 v-else、v-else-if 的混合使用渲染页面。
vue 网页文字中带#的话题颜色高亮
weixin_30398227的博客
11-02 292
网页中显示文字时，带#开始和结束的文字蓝色高亮，就像微博话题一样效果如下 html &lt;span v-html="parseComments('#吃货节#有什么好吃的')"&gt;&lt;/span&gt; // 方法里面可以是变量，这里只是个演示 js parseComments (value) { var exp exp = /(#|＃...
初识vue.js (一)
weixin_42345223的博客
09-12 104
1、Vue.js：渐进式javaScript框架 官网的说明还是有点让人摸不着头脑，我理解的所谓的渐进式就是：你想怎么用就怎么用，vue提供了一整套开发方案，供设计者选择，你可以只用一部分，（表单验证），或者整个项目都用vue,采用webpack vue-router方案，对于更大型的项目，采用vuex 处理数据在组件之间的流动，不同的需求，对应不同的方案，一层一层，供不同阶层的用户选择 Vue采用的是数据的响应式，也就是数据绑定， 2、指令 v-cloak: 用于解决插值表达式中存在闪动的问
【面试】前端基础（三）
MarronBan的博客
03-05 88
JavaScript 数据类型 基本数据类型 Number String Boolean Undefined Symbol 引用数据类型 Object Array Function Map Set Null 如何判断数据类型 typeof 能判断所有的值类型，能识别引用类型 let a =>undefined let b = 1 =>number let c = 'c' =>string let d = true => boolean let e = Symbol('e') =&
Vue PC端@功能实现
qq_38211205的博客
04-22 3102
一：前言 近期需要接到一个需求，需要在输入框中实现@通知用户的功能，这个功能现在也有很多应用都有，像我们常用的QQ空间，微博这些，开始看到这个需求，心里一阵惊恐，没做过啊~~ 二：思路 我们大体的思路就是：当监听到用户输入@的时候我们弹出人员选择器，这时候我们需要记住现在光标所在的位置，当用户选择人员完毕之后，我们创建一个span标签在插入到我们刚刚记录光标的位置，并且把我们输入的@删除，将光标放在这个节点的最后。 三：需求拆解 按住shift + @ 的时候，弹出人员选择器 人员选择器要跟随光标的位置出现
如何通过Vue实现@人的功能
嘿嘿
07-08 2756
如何通过Vue实现@人的功能
Vue基础教程：模板语法、数据绑定与组件详解
1. **Vue模板语法**：Vue的模板语法以HTML为基础，结合特殊的插值语法`{{ }}`用于数据绑定，如`{{ message }}`会显示`data`对象中的`message`值。此外，还支持指令语法，如v-bind用于数据绑定，v-on用于处理事件。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值