Vue.js核心语法与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/XiaoZJun/article/details/108000359

Vue基本语法

样式绑定

样式绑定

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

style绑定
v-bind:style=“expression”
expression的类型：字符串、数组、对象

事件修饰符

 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>

按键修饰符

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" />
		<title>VUE</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<!-- 1.插值 -->
		<div id="app">
		    <p>{{title}}  {{ts}}</p>
			<div : class='textColor'>你好</div>
			<button v-on:click='onClick'>显示</button><br/>
			{{ret}}
			
			<button @click.once="onClick">传递</button>
			<input type="text" @keyup.enter="onClick" v-model="text" />
			<button @click="onClick">传递</button>
			<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"/>
			<button @click.once="onClick">传递</button><br />
			{{text}}
		</div>
	</body>
	
	<script>
		var vm =new Vue({
			el:'#app',
			data:function(){
			  return{
				  title:'hello Vue',
				  ts:new Date().getTime(),
				  textColor:'cl',
				  text:'',
				  ret:'',
				  data:[
					  {id:1,name:'zs'},
					   {id:2,name:'ls'}
					   {id:3,name:'ww'}
				  ],
				  ids:[]
			  }	
			},
			methods:{
				onClick:function(){
					console.log("text")
					/* this.ret=this.text; */
				}
			}/* ,
			computed:function(){
				return this.ids=this.data;
			} */
		});
	</script>
</html>