vue基础语法

最新推荐文章于 2023-06-04 15:04:16 发布
最新推荐文章于 2023-06-04 15:04:16 发布
阅读量190 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kiki208418895/article/details/100941652
版权
  1. 模板语法

插值：.html

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>
		<div id="app">
			<ul>
				<li>
					<h3>文本</h3>
					{{msg}}
				</li>
				<li>
					<h3>html片段</h3>
					{{kiki}}
					<div v-html="kiki"></div>
				</li>
				<li>
					<h3>属性</h3>
					<input name="hobby" value="唱歌"/>
					<input name="hobby" v-bind:value="a"/>
				</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="application/javascript">
		new Vue({
			el:'#app',
			data() {
				return {
					msg: '插入的文本',
					kiki:'<span style="color:pink;">要显示的html片段</span>',
					a:'吉他',
					str:'https://www.baidu.com',
					number:2,
					ok:false,
					id:6
				}
			},
		})
		
		
	</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>
  	<div id="app">
  		<ul>
  			<li>
  				<h3>条件指令 if else if，else </h3>
  				<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="score>50">E</div>
  				<input v-model="score"/>
  			</li>
  			<li>
  				<h3>条件指令show </h3>
  				<div v-show="kiki">需要展示的内容</div>
  				<input v-model="kiki" />
  			</li>
  			<li>
  				<h3>循环指令v-for </h3>
  				<div v-for="item in hobby" v-model="checkedVals">
  						<input type="checkbox" name="hobby":value="item.id" v-model="checkedVals"/>{{item.name}}
  				</div>
  				<input v-model="checkedVals"/>
  				
  				<select name="likes" v-model="selectVals">
  					<option v-for="item in hobby":value="item.id" >{{item.name}}</option>
  				</select>
  				<input v-model="selectVals"/>
  				
  			</li>
  			
  			<li>
  				<h3>动态参数</h3>
  				<button v-on:click="clickme">点我</button>
  				<input v-model="evname" />
  			</li>
  		</ul>
  	</div>
  </body>
  <script type="text/javascript">
  	new Vue({
  		el:'#app',
  		data() {
  			return {
  					score:80,
  					kiki:'',
  					hobby:[{id:1,
  					name:'吉他',
  					
  					},
  					{id:2,
  					name:'唱歌',
  					
  					},
  					{id:3,
  					name:'跳舞',
  					
  					}],
  					checkedVals:[],
  					selectVals:'',
  					evname:'click'
  			}
  		},
  		methods:{
  			clickme(){
  				alert('橙橙 我爱你');
  			}
  		}
  	})
  	
  	
  </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) }}

      注4：js定义一个类
      function Stu(){};
      Stu.prototype.add(a,b){};//添加一个新的实例方法
      Stu.update(a,b){};//添加一个新的类方法

      案例：首字母大写/日期格式化

     <!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>
					{{msg}}<br />
					{{msg.substr(0,6).toUpperCase()}}<br />
					{{msg|a}}<br />
				</li>
				<li>
					<h3>局部过滤的串联</h3>
					{{msg}}<br />
					{{msg |a |b}}<br />
				</li>
				<li>
					<h3>全局过滤器的注册</h3>
					{{msg}}<br />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		Vue.filter("c",(v)=>{
			return v.substr(0,1).toUpperCase()+v.substr(1,17);
		})
		
		new Vue({
			el:'#app',
			data() {
				return {
					msg:'https://www.baidu.com'
				}
			},
			filters:{
				a(v){
					return v.substr(0,17).toUpperCase();
				},
				b(v){
					return v.substr(0,8).toLowerCase()+v.substr(8,17).toUpperCase();;
				}
				
			}
		})
		
	</script>
	
</html>

    在这里插入图片描述

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

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

    <!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" />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data() {
				return {
					price:6,
					num:2,
					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>

    结果：
    在这里插入图片描述

HJC橙
关注
Vue基础语法
qq_52262541的博客
04-10 1136
Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{XXX}}，XXX是Js表达式，且可以直接读取到date中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签内容、绑定事件…）。 举例：v-bind:href=“XXX” 或简写为：href=“XXX”,XXX同样要写js表达式，且可以直接读取到date中的所有属性。 备注：Vue中有很多的指令，且形式都是：v-???,此处我们只是拿v-bind举个例子。 Vue中有2种数据绑定的方式： 1.单向绑定
Vue模板语法（一）
P_YUX的博客
08-25 815
1. 模板语法 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 插值案例 代码： <head> <meta charset="utf-8"> <title>...
前端(十八):Vue模板语法,计算属性
张不帅
06-29 363
文章目录模板语法文本原始 HTMLAttribute计算属性计算属性的 setter 模板语法 文本 通过{{}}来实现数据绑定,但是当标签被设置v-once,数据只会在第一次加载绑定 原始 HTML 双大括号会将数据解释为普通文本,为了输出真正的 HTML，你需要使用 v-html Attribute 通过v-bind来绑定attribute v-on来监听DOM事件 v-bind的缩写: <a v-bind:href="url">...</a> 等同 <a :href="u
Vue框架---Vue模板语法（一）
鑫709的博客
04-27 1180
模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上 插入 文本 数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值： <script src="js/vue.js" type="text/javascr
从零开始学VUE之模板语法(计算属性)
彼岸舞的博客
05-31 104
计算属性 setter与getter 使用计算属性简化 表达式操作,实现复用,一般计算属性都是只用getter的,一般不适用setter <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
Vue 基础语法 实例演示 示例代码
最新发布
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
Vue3一学就会系列：02 模板语法与计算属性
成茂峰
01-09 610
以上就是今天的内容，本文仅仅简单介绍了vue3的模板语法及计算属性，而更多的vue3知识，后续文章，我将带大家慢慢深入了解。有问题私信我！！~~
如何在Vue模板中使用计算属性？
2301_77795034的博客
06-04 1214
最后，我们还可以使用计算属性的setter函数来设置计算属性的值。计算属性是一种在Vue组件中使用的属性，它的值是根据其他数据的计算得出的。在Vue中，我们可以使用computed选项来定义计算属性，这个选项接收一个函数或者一个对象，函数或对象中包含我们要计算的属性和它们的值。除了简单的计算，计算属性还可以使用一些内置的函数和方法。在这两个例子中，无论firstName或lastName的值发生任何变化，都会触发更新fullName计算属性的值，从而保证模板中显示的值始终正确。在模板中使用计算属性。
vue3的基础入门03
weixin_45808678的博客
03-15 1116
计算属性 <body> <div id="app"> <p>{{msg}}</p> <!-- 对普通属性进行逻辑处理，然后再展示 --> <!-- <p>{{ msg.toUpperCase().split(' ').reverse().join(' ')}}</p> --> <p>{{ reverseMsg}
了解Vue，Vue的基础语法
weixin_67696142的博客
07-14 676
Vue的基础语法
Vue2 新手上路无处不在的特殊符号，让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘
热门推荐
LlanyW的专栏
12-29 6万+
1）$ mount:vue内部除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。.prevent 阻止浏览器默认行为(@click.prevent="clickFn")：写法：{{xxx}}，xxx 是 js 表达式，可以直接读取到 data 中的所有区域。2）$(形参){方法体}:js的方法名定义规则比较广泛，可以是方法名的定义；.stop 阻止冒泡(@click.stop="clickFn")Vue中有很多的指令，且形式都是 v-xxx， 框架。有参数,就用$event占位,在回调中e接收。
Vue的一些特性
ZhiAng99的博客
09-25 311
文章目录1.自定义指令2.计算属性3.侦听器4.过滤器5.变异方法和替换数组 1.自定义指令 1.基础指令 v-clock 这个指令的意思是点击就会触发这个指令 除了一些vue提供给我们得指令外我们还可以自定义一些指令来方便我们的一些操作 Vue.directive(‘focus’, { //inserted是固定的 是vue的api inserted: function(el){ // el表示指令所绑定的元素 el.focus(); } }); <body> <div id="a
Vue学习笔记(三)：Vue过滤器的基本使用
baidu_38300480的博客
12-28 770
在实际项目中，我们常常需要对文本进行一些格式化操作（例如：日期格式化、字符串大小写转换等），在Vue中我们可以通过自定义过滤器的方式完成这项操作，同时还可以将过滤器注册到全局以提高代码的复用性。基本使用方式如下： 1.在一个组件的选项中定义本地的过滤器 export default { name: 'FilterDemo', data() { return { msg:'hello world' } }, ...
Vue中过滤器的使用方法（大小写参考）
weixin_50217605的博客
11-12 1325
今天跟大家分享一下Vue中过滤器的使用方法 画画的贝贝！画画的贝贝 快乐一下 写法可以是这样的，| 这个符号可以理解为一个管道，前面就是我们要渲染的节点 后面的 toUpper可以理解为编译器节点 | 这个是用来疏通的 ！画画！ 先赋予app元编程的能力，给上面的mag渲染字符 Vue.js，注意此时这段字符只有V是大写 下面是过滤器的写法 先讲解一下filter过滤器，“画画的贝贝！！！” 他和画画的贝贝没有关系哈！ filter加工车间，可以加工可以筛选 filter的作用是：对值进行筛
VUE字符串截取的小坑（substr、substring）
笨qiao先飞
03-28 5654
js里面有俩个字符串截取的函数 1、 substring 2、substr 这俩个函数是有区别的，由于本人是VUE小白 之前一直用着 substr 最近在做另外一个项目的时候发现这个函数拿到的数据和我预期中的不一样，于是就测试了一下，就发现了问题。 下面一个实例大家来猜一下结果： var textStr = '0123456789'; var textSubStr = textStr.substr(2,4); console.log("textSubStr",textSubS
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值