vue基本语法二

vue基本语法二

    • 样式绑定
    • 事件处理器
    • vue表单

样式绑定

  • class绑定
    使用方式:v-bind:class=“expression”
    expression的类型:字符串、数组、对象
  • style绑定
    v-bind:style=“expression”
    expression的类型:字符串、数组、对象

事件处理器

  • 事件修饰符
    Vue通过由点(.)表示的指令后缀来调用修饰符1.stop
    2 .prevent
    3 .capture
    4 .self
    5 .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>
  • 按键修饰符
    Vue允许为v-on在监听键盘事件时添加按键修饰符
    例如:
<input v-on:keyup.enter="submit">

1.enter
2 .tab
3 .delete (捕获 “删除” 和 “退格” 键)
4.esc
5.space
6.up
7.down
8.left
9.right
10.ctrl
11.alt
12.shift
13.meta

vue表单

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

  • 常用控件
    1、文本框/密码框/文本域/隐藏域
    2、 单选复选框/多选复选框
    3、单选按钮
    4、下拉框

  • 修饰符
    1、lazy
    默认情况下, v-model在input事件中同步输入框的值与数据,但你可以添加一个修饰符lazy,从而转变为在change事件中同步
    2、number
    将用户的输入值转为 Number 类型
    3、trim
    自动过滤用户输入的首尾空格

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		.cl{
			color: bisque;
		}
	</style>
	<body>
		<div id="app">
			<p>{{title}},{{ts}}</p>
			<div :class="textColor">可乐爱七汐</div><br />
			<button @click='onClick'>来吧</button><br />
			{{text}}<br />
			<input type="text" v-model="text" />
			<!-- 可以点击多次,并且数据也可以变 -->
			<button @click="onClick">传递1</button>
			<!-- 只能点击一次 -->
			<button @click.once="onClick">传递2</button><br />
			
			<!-- @keyup.enter="onClick" 可以点击按钮也可以直接按回车键 -->
			<input type="text" @keyup.enter="onClick" v-model="text" />
			<button @click="onClick">传递2</button>
			<br />
			<div v-for="d in data">
				<input type="checkbox" v-model="ids" :value="d.id" />{{d.name}}<br />
			</div>
			{{ids}}<br />
			
			<!-- <input type="text"  v-model.number="text"/>
			{{text}} -->
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:'#app',
			data:function(){
				return{
					title:"kele qixi",
					ts:new Date().getTime(),
					textColor:'cl',
					text:'',
					ret:'',
					data:[
						{id:1,name:'kele'},
						{id:2,'name':'qixi'},
						{id:3,'name':'xuebi'},
						{id:4,'name':'jici'},
						{id:5,'name':'yl'},
					],
					ids:[]
				}
			},
			methods:{
				onClick:function(v){
					console:log(v)
				}
			}
		});
		
	</script>
</html>

最后实现的效果图
vue基本语法二_第1张图片
总结:如果不懂或者我写的不对的地方欢迎评论区逛街!!!!!
vue基本语法二_第2张图片

你可能感兴趣的:(笔记)