vue基础语法（2）

最新推荐文章于 2024-04-27 15:41:31 发布
最新推荐文章于 2024-04-27 15:41:31 发布
阅读量658 收藏
点赞数 3
分类专栏： 入门 文章标签： html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66587374/article/details/124554582
版权

目录

一. 样式绑定

        1.1样式绑定相关语法细节

        1.2 class绑定

        1.3 style绑定

二. 事件处理器

        2.1 事件修饰符

         2.2 按键修饰符

                2.2.1全部的按键别名：

     2.2.2也可以键码值：

        1.语法：

        2.案例：

                           3.以下是所有键码值

                                3.1.字母和数字键的键码值(keyCode)

                                 3.2数字键盘上的键的键码值(keyCode)和功能键键码值(keyCode)

                                        3.3控制键键码值(keyCode)

                                        3.4多媒体键码值(keyCode)

                4.自定义其他的按键别名：

                5.案例应用

        3.综合代码演示

3. vue表单

        3.1 常用控件

   3.2 修饰符

         3.3vue表单代码演示

 3.4注1：H5提供的新方法

4. 自定义指令

        4.1全局指令语法

        4.2局部指令语法

        4.3详细的钩子函数

        4.4钩子函数的参数有

        4.5自定义指令代码演示

5. vue组件

        5.1 组件简介

        5.2组件注册全局和局部组件

                2.1全局组件：

                        语法

                        代码

                      2.2局部组件:

                               语法

                                 代码

                  5.3 props

                                 注1：

                                注2：

                                注3：

                                注4：

                                注5：props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

6. 自定义事件

        6.1注1：Vue自定义事件是为组件间通信设计   

        6.2注2：事件名

        6.3代码演示

一. 样式绑定

        1.1样式绑定相关语法细节

  1. 对象绑定和数组绑定可以结合使用[activeClass, errorClass，{active:isActive}]
  2. class绑定的值可以简化操作 直接在data中写属性值，用来存放数组和对象
  3. 默认的class的处理方式 默认的class 会保留

        1.2 class绑定

      使用方式：v-bind:class="expression" 
      expression的类型：字符串、数组、对象
      

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		.cl{
			color:red;
			font-size:30px;
			
		}
		.cll{
			font-weight:bold;
		}
	</style>
	<script src="js/vue.js" type="text/jscript"></script>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>
			<!-- class样式 -->
			<div :class="clsArrs">
				哈哈哈哈
			</div>
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				cls:'cl',
				clsArrs:['cl','cll'],
			
			},
			methods:{
				
			}
		});
	</script>
</html>

        1.3 style绑定

      v-bind:style="expression"
      expression的类型：字符串、数组、对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		.cl{
			color:red;
			font-size:30px;
			
		}
		.cll{
			font-weight:bold;
		}
	</style>
	<script src="js/vue.js" type="text/jscript"></script>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>		
			<!-- style样式 -->
			<div :style="clsObj">
				hhhhhhhh
			</div>
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				clsObj:{
					color:'green',
					fontSize:'20px',
					fontWeight:'bold'
				}
			},
			methods:{
				
			}
		});
	</script>
</html>

二. 事件处理器

        2.1 事件修饰符

              事件监听可以使用v-on 指令
              Vue通过由点(.)表示的指令后缀来调用修饰符，


 
      <!-- 阻止单击事件冒泡 -->
      <a v-on:click.stop="doThis"></a>
      <!-- 提交事件不再重载页面 -->
      <form v-on:submit.prevent="onSubmit"></form>
      <!-- 修饰符可以串联  -->
      <a v-on:click.stop.prevent="doThat"></a>
      <!-- 只有修饰符 -->
      <form v-on:submit.prevent></form>
      <!-- 添加事件侦听器时使用事件捕获模式 -->
      <div v-on:click.capture="doThis">...</div>
      <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
      <div v-on:click.self="doThat">...</div>
      <!-- click 事件只能点击一次 -->
      <a v-on:click.once="doThis"></a>

         2.2 按键修饰符

 Vue允许为v-on在监听键盘事件时添加按键修饰符： 

使得键盘事件只针对某个(或某几个)按键生效。

应用中有许多键盘事件 (onkeyup、onkeydown、onkeypress、oninput等等)，每个事件在执行的时候可以通过许多按键达成，有时要求只有按到某个按键时，才激活该事件。

例如只有触碰回车键或ESC键才有效果，那么可以通过 按键修饰符 实现。

    <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
      <input v-on:keyup.13="submit">

      Vue为最常用的按键提供了别名
      <!-- 同上 -->
      <input v-on:keyup.enter="submit">

                2.2.1全部的按键别名：

    1.enter （回车键）
    2、 .tab
    3、.delete （捕获”删除“和”退格“键）
    4、 .esc （退出键）
    5、 .space （空格键）
    6、 . up
   7、 .dowm
  8、 .left
  9、 .right （右箭头）

     2.2.2也可以键码值：

键盘每个按键都对应一个数字码，称为键码值。event.keyCode 可以获取到。

        1.语法：

<input  @keyup.键码值/别名="处理">

        2.案例：

<!--要求只有触碰回车键，才执行该事件-->
<input  @keyup.13="处理">  <!--键码值-->
<input  @keyup.enter="处理">  <!--别名-->

vue考虑到键码值使用多有不便，已经给常用键码值(event.keyCode)设置了别名。

                           3.以下是所有键码值

                                3.1.字母和数字键的键码值(keyCode)

字母和数字键的键码值(keyCode)
按键键码按键键码按键键码按键键码
A65J74S83149
B66K75T84250
C67L76U85351
D68M77V86452
E69N78W87553
F70O79X88654
G71P80Y89755
H72Q81Z90856
I73R82048957

                                 3.2数字键盘上的键的键码值(keyCode)和功能键键码值(keyCode)

数字键盘上的键的键码值(keyCode)功能键键码值(keyCode)
按键键码按键键码按键键码按键键码
0968104F1112F7118
1979105F2113F8119
298*106F3114F9120
399+107F4115F10121
4100Enter108F5116F11122
5101-109F6117F12123
6102.110
7103/111

                                        3.3控制键键码值(keyCode)

控制键键码值(keyCode)
按键键码按键键码按键键码按键键码
BackSpace8Esc27Right Arrow39-_189
Tab9Spacebar32Dw Arrow40.>190
Clear12Page Up33Insert45/?191
Enter13Page Down34Delete46`~192
Shift16End35Num Lock144[{219
Control17Home36;:186\|220
Alt18Left Arrow37=+187]}221
Cape Lock20Up Arrow38,<188'"222

                                        3.4多媒体键码值(keyCode)

多媒体键码值(keyCode)
按键键码
音量加175
音量减174
停止179
静音173
浏览器172
邮件180
搜索170
收藏171

                4.自定义其他的按键别名：

// 要求使用  @keyup.f6
Vue.config.keyCodes.f6 = 118
<input @keyup.f6="xxx" />  // 只有单击f6键才会触发xxx的回调

注意：如果有的需求比较特殊，需要多个按键一并触发该事件，也是可以的：

​ @keyup.ctrl.enter="XXX" 表示 ctrl和enter一并触碰，才触发事件执行。

                5.案例应用

给添加品牌的输入框设置按键修饰符：

回车键 被触碰就添加新品牌。
ESC键 被触碰就把已经输入的新品牌给做清除操作，取消添加。

<input type="text" v-model="newbrand" 
       @keyup.enter="add" 
       @keyup.esc="newbrand=''" />

注意：一个input输入框设置了两个keyup事件，是可以的，它们是通过不同的键触发的。

        3.综合代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/vue.js" type="text/jscript"></script>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>
			<div>
				消息1：<input type="text" v-model="msg"/>
				<button @click="send">发送</button>
			</div>
			<!-- 通过once修饰符控制事件只能点击一次  -->
			<div>
				消息2：<input type="text" v-model="msg"/>
				<button @click.once="send">发送</button>
			</div>
			  <!-- 提交事件不再重载页面 -->
			  <div>
				  <form action="wwww" v-on:submit.prevent="doSubmit">
					  消息3：<input type="text" v-model="msg"/>
					  <button type="submit" value="提交">发送</button>
				  </form>
			  </div>
			  <!-- 按键修饰符-->
			  <div>
				  消息4：<input type="text" @keyup.enter="doKeyup"/>

			  </div>
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				msg:''
				},
			methods:{
				send:function(){
					console.log(this.msg);
				},
				doSubmit:function(){
					console.log('doSubmit......');
				},
				doKeyup:function(){
					console.log(1213213421431);
				}
			}
		});
	</script>
</html>

3. vue表单


   用v-model指令在表单控件元素上创建双向数据绑定

        3.1 常用控件

        文本框/密码框/文本域/隐藏域
       单选复选框/多选复选框

       单选按钮

       下拉框

   3.2 修饰符

.lazy
       默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步

       .number
       将用户的输入值转为 Number 类型

       .trim
       自动过滤用户输入的首尾空格

         3.3vue表单代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/vue.js" type="text/jscript"></script>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>
			账号：<input type="text" v-model="username"/><br>
			密码：<input type="text" v-model="password"/><br>
			性别：<input type="radio" v-model="sex" value="1"/>男
						<input type="radio" v-model="sex" value="2"/>女</br>
			爱好:
						<span v-for="h in hobby">
							<input type="checkbox" v-model="hobbies" :value="h.id"/>{{h.name}}
						</span></br>
			地址:<select v-model="areaname">
						<option value="">----请选择---</option>
						<option v-for="a in area" :value="a.id">{{a.name}}</option>
					</select>	</br>		
			备注：<textarea v-model="remark"></textarea><br/>
			<input type="checkbox" v-model="flag"/>已阅读
		<button @click="doRegister()" :disabled="!flag">注册</button>
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				username:'',
				password:'',
				sex:'1',
				hobby:[
					{id:1,name:'qqqqq'},
					{id:2,name:'wwwww'},
					{id:3,name:'eeeee'},
					{id:4,name:'rrrrr'},
				],
				hobbies:[],
				area:[
					{id:1,name:'长沙'},
					{id:2,name:'衡阳'},
					{id:3,name:'重庆'},
					{id:4,name:'上海'},
				],
				areaname:'',
				remark:'',
				flag:false
				},
			methods:{
			doRegister:function(){
				let params={
					username:this.username,
					password:this.password,
					sex:this.sex,
					hobbies:this.hobbies,
					area:this.areaname,
					remark:this.remark
				}
				console.log(params);
			}
			}
		});
	</script>
</html>

 3.4注1：H5提供的新方法

        JSON.parse():只能解析json形式的字符串变成json，安全性高一些 
        JSON.stringify():json转换为字符串，解析的时候会自动加上引号    

4. 自定义指令

 除了Vue自带的指令(v-on|v-model)等, Vue也允许注册自定义指令，根据作用范围又分为：全局指令/局部指令

        4.1全局指令语法

Vue.directive("focus",{});//全局指令

        4.2局部指令语法

new Vue({
     el:"#d1",
     directives:{//局部指令
       focus:{}
     }
   }); 

        4.3详细的钩子函数

        ## 下面的内容直接百度或查API即可
   指令定义函数提供了几个钩子函数用来帮助实现功能(可选)

函数名作用
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）
update:被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次指令与元素解绑时调用。

        4.4钩子函数的参数有

参数作用
el指令所绑定的元素，可以用来直接操作 DOM 
binding 一个对象，包含以下属性
name指令名，不包括 v- 前缀
value指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2
oldValue指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
 expression绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"
arg传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"
modifiers一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }
vnodeVue 编译生成的虚拟节点

        4.5自定义指令代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/vue.js" type="text/jscript"></script>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>
			<h2>自定义指令(全局指令/局部指令)</h2>
				<div v-fos="name">213321</div>
				<div v-yy>213321</div>
		</div>
	</body>
	<script>
		/* 全局指令 */
		Vue.directive("yy",{
			bind:function(el,binding){
				console.log('全局指令 bind');
			},
			inserted:function(el,binding){
				console.log('全局指令 inserted');
			}
		});
		var vm=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				name:'zs'
				},
			methods:{
				
			},
			directives:{
				fos:{
					/* 局部指令，对应的钩子函数bind/inserted/unbind */
					bind:function(el,binding){
						console.log(el);
						console.log(binding);
						console.log('bind');
						
					},
					inserted:function(el,binding){
						console.log('inserted');
					}
				}
			}
		});
	</script>
</html>

5. vue组件

        5.1 组件简介

组件(Component)是Vue最强大的功能之一
      组件可以扩展HTML元素，封装可重用的代码
      组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

组件是Vue.js最核心的功能，也是整个框架设计最精彩的地方。组件可以扩展HTML元素，封装可重用的代码。根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己所需，使用不同的组件来拼接页面。这种模式使前端页面易于扩展，且灵活性高，而且组件之间也实现了解耦。

        5.2组件注册全局和局部组件

                2.1全局组件：

                        语法

Vue.component(tagName, options)，tagName为组件名，options为配置选项。

                        代码

<div id="app1">
     <my-component></my-component>
 </div>
 <script>
 // 全局注册
  Vue.component('my-component',{
        template: '<p> 这是组件的内容 </p>'
    });
   // 创建实例
	  var app1 = new Vue({
        el: '#app1'
    })
</script>


                      2.2局部组件:

                               语法

      new Vue({el:'#d1',components:{...}})
      注册后，我们可以使用以下方式来调用组件： 
      <tagName></tagName>

                                 代码

<div id="app2">
         <my-component></my-component>
 </div>
<script>
	var Child = {
        template: '<p>这是一个局部组件</p>'
    }
    var app2 = new Vue({
        el: "#app2",
        components: {
            'my-component': Child
        }
    });
</script>

                  5.3 props

        props是父组件用来传递数据的一个自定义属性。
      父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

                                 注1：

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods
        以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

                                注2：

当我们定义这个 <button-counter> 组件时，你可能会发现它的data并不是像这样直接提供一个对象
        data: {
          count: 0
        }

        取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
        data: function () {
          return {
            count: 0
          }
        } 


                                注3：

定义组件名的方式有两种
         短横线分隔命名(建议使用) 
         Vue.component('my-component-name', { /* ... */ })，引用方式：<my-component-name>

         首字母大写命名
         Vue.component('MyComponentName', { /* ... */ })，引用方式： <my-component-name>和<MyComponentName>都是可接受的   

                                注4：

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，
         camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
         props: ['postTitle'],<my-tag post-title="hello!"></my-tag>

                                注5：props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

         希望每个 prop 都有指定的值类型
         props: {
           title: String,
           likes: Number,
           isPublished: Boolean,
           commentIds: Array,
           author: Object,
           callback: Function,
           contactsPromise: Promise // or any other constructor
         }

6. 自定义事件

   监听事件：$on(eventName) 
   触发事件：$emit(eventName) 

        6.1注1：Vue自定义事件是为组件间通信设计   

vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
        父Vue实例->Vue实例，通过prop传递数据
        子Vue实例->父Vue实例，通过事件传递数据 

        6.2注2：事件名

不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
        建议使用“短横线分隔命名”，例如：three-click

        6.3代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/vue.js" type="text/jscript"></script>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>
			<h2>组件 Component (全局/局部)</h2>
			<kfc-button @three-click="doTest"></kfc-button>
		</div>
	</body>
	<script>
		/* 
		 1.组件定义：全局和局部组件
		 2.组件语法
			2.1.全局语法
			Vue.component('组件名', options)
			2.2.局部语法
			var vm=new Vue({
				components:{
					组件名{
						....
					},
					...
				}
			})
			3.定义组件名的方式有两种
			短横线分隔命名a-abc
			首字母大写命名(帕斯卡命名法) Abc
			4.组件作用 拓展HTML元素，封装可重用代码
			5.组件理解
			可以把组件理解为Jsp中的<%@include%>指令
			6.组件传值
				6.1 子到父 采用事件方式，this.$emit('事件名',参数.....)
				6.2	父到子
			
		 */
		var vm=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				
				},
			methods:{
				doTest:function(v){
					console.log("父组件接收到count="+v);
				}
			},
			components:{
				'kfc-button':{
					//定义HtML代码,每一个template有有且只有一个根节点
					template:'<div><h1>局部组件</h1><button @click="doThreeClick">被点击了{{count}}次</button></div>',
					//自定义组件中data必须使用函数方式
					data:function(){
						return{
							count:0
						}
					},
					methods:{
						doClick:function(){
							this.count=this.count+1;
							console.log(this.count);
						},
						doThreeClick:function(){
							this.count=this.count+1;
							if(this.count%3==0){
								console.log("子组件count="+this.count);
								this.$emit('three-click',this.count);
								
							}
						}
					}
				}
			}
		});
	</script>
</html>

☞南烟勿忘☜
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一、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中的空格使用
userzou的博客
03-25 1万+
&#32; == 普通的英文半角空格 &#160; == &nbsp; == &#xA0; == no-break space （普通的英文半角空格但不换行） &#12288; == 中文全角空格 （一个中文宽度） &#8194; == &ensp; == en空格 （半个中文宽度） &#8195; == &emsp; == em空格 （一个中文宽度） &#8197; == 四分之一em空格 （四分之一中文宽度）
学习Vue，Vue基础语法02
weixin_67696142的博客
07-14 315
学习Vue，Vue基础语法02
vue页面中怎么显示多个空格-从普通空格到非断行空格与v-html的使用
最新发布
qq_42816270的博客
04-27 705
v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。在单文件组件，scoped 样式将不会作用于 v-html 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值。产生的原因是因为在浏览器进行解析的时候， 会将多个空格合并成分成一个空格。可能跟使用vue2有关吧，上述的演示的代码使用的是vue3。
Vue模板语法（下）
遥是此间桃花庵
09-18 379
样式绑定 1.1 class绑定 使用方式：v-bind:class=“expression” expression的类型：字符串、数组、对象 1.2 style绑定 v-bind:style=“expression” expression的类型：字符串、数组、对象 事件处理器 事件监听可以使用v-on 指令 2.1 事件修饰符 Vue通过由点(.)表示的指令后缀来调用修饰符， ....
vue中保留字符串中的空格解决方案
weixin_55639808的博客
09-15 1690
vue中保留字符串中的空格解决方案 1.css样式处理 white-space：pre-wrap
# 解决：Vue 代码中 console.log() 无法输出问题
热门推荐
m0_49772478的博客
10-29 1万+
解决：Vue 代码中 console.log() 无法输出问题 在学习Vue的过程中，发现在使用console.log()的时候，在google浏览器检查时并不输出数据，还需要自己 手动在控制台输入自己的数据名称才可以显示！ let person = { name:'张飒', sex:'男' } Object.defineProperty(person,'age',{ value:18
vue基础语法练习源码
12-09
本套资源，是在html文件中测试的一些vue基础语法，包括过滤器、定义插件、列表渲染等语法。此资源适用于初学vue的小伙伴，用于加深对vue语法的熟悉。
从Vue基础语法入手
08-10
从Vue基础语法入手，逐层递进，项目贴近企业流程，完全按照企业级别代码质量和工程开发流程进行，让你理解这套技术在企业中被使用的真实流程。更好的掌握Vue各个基础知识点。
前端框架Vue基础语法笔记
01-20
前端框架Vue基础语法笔记
vue基础语法——表单绑定语法、计算属性、侦听器、过滤器、vue生命周期
12-09
对vue基础语法一些简单的总结和案例，适合新手小白哦~
vue中空格符号
weixin_35750747的博客
01-05 2064
在Vue中，你可以使用空格符号 ({{ }}) 来渲染 HTML。例如： <template> <div> <p>我的名字是{{ name }}</p> </div> </template> <script> export default { data () { return { ...
html字符及空格占位问题
qq_43482627的博客
09-23 674
&#32; == 普通的英文半角空格 &#160; == &nbsp; == &#xA0; == no-break space （普通的英文半角空格但不换行） &#12288; == 中文全角空格 （一个中文宽度） &#8194; == &ensp; == en空格 （半个中文宽度） &#8195; == &emsp; == em空格 （一个中文宽度） &#8197; == 四分之一em空格 （四分之一中文宽度） 相
vue空格集合
miem_yang的博客
06-10 3682
在开发的时候很多时候需要很多间隔 这时候就要用到空格 但是单纯的输入空格不能实现业务需求 下面总结一下vue中使用空格的例子 == 普通的英文半角空格   ==   ==   == no-break space （普通的英文半角空格但不换行） 　 == 中文全角空格 （一个中文宽度）   ==   == en空格 （半个中文宽度）   ==   == em空格 （一个中文宽度）   == 四分之一em空格 （四分之一中文宽度） 相比平时的空格（ ），nbsp拥有不间断（n
Vue--调试--使用console输出
IT利刃出鞘的博客
11-05 1万+
原文网址： 简介 本文用示例介绍使用浏览器的console调试vue的方法。 输出对象数据 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>this is title</title> </head> <body> <div id="app"> {{mess...
vue 模板中使用 console.log
李刚的学习专栏
04-20 1902
模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。没有显式包含在列表中的全局对象将不能在模板内表达式中访问。如何注册能够被应用内所有组件实例访问到的全局属性？
Vue框架指令以及它的console用法
weixin_45583311的博客
10-10 6111
vue的几种指令 （1）v-bind属性指令 v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。 语法格式1：单个语法格式 v-bind:attributeName=variable 语法格式2：对象语法格式 v-bind=“{attributeName1:variable1,attributeName2:varia...
解决VUE中console.log日志无法在浏览器控制台上显示问题
m0_72929753的博客
02-23 1407
console.log日志无法在浏览器上显示的问题
【Vue】console.log()打印对象显示点点点，js打印语句显示省略号 | 解决方案
qq_51055690的博客
12-18 1060
在console.log打印对象或者数组时，里面会显示小数点。
vue3基础语法学习文档
04-05
vue.js 是一个渐进式的前端框架，主要用于构建用户界面。它的基础语法包括： 1. 模板语法：Vue.js 使用 HTML 作为模板...这些是 vue.js 的基础语法，如果想要学习 vue.js，建议阅读官方文档或者参考相关的书籍或教程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值