Vue笔记（二）基本语法

基本语法

<style>
table {
     
    border-collapse: collapse;
	margin:0 auto;
}
strong {
     
   color: rgb(235, 51, 100);
}

td, th {
     
    padding-left: 6px;
}
table tr td:first-child {
     
    width:150px
}
table tr td:nth-child(2) {
     
    width:300px
}
</style>
<template>
	<table border='1' style="width:1000px;float:center">
		<tr>
			<th>语法</th>
			<th>介绍</th>
			<th>实例</th>
		</tr>
		<tr>
			<td colspan="3"><strong>模板语法</strong></td>
		</tr>
		<tr>
			<td>简单的插值</td>
			<td>{
  { msga }}</td>
			<td>{
  { msg }}</td>
		</tr>
		<tr>
			<td>原始 HTML</td>
			<td>v-html="rawHtml"</td>
			<td v-html="v_html"></td>
		</tr>
		<tr>
			<td>Attribute 绑定</td>
			<td>v-bind:id="dynamicId" or :id="dynamicId"</td>
			<td><span :id="dynamicId">绑定id属性</span></td>
		</tr>
		<tr>
			<td>布尔型 Attribute</td>
			<td>禁用按钮,:disabled="'false'"</td>
			<td><span :id="dynamicId"><button :disabled="'false'">Button</button></span></td>
		</tr>
		<tr>
			<td>v-bind</td>
			<td>不带参数的 v-bind把js对象绑定单个元素上</td>
			<td><div id="2" v-bind="objectOfAttrs"></div></td>
		</tr>
		<tr>
			<td>JavaScript 表达式</td>
			<td>数据绑定支持完整的JavaScript表达式</td>
			<td>{
  { number + 1 }}</td>
		</tr>
		<tr>
			<td>调用函数</td>
			<td>可以在绑定的表达式中使用一个组件暴露的方法</td>
			<td>{
  { getName() }}</td>
		</tr>
		<tr>
			<td colspan="3"><strong>条件渲染</strong></td>
		</tr>
		<tr>
			<td>v-if</td>
			<td>v-if、v-else、v-else-if</td>
			<td>
				<div v-if="vif == 1">1</div>
				<div v-else-if="vif == 2">2</div>
				<div v-else>other numbers</div>
			</td>
		</tr>
		<tr>
			<td>v-show</td>
			<td>改变dispaly属性</td>
			<td>
				<div v-show="vshow">display：none</div>
			</td>
		</tr>
		<tr>
			<td>v-for</td>
			<td>for循环, (item,index) in/of items</td>
			<td>
				<span v-for="(item,index) in vfor" :key="index">{
  { index + item }} </span>
			</td>
		</tr>
		<tr>
			<td colspan="3"><strong>事件处理</strong></td>
		</tr>
		<tr>
			<td>v-on</td>
			<td>v-on监听DOM事件, 简写@</td>
			<td>
				<button @click="console.log('Hello World');">内联事件处理</button>
				<button @click="clickFun()">方法事件处理</button>
			</td>
		</tr>
		<tr>
			<td>event对象</td>
			<td>Vue的event对象就是原生js的event对象，通过$event可以把event对象当参数传入方法</td>
			<td>
				<button @click="eventFun">event</button>
				<button @click="eventFun1($event)">$event</button>
			</td>
		</tr>
		<tr>
			<td colspan="3"><strong>class绑定</strong></td>
		</tr>
		<tr>
			<td>:class</td>
			<td>允许传入对象来判断class熟悉是否生效，:class="{'className':true}"</td>
			<td>
				<span :class="{'className':className,'className2':false}">查看className</span>
			</td>
		</tr>
		<tr>
			<td>:class</td>
			<td>可以传入数组 :class="['classname1','classname2']"</td>
			<td>
				<span :class="['classname1','classname2']">查看className</span>
			</td>
		</tr>
		<tr>
			<td colspan="3"><strong>style绑定</strong></td>
		</tr>
		<tr>
			<td>:style</td>
			<td>可以传入对象，:style="{color:'red',fontSize:'5px'}"</td>
			<td>
				<span :style="{color:'red',fontSize:'5px'}">查看样式</span>
			</td>
		</tr>
		<tr>
			<td colspan="3"><strong>侦听器：侦听数据变化</strong></td>
		</tr>
		<tr>
			<td>watch</td>
			<td>在watch下定义与要监听的数据一样命名的函数</td>
			<td>
				{
  { watchNum }}<button @click="watchNumAdd()">方法事件处理</button>
			</td>
		</tr>
		<tr>
			<td colspan="3"><strong>表单输入绑定</strong></td>
		</tr>
		<tr>
			<td>v-model</td>
			<td>v-model="name"</td>
			<td>
				名字={
  { name }} 年龄={
  { age }}
			</td>
		</tr>
		<tr>
			<td colspan="3">
				<form>
					<table>
						<tr>
							<td>
								名字：
							</td>
							<td>
								<input type="text" v-model="name"/>
							</td>
						</tr>
						<tr>
							<td>
								年龄：
							</td>
							<td>
								<input type="text" v-model.lazy="age"/>
							</td>
						</tr>
					</table>
				</form>
			</td>
		</tr>
		<tr>
			<td colspan="3"><strong>获取DOM</strong></td>
		</tr>
		<tr>
			<td>ref</td>
			<td>直接获取HTML元素，ref="define",this.$refs.define</td>
			<td>
				<button ref="dom" @click="getDom()">获取DOM,改变文本</button>
			</td>
		</tr>
	</table>
</template>
<script>
	
	export default{
     
		data(){
     
			return{
     
				msg:'Hello VUE',
				msga:'{
     { }}',
				v_html:'<a href="https://www.baidu.com">超链接</a>',
				dynamicId:1,
				objectOfAttrs:{
     
					age:20,
					name:'hello'
				},
				number:25,
				vif:1,
				vshow:false,
				vfor:['zqq','hello'],
				className:true,
				watchNum:0,
				name:'',
				age:''		
			}
		},
		methods:{
     
			getName:function(){
     
				return 'Get Name';
			},
			clickFun(){
     
				alert(this.msg);
			},
			eventFun(e){
     
				console.log(e.target);
				e.target.innerHTML = 'Event';
			},
			eventFun1(e){
     
				console.log(e.target);
				e.target.innerHTML = '$Event';
			},
			watchNumAdd(){
     
				this.watchNum ++;
			},
			getDom(){
     
				this.$refs.dom.innerHTML = 'Hello';			
			}
		},
		watch:{
     
			//函数名与监听的数据一致
			watchNum:function(newVal,oldVal){
     
				alert('newVal =' + newVal + ' oldVal=' + oldVal);
			}
		}
		
	}
</script>