以最快的速度学习vue,只挑重点。
Vue构造函数简单格式：
<div id="vue_det">
<h1>name: {{name}}</h1>
<h1>age: {{age}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
name: "李志云",
age: "20",
alexa: "10000"
},
methods: {
details: function() {
return this.name+ "-贼帅！";
}
}
})
</script>
模板语法：
1.文本对象，就如上面的 “ <h1>name: {{name}}</h1> ” 直接在data中定义即可。
2.HTML对象，使用 ”v-html“ 指令操作html元素，如下：
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>我要你的哎</h1>'
}
})
</script>
3.HTML 属性 的值应使用 “v-bind” 指令，如下：
</head>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<body>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">//勾选时改变下面div的背景颜色
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
</body>
4.完全js表达式
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
5. 指令（指令是带有 v- 前缀的特殊属性，例如常用的v-if， v-on，v-bind，v-show等等），
<div id="app">
//这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
<p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
6.双向绑定（ input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定）
<div id="app">
<p>{{ message }}</p>//内容会随下面文本框的输入而改变
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
7.过滤器，被用作一些常见的文本格式化。由"管道符"指示
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
过滤器可以串联：{{ message | filterA | filterB }} 可以接受参数：{{ message | filterA('arg1', arg2) }}
8.缩写，Vue.js 为两个最为常用的指令提供了特别的缩写：
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
语句模块
条件判断“v-if”,完整的如下：
<div id="app">
<div v-if="type === 'A'">//多对if else，单个写法就不说了
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
循环语句 v-for
//循环列表
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
//循环对象
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '李志云',
url: 'http://www.baidu.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
--也可以根据属性索引和key来获取
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
//循环整数
<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>
