html
复制代码
<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>