Vue模板语法（上）

最新推荐文章于 2022-11-26 14:54:23 发布
最新推荐文章于 2022-11-26 14:54:23 发布
阅读量138 收藏
点赞数
分类专栏： Vue 文章标签： Vue模板语法（上）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44224029/article/details/100977099
版权

Vue模板语法（上）

1.1 插值
1.1.1 文本
{{msg}}
1.1.2 html
使用v-html指令用于输出html代码
1.1.3 属性
HTML属性中的值应使用v-bind指令
1.1.4 表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}

  • 我的Id是js动态生成的

  • <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>插值</title>
	</head>
	<body>
<!-- Vue实例挂载的边界-->
		<div id="app">
			<ul>
				<li>
					<h3>文本</h3>
					{{msg}}
				</li>
				<li>
					<h3>v-html指令</h3>
					<div v-html="vueHtml"></div>
				</li>
				<li>
					<h3>属性</h3>
					<input type="text" :value="msg" />
				</li>
				<li>
					<h3>表达式</h3>
					{{str.substr(0,6).toUpperCase()}}
					{{ number + 1 }}
					{{ ok ? 'YES' : 'NO' }}
				<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
				</li>

			</ul>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello asd',
					vueHtml: '<span style="color:red;">Vue对html的解析</span>',
					str:'http://www.bai.com',
					number:6,
					ok:true,
					id:5
				};
			}
		})
	</script>

</html>

    1.2 指令
    指的是带有“v-”前缀的特殊属性
    ## demo2.1.html
    1.2.1 核心指令
    (v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

    v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
    他们只能是兄弟元素
    v-else-if上一个兄弟元素必须是v-if
    v-else上一个兄弟元素必须是v-if或者是v-else-if

    v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style=“display:none”

    v-for：类似JS的遍历，
    遍历数组: v-for=“item in items”, items是数组，item为数组中的数组元素
    遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

    v-bind
    v-on
    v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
    v-for/v-model一起绑定[多选]复选框和单选框

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>指令</title>
	</head>
	<body>
		<!-- Vue实例挂载的边界-->
		<div id="app">
			<ul>
				<li>
					<h3>条件指令 (if elseif else)</h3>
					{{msg}}
					<input type="text" v-model="score" />
					<div v-if="score>90">A</div>
					<div v-else-if="score>80">B</div>
					<div v-else-if="score>70">C</div>
					<div v-else-if="score>60">D</div>
					<div v-else="">E</div>
				</li>

				<li>
					<h3>V-show</h3>
					<input type="text" v-model="show" />
					<div v-show="show">出现吧</div>
				</li>

				<li>
					<h3>v-for</h3>
					<div v-for="item,index in arr">
						{{item.name}},{{index}}
					</div>
					<div v-for="item,index in objArr">
						{{item}},{{index}}
					</div>
				</li>

				<li>
					<h3>动态参数</h3>
					<input type="text" v-model="evname" />
					<button v-on:[evname]="ka">点我</button>
				</li>

			</ul>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello vue',
					score: 88,
					show: null,
					arr: [1, 4, 7, 9],
					objArr: [{
						id: 's001',
						name: '啥子'
					}, {
						id: 's002',
						name: '你牛逼'
					}, {
						id: 's003',
						name: '撒旦'
					}],
					evname:'click'
				};
			},
			methods:{
				  ka(){
					console.log("xxx点我干哈");
				}
			}
		})
	</script>
</html>

    1. 过滤器
      全局过滤器
      Vue.filter(‘filterName’, function (value) {
      // value 表示要过滤的内容
      });
      局部过滤器
      new Vue({
      filters:{‘filterName’:function(value){}}
      });

      vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

      {{ name | capitalize }}

      注1：过滤器函数接受表达式的值作为第一个参数
      注2：过滤器可以串联
      {{ message | filterA | filterB }}
      注3：过滤器是JavaScript函数，因此可以接受参数：
      {{ message | filterA(‘arg1’, arg2) }}

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>过滤器</title>
	</head>
	<body>
		<!-- Vue实例挂载的边界-->
		<div id="app">
			<ul>
				<li>
					<h3>局部过滤器</h3>
					{{msg}}<br />
					{{msg | a}}
				</li>
				
				<li>
					<h3>局部过滤器可串联</h3>
					{{msg}}<br />
					{{msg | a | b}}
					{{msg | b | a}}
				</li>
				
				<li>
					<h3>全局过滤器</h3>
					{{msg | c}}<br />
				</li>

			</ul>
		</div>

	</body>
	<script type="text/javascript">
		Vue.filter('c',function(v){
			return v.substring(7);
		})
		
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'http://www.baidu.com',
				};
			},
			filters:{
				a(v){
					return v.substring(4);
				},
				b(v){
					return v.substring(3);
				}
			}
		})
	</script>
</html>

    1. 计算属性
      计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
      computed:{}

    2. 监听属性
      监听属性 watch，我们可以通过 watch 来响应数据的变化
      watch:{}

      小结：计算属性和监听属性的区别

    computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
    computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
    举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>计算属性与监听属性</title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>计算属性</h3>
					苹果单价：<input type="text" v-model="price"/><br />
					购买的数量：<input type="text" v-model="num"/><br />
					小计：{{total}}
				</li>
				<li>
					<h3>监听属性</h3>
					km：<input type="text" v-model="km"/><br />
					m：<input type="text" v-model="m"/><br />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					price: 6,
					num:1,
					km:1,
					m:1000
				}
			},
			computed:{
				total(){
					return this.price * this.num;
				}
			},
			watch:{
				km(v){
					this.m = v*1000;
				},
				m(v){
					this.km = v/1000;
				}
			}
			
		})
	</script>
</html>

    在这里插入图片描述

@D-zy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门学习（一）——var vm = new Vue(）修改vm.site错写成vm.data.site
lseap的博客
05-18 5818
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"&...
new vue 方法参数_vue进阶之路 —— 详解vue2.x初始化流程
weixin_39850920的博客
11-20 2830
如果要成长为一名高级乃至资深前端工程师，不但要熟练使用，还要明白背后的原理，达到举一反三的程度。在整个成长过程中，阅读源码是不可或缺的重要一环。本篇文章以vue 2.6.10源码为例，为大家分享vue2.x组件实例化流程。首先创建一个index.html文件，并且引入vue2.6.10.js<!DOCTYPE html> <html lang="en"> <head&...
！！误解--var vm = new vue({}) 与 export default {} 是一回事儿？？
weixin_30825199的博客
04-04 685
这两者完全不是同一回事。export default {}是es6的module中的语法， 而var vm = new vue({})是创建一个vue实例.引起误解是因为用了webpack开发vue同时用了vue-loader。其实这最终会通过vue-loader处理成原生js代码，即无论如何都要new Vue()。 vue-loader介绍: vue-loader是一个webpa...
谈谈对var vm = new Vue({})的理解
热门推荐
MarkJunHao的博客
07-20 1万+
Vue.js 本质就是包含各种逻辑的function，初始化Vue的过程就是实例化的过程。 var vm = new Vue({}) console.log(Vue) 之后控制台输出的是  ƒ hn(e){this._init(e)}，可以看出，vue对象的本质就是一个function。   Vm是我创建的一个实例，我对它进行了测试 console.log(typeof Vue) co...
Vue2实例中的data属性三种写法与作用
weixin_30737363的博客
09-17 628
<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <span>{{count}}</span> <button @click="inc">+</button> </div> &l...
vue模板语法
yzq102873的博客
09-02 861
vue模板语法
Vue模板语法
qq_62331938的博客
09-02 2509
本篇文章将要分享的内容为Vue的模板语法。
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解 Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，...
Vue.js的模板语法详解
10-15
Vue.js 是一款流行的前端JavaScript框架，它通过使用简洁的模板语法，使得开发者能够声明式地将数据渲染进DOM中，实现数据和视图之间的动态同步。Vue.js模板语法的设计借鉴了Angular.js和Knockout.js等框架，并简化...
Vue知识网2021
yuan
07-20 376
尤雨溪：一直呆在舒适区往往就得不到提升，程序员能力的提升往往都发生在尝试解决一个从没解决过的问题之后进行反思的过程中。 一、MVVM 不管是 React 还是 Vue，它们都不是 MVVM 框架，只是有借鉴 MVVM 的思路 MVVM ( Model-View-ViewModel ) 是一种软件架构思想。 Model 层：数据模型，是代码中主要操作的部分。 View 层：视图模板，对应要显示的标签结构。 ViewModel 层：用于处理业务逻辑，对于可输入元素（输入框、文本域等）可将 Vi.
Vue生命周期--Vue实例创建过程详解
最新发布
YY的博客
11-26 1357
Vue生命周期--Vue实例创建过程详解
Vue框架---Vue模板语法（二）
鑫709的博客
05-02 1464
样式绑定 1、class绑定 使用方式：v-bind:class="expression" expression的类型：字符串、数组、对象 <div id="ad"> <h1>{{ts}}</h1> <!-- class样式 --> <div :class="clsArrs"> 11111111111111111111111111111 </div> </div> <script>
Vue状态管理总结(存储公共数据)
yiyueqinghui的博客
03-05 3693
方法一，export + vue的prototype 1，新建一个store目录，里面建立store.js let store = { num:1, mySay:function(){ console.log('my say!'); } } export default store; //注意，导出export default,而非export ...
Vue项目优化
qq_40783848的博客
09-16 492
Vue项目优化？听说面试会有这个！ 没办法！搞起来！ 书写习惯 1. 数据规格化(不需要做响应式的数据不要放到data中) 不要把所有的数据都放到data中，只把你需要做响应式的数据放到data中。 如果一个数据放到了data中，vue会给这个数据添加一个getter和setter，当你获取数据调用getter，当你设置数据调用setter，性能不高。 具体内容可以参照vue中是如何实现MVVM...
了解Vue，Vue的基础语法
weixin_67696142的博客
07-14 671
Vue的基础语法
Vue——引入Vue的方法、VM对象和基础指令（面试）
qq_52301431的博客
08-29 5285
v-cloak==>加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏)在标签尖括号中使用{{}}插入js表达式:变量,函数调用,三目运算等等，插值表达式中的标识符 代表vue对象中的data的属性名或者methods中的方法名。//下载官方脚手架 到全局，集成webpack的环境，能生成webpack的这个软件就是脚手架 （cli一般指的是自动化）......
Vue.js系列（五）：Vue的生命周期！
Mr_chen的博客
09-20 744
Vue.js系列（五）：Vue的生命周期！ 前言 今天博主将为大家分享Vue.js系列（五）：Vue的生命周期！不喜勿喷，如有异议欢迎讨论！ 有一个强大的地基才能写出健壮的程序！请先阅读博主关于:Windows10用npm安装Vue！ 目标 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在...
小结Object.defineProperty / 啥是代理（设计模式） / vm=new Vue({data:myData})
weixin_53562163的博客
04-11 716
Object.defineProperty 可以给对象添加属性value 可以给对象添加getter/setting getter/setting用于对属性的读写进行监控 啥是代理（设计模式） 对myData对象的属性读写，全权由另一个对象vm负责 那么vm就是myData的代理（类比房东租房） 比如myData.n偏要vm.来操作myData.n vm=new Vue({data:myData}) 1、会让vm成为myData的代理（proxy） 2、会对myData的
new vue的使用_Vue入门指南-01 创建vue实例
weixin_42593130的博客
01-13 1025
vue.js该篇文章的讲解能能够带你快速入门vue,尽可能多的讲解vue中的各个知识点 让你能够快速上手使用vue发开你的第一个项目, 当然已经学习使用了vue的同学可以查漏补缺 看看那些是自己学习但长时间不用已经忘记的为什么要学习vue通过学习Vue提供的指令, 很方便的就能把数据渲染到页面上, 不在需要手动操作DOM元素, 前端的Vue之类的框架, 不提倡手动操作DOM元素。什么是MVVM模式...
Vue.js模板语法深度解析
在Vue.js中，模板语法是实现数据绑定和响应式更新的关键部分。本篇文章将深入讲解Vue.js的常用模板语法。 1. 文本渲染 在Vue.js中，我们可以使用`{{ }}`插值表达式来实时渲染文本内容。当数据模型发生变化时，这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值