vue基础语法02

最新推荐文章于 2023-02-04 20:24:25 发布
最新推荐文章于 2023-02-04 20:24:25 发布
阅读量542 收藏
点赞数
文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65979836/article/details/124514864
版权

demo1.html
1. 样式绑定  
  1.1 class绑定
      使用方式：v-bind:class="expression" 
      expression的类型：字符串、数组、对象
      
  1.2 style绑定
      v-bind:style="expression"
      expression的类型：字符串、数组、对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<style>
		.cl{
			color: red;
		}
		.cl1{
			font-weight: bold;
		}
	</style>
	<body>
			<div id="app">
				<h2>{{ts}}</h2>
				<!-- class样式 -->
				<div :class="cls">
					Hello Vue!!!
				</div>
				<!-- style样式 -->
				<div :style="clsObj">
					Hello Vue!!!
				</div>
				<!-- 集合 -->
				<div :class="cs">
					Hello Vue!!!
				</div>
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				cls:'cl',
				clsObj:{
					color:'green',
					fontSize:'20px',
					fontWeight:'bold'
				},
				cs:['cl','cl1']
			}
		});
	</script>
</html>

 


2. 事件处理器
   事件监听可以使用v-on 指令


  2.1 事件修饰符
      Vue通过由点(.)表示的指令后缀来调用修饰符，
      .stop
      .prevent
      .capture
      .self
      .once 
 
      <!-- 阻止单击事件冒泡 -->
      <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>

     
      注1：什么是事件冒泡?
           见“事件冒泡模型.png” 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
 
	<body>
		<div id="app">
			<h2>{{ts}}</h2>
			<h2>事件修饰符</h2>
			{{msg}}
			<div>
				消息:<input type="text" v-model="msg" />
				<button @click="send">发送</button><br />
				 <!-- click 事件只能点击一次 -->
				 消息:<input type="text" v-model="msg" />
				 <button @click.once="send">发送</button>
				 <!-- 提交事件不再重载页面 -->
				 <div>
					 <form action="bookAction.action" v-on:submit.prevent="doSubmit">
						 消息:<input type="text" v-model="msg" />
							<input type="submit" value="提交" />
					 </form>
				 </div>
				 
			</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......')
				}
			}
		});
	</script>
</html>

 

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

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

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

      全部的按键别名：
      .enter
      .tab
      .delete (捕获 "删除" 和 "退格" 键)
      .esc
      .space
      .up
      .down
      .left
      .right
      .ctrl
      .alt
      .shift
      .meta      

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
 
	<body>
		<div id="app">
			<h2>{{ts}}</h2>
			<h2>事件修饰符</h2>
				 <!-- 按键修饰符 -->
				 消息:<input type="text" @keyup.enter="doKeyup" />
				 
				
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime()
			},
			methods:{
				doKeyup:function(){
					console.log(1234)
				}
			}
		});
	</script>
</html>

 

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

   3.1 常用控件
       文本框/密码框/文本域/隐藏域
   
       单选复选框/多选复选框

       单选按钮

       下拉框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
 
	<body>
		<div id="app">
			<h2>{{ts}}</h2>
			<h2>表单</h2>
				账号:<input type="text" v-model="username" /><br />
				密码:<input type="password" 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" :value="h.id"  v-model="hobbies"/>{{h.name}}
				</span><br />
				籍贯:
				<select v-model="areaname">
					<option value="">--请选择--</option>
					<option :value="a.id" v-for="a in area" >{{a.name}} </option>
				</select>
				<br />
				备注:
				<textarea v-model="remark"></textarea><br />
				
				<input type="checkbox" v-model="flag"/>已阅读<br />
				
				<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:'爱好1'},
					{id:2,name:'爱好2'},
					{id:3,name:'爱好3'},
					{id:4,name:'爱好4'},
				],
				hobbies:[],
				area:[
					{id:1,name:'籍贯1'},
					{id:2,name:'籍贯2'},
					{id:3,name:'籍贯3'},
					{id:4,name:'籍贯4'},
				],
				areaname:'',
				remark:'',
				flag:false
				
			},
			methods:{
				doRegister:function(){
					let params={
					username:this.username,
					Password:this.password,
					sex:this.sex,
					hobby:this.hobbies,
					areaname:this.areaname,
					remark:this.remark
					};
					console.log(params)
				}
				
			}
		});
	</script>
</html>

 

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

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

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


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


 demo4.html 
4. 自定义指令
   除了Vue自带的指令(v-on|v-model)等, Vue也允许注册自定义指令，根据作用范围又分为：全局指令/局部指令
     
   Vue.directive("focus",{});//全局指令

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
 
	<body>
		<div id="app">
			<h2>{{ts}}</h2>
			<h2>自定义指令</h2>
			<div v-fos="name">123123</div>
			<div v-yy="name">123123</div>
				
		</div>
	</body>
	<script>
		// 全局指令
		Vue.directive('yy',{
			bind:function(el,binding){
				console.log(el)
				console.log(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:{
				// 局部指令,所对应的钩子函数bind.inserted/nubind
				fos:{
					bind:function(el,binding){
						console.log(el)
						console.log(binding)
						console.log('bind......');
					},
					inserted:function(el,binding){
						console.log('inserted......');
					}
				}
			}
		});
	</script>
</html>

 

   下面的内容直接百度或查API即可
   指令定义函数提供了几个钩子函数用来帮助实现功能(可选)
   bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
   inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
   update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
   componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
   unbind: 只调用一次， 指令与元素解绑时调用。

   钩子函数的参数有
   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 }。
   vnode: Vue 编译生成的虚拟节点。
   oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。


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

  5.2 全局和局部组件
      全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
      局部组件: new Vue({el:'#d1',components:{...}})
 
      注册后，我们可以使用以下方式来调用组件： 
      <tagName></tagName>

  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
         }


demo6.html          
6. 自定义事件
   监听事件：$on(eventName) 
   触发事件：$emit(eventName) 

   注1：Vue自定义事件是为组件间通信设计   
        vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
     
        父Vue实例->Vue实例，通过prop传递数据
        子Vue实例->父Vue实例，通过事件传递数据 

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

PrateKing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE(未写完)
常蓬的博客
09-07 291
文章目录一.如何学习VUE二.VUE的概念三.MVVM或MV*如何使用VUE 一.如何学习VUE 培养思路，增强逻辑感，模仿他人代码 1.记住要：多做、多查、多问、多看 多做 【多做练习 ，多做项目，多做案例】 多查 【度娘】 多问 【碰见没有思路的问题，一定要，】 多看 【多看看别人代码，多人人家的思路】 2.四词真言 WWWH what ? 是什么？ why ? 为什么要学 when ? 什么时候用它 here ? 在哪用？ 二.VUE的概念 它是一个渐进式J
Vue基础语法(二)
南下在线的博客
08-22 273
1. 样式绑定 1.1 class绑定 使用方式：v-bind:class="expression" expression的类型：字符串、数组、对象 1.2 style绑定 v-bind:style="expression" expression的类型：字符串、数组、对象
vue模板语法
weixin_45092983的博客
08-01 143
今天我们讲的关于vue的模板语法 案例 1.插值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>...
一、vue基础语法（轻松入门vue）
热门推荐
莫安逸无风雪
04-13 1万+
Vue基础语法 Vue是一套用于构建用户界面的渐进式框架 Vue的核心库只关注视图层，不仅容易上手，还便于与第三方既有项目整合 一、HelloWord 引入vue.js 创建一个带有id的dom 编写vue实例，el挂载点对应HTMLdom，data数据 <script src="vue.js"></script> <div id="app"> {{...
Vue项目url中的＜%= BASE_URL %＞
空城三梦
11-29 3183
vue-cli 创建的一个项目中执行命令vue inspect > output.js将 vue-cli 中webpack 的配置信息导出到 output.js 文件，会有一段代码： new DefinePlugin( { 'process.env': { NODE_ENV: '"development"', BASE_URL: '"/"' } } ), 在 webpack 中全局声明了 BASE_...
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
前端框架Vue基础语法笔记
01-20
Vue基础语法笔记 本笔记主要涵盖了Vue基础语法的知识点，包括创建Vue实例、数据绑定、事件绑定、循环和数据双向绑定、组件化等方面的内容。 一、创建Vue实例 在Vue中，创建一个实例需要使用Vue.createApp()方法，...
02-Vue模板基础语法.zip
最新发布
04-06
【技术分析】 ... CSS，可以帮助把网页外观做得更加美观； JavaScript，是一种轻量级的解释型编程语言； ... Bootstrap 是快速开发 Web 应用程序的前端工具包。...AJAX，创建交互式网页应用的网页开发技术。...
Vue中通过TagName获取的DOM节点，控制台打印后HTMLConnection有内容，但是length为0
xiaofeiwei521的博客
01-22 1077
问题还原： 项目中在实现Excel在线预览时，通过js-xlsx插件将Excel转成html后，但是没有样式。所以自己通过getElementsByTagName(‘td’)获取所有td的DOM节点进行样式增加。获取到HTMLConnection节点并转成数据组后，发现有内容但是length为0，无法进行遍历操作等。 截图如下图所示： 解决方案： 这是由于DOM还未加载办成就进行了操作。所以将DOM操作的相关代码放到this.$nextTick中。 代码如下： this.excelView = XLSX.
vue标签
qq_53725689的博客
01-15 883
vue
Vue组件注册
Mikon_0703
12-17 149
一、全局组件注册 1.Vue.component直接注册 Vue.component(tagName, option) tagName命名规则： 1）短横线 如：button-counter 2）首字母大写 如：ButtonCounter option：template、methods、data data必须为函数 为什么data为函数？（官方文档）当一个组件被定义时，data必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实列。如果data仍然是一个纯粹的对象，则所有的实列将共享引
Vue的简单使用
weixin_46427348的博客
07-08 927
1.导入开发版本Vue.js 2.使用简洁的模板语法把数据渲染到页面上 {{ }}的作用是和下面的数据联系起来 3.创建Vue实例对象，设置el属性和data属性 el：挂载点 el的作用范围 ： 在其外部的时候无效 在其内部的时候有效 el：“#app” id 选择器 el: “.app” 类选择器 el “div” 标签选择器复杂数据的渲染 对象类型数据的渲染 数组类型数据的渲染 v-text ：设置标签的文本值 其中第一种写法会把整个标签中的值替换为message中的值
自己在使用vue的时候遇到的一些问题
你好
06-15 284
对前端可以说一窍不通，目前没时间去深入学习，把一些很低级的问题记录一下，以后用到的时候直接过来copy
前端笔记-使用vue绑定id使得组件更加灵活（在使用echarts时常用）
IT1995的博客
08-08 7185
目录 基本概念 代码与实例 基本概念 这个问题是在我使用echarts时出现的，因为echarts有这样的一个函数（官方实例） let myChart = this.$echarts.init(document.getElementById(this.idStr)); 这样的画就需要div的id号，为了使得这个id比较灵活，可以使用vue的绑定:id或者v-bind...
vue如何设置元素的显示隐藏
smallmww的博客
02-04 6301
vue元素显示与隐藏
html表格隐藏列赋值,vue项目自己封装了一个table组件，显示隐藏列操作非常慢？...
weixin_39639653的博客
06-03 172
**补充列表：**补充时间：201810181. 深拷贝方式：JSON.parse(JSON.stringify(xxxobj))。Object.assign当其中某一个属性的值为对象时，不能达到深拷贝效果[Object.assign参考][1]。自己尝试着封装一个通用的table组件，里面有一个显示、隐藏列的功能，如下图：可以通过点击“显示/隐藏列”下面的列名称来显示隐藏表格对应的列，但是当我多...
Vue基本语法 -- 样式绑定&事件处理器&vue表单&自定义指令
weixin_62322136的博客
08-01 209
除了Vue自带的指令(v-on|v-model)等,Vue也允许注册自定义指令，根据作用范围分为全局指令和局部指令(当前的vue实例内部)指令定义函数提供了几个钩子函数用来帮助实现功能(可选)bind只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作被绑定元素插入父节点时调用(有爹就行，而且这个爹要在vue实例里面)（父节点存在即可调用，不必存在于document中）。update被绑定元素所在的模板更新时调用，而不论绑定值是否变化。......
vue基本语法讲解.pdf
05-11
vue基本语法讲解.pdf

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值