Vue 2.0修仙之路 — 指令
2018-05-30 本文已影响29人
杀个程序猿祭天
指令
| 指令 | 含义 | 例子 |
|---|---|---|
| v-model | 双向绑定 | <input v-model="value" /> |
| v-text | 渲染文本 | <div v-text="text"></div> |
| v-if | 条件判定 | <div v-if="true"></div> |
| v-for | 循环 | <div v-for="item in arr"></div> |
| v-once | 不能改变 | <span v-once>{{msg}} </span> |
| v-html | 渲染纯html | <div v-html="<h1>标题</h1> "></div> |
| v-bind | 绑定特定属性 | <div v-bind:title="你好！"></div> |
| v-bind | 渲染纯字符串 | <a v-bind:href="'https://www.baidu.com'"></a> |
| v-on | 点击事件 | <div v-on:click='click_'></div> |
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script src="js/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-text="msg"></div>
<div>{{msg}}</div>
<input type="text" v-model="msg">
<p v-if="seen">现在你看到我了</p>
<ul>
<li v-for="i in arrList">{{i.name}}今年{{i.age}}</li>
</ul>
<p>{{msg2}}</p>
<input type="button" v-on:click="fanzhuan" value="翻转">
</div>
</body>
</html>
<script src="js/demo.js"></script>
JS代码
window.onload = function(){
// MVVM model-view- viewmodel
// mustach语法 {{}}
// model 模型 data 实际数据
var data = {
msg:"hello word!",
msg2:"Jack",
seen:true,
arrList:[
{
"name":"张三",
"age":12
},
{
"name":"张四",
"age":13
},
{
"name":"张五",
"age":14
},
{
"name":"张六",
"age":15
},
]
}
// methods 事件
var methods = {
fanzhuan:function(){
this.msg2 = this.msg2.split('').reverse().join('')
}
}
// viewmodel 视图模型 注入Vue对象
var app = new Vue({
el:"#app",
data:data,
methods:methods
});
}
