vue快速入门（二）

工程搭建完成，接下来如何使用。

首先找到src\rooter\index.js文件 这里是路由文件配置要访问的组件，这个会在后期说明



这里的components/A 是组件里边的



需要手动 创建A.vue文件，结构如下：

<template>
<div>  <!---只允许有一个最外层标签 ！-->
<div>
{{message}}
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
message:'vue好帅！'
}
}
}
</script>
<style>

</style>

这里的"/a" 是在路由中配置的path,其它的同理。

基本语法使用：走起。

1、数据双向绑定 （v-model）

<p>{{message}}</p>
<p><input type="text" v-model="message"></p>

当input输入“真的吗” ，会发现

<p>{{ message }}</p>

中的内容也会被更新，MVVM模式已实现双向绑定

2、常用的指令

vue.js已 v-开头的

v-bind

v-on

v-if

v-else

v-show

v-for

@v-bind

v-bind

指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：

v-bind:class

v-bind:argument="expression"

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

如图，绑定属性，class,id,.....v-bind:name='........'



@v-on 监听DOM事件，点击事件监听 v-on:click="dosomething"

<p v-on:click="showAlert">点击我会弹出框</p>

<script>
export default {
data: function () {
return {
message: 'vue好帅！',
url:'www.baidu.com'
}
},
methods: {
showAlert: function(){
alert(1)
},
otherMethod: function(){
//.....
}
}

}
</script>

在methods对象下，v-on对应的绑上了showAlert函数，点击会触发该事件，如果有多个同理。

@v-if 条件渲染 遇见真值创建

v-if="expression"

expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：

<p v-if="seen">true</p>

data: function () {
return {
message: 'vue好帅！',
url:'www.baidu.com',
seen: true,
age: 22

}
}

seen 条件为真 ，页面会显示。否则是不会创建的。下边表达式age大于20 会显示年龄，否则是不会被创建的。

<p v-if="age > 20">{{age}}</p>

@v-show

v-show

也是条件渲染指令，和v-if指令不同的是，使用

v-show

指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性

<p v-show="age> 25">{{age}}</p>

当条件不成立，也会常见改标签，会使用行内样式处理 隐藏

@v-else指令 可以用

v-else

指令为

v-if

或

v-show

添加一个“else块”。

v-else

元素必须立即跟在

v-if

或

v-show

元素的后面——否则它不能被识别。

<p v-if="age>20">我大于{{age}}</p>
<p v-else>我小于{{age}}</p>

@v-for指令

v-for

指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：

v-for="item in items"

items是一个数组，item是当前被遍历的数组元素。

data: function () {
return {
message: 'vue好帅！',
url:'www.baidu.com',
seen: true,
age: 21,
dataList: [
{name: 'zs'},
{name: 'ee'},
{name: 'cc'}
]
}
}

<div v-for="item in dataList">
{{item.name}}
</div>

v-for ="(item, index) in dataList" index为索引值。

@ 绑定Class

v-bind:class

我们可以传给

v-bind:class

一个对象，以动态地切换 class 。

<div v-bind:class="{ active: isActive }"></div>

data: {
isActive: true  // 为true显示，否则 不显示
}

渲染为:

<div class="active"></div>

具体查看官方