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>