通过上一次的学习，已经搭建了Vue的框架，这次来学习一下基本Vue的语法。以下操作在App.vue中进行。
{{}}
<template>
<div id="app">
<p>{{message}}</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
message: 'hello'
}
}
}
</script>
在HTML部分（template包裹）中使用‘{{message}}’，JS（script包裹）中申明数据data中的元素‘message’，我们实现了数据的绑定，HTML会动态获取JS中‘message’的内容进行显示。双大括号只能在文本内使用，不能放在标签上，即类似<div {{message}}></div>是错误的。
v-modle
<template>
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
message: 'hello',
existe: true,
seen: false
}
}
}
</script>
通过v-modle我们可以实现数据的双向绑定，但是只适用于表单标签。在这里，当我们修改文本框内的内容时，JS中元素‘message’和HTML中‘{{message}}’都会发生相应改变
v-if
<template>
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
<p v-if="existe">我是存在的</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
message: 'hello',
existe: true
}
}
}
</script>
通过‘v-if’绑定的元素‘existe’，我们可以控制该标签的存在与否。当‘existe’为‘true’，p存在；为‘false’，p不存在。
v-show
<template>
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
<p v-if="existe">我是存在的</p>
<p v-show="seen">我是可见的</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
message: 'hello',
existe: true
}
}
}
</script>
通过‘v-show’绑定的元素‘seen’，我们可以控制该标签的存在与否。当‘seen’为‘true’，p可见；为‘false’，p不可见。
v-if和v-show的异同
- 两者都可控制标签的显隐，在HTML界面上给人的感觉是一样的；
- v-if控制的是标签在文档中存在与否，若为‘false’，那么在整个文档中标签消失；
- v-show控制的是标签的display属性，为‘false’，只是添加属性‘display：none’；
- v-if每一次修改都会重新渲染文档，而v-show不会；
- 若初始值为‘false’，首次渲染v-if不会加载而v-show会加载。
v-for
<template>
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
<p v-if="existe">我是存在的</p>
<p v-show="seen">我是可见的</p>
<ol>
<li v-for="item in books" v-bind:key="item.key">
{{item.name}}
</li>
</ol>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
message: 'hello',
existe: true,
seen: false,
books: [
{key: 0, name: 'book1'},
{key: 1, name: 'book2'},
{key: 2, name: 'book3'}
]
}
}
}
</script>
v-for顾名思义有这循环遍历的作用，通过它我们可以很好的创建列表。v-for后面的v-bind：key省略对效果无影响，但是最好还是加上，便于区分列表中的每个标签。
v-bind
我们可以通过v-bind绑定标签的属性，包括固有属性和自定义属性。
v-bind：属性可缩写为：属性
以class属性为例，我们可以通过给标签绑定类名来切换样式；
<div v-bind:class="{ active: isActive }"></div>
对象语法
<div v-bind:class="classObject"></div>
//...
data: {
classObject: {
active: true,
'text-danger': false
}
}
数组方法
<div v-bind:class="[activeClass, errorClass]"></div>
//...
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
组件
组件是vue中最强大的功能之一，可以扩展 HTML 元素，封装可重用的代码。
这里我们来学习一下怎么引入组件。
1.我们要先创建组件：我选择在component文件夹下创建组件‘todo-item.vue’组件
<template>
<div>这是一个组件</div>
</template>
<script>
/*这里可以省略，不过我们的组件一般不会只有HTML没有JS*/
export default {}
</script>
2.接下来要注册组件，我们回到App.vue；
<template>
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
<p v-if="existe">我是存在的</p>
<p v-show="seen">我是可见的</p>
<ol>
<li v-for="item in books" v-bind:key="item.key">
{{item.name}}
</li>
</ol>
<!--使用组件，注意一定要放在div#app中-->
<todo-item></todo-item>
</div>
</template>
<script>
import Vue from 'vue'
import todoItem from './components/todo-item'//引入组将，注意路径，‘./’表示当前目录
Vue.component('todo-item', todoItem)//注册组件，然后我们就可以在HTML中使用组件了
export default {
name: 'app',
data () {
return {
message: 'hello',
existe: true,
seen: false,
books: [
{key: 0, name: 'book1'},
{key: 1, name: 'book2'},
{key: 2, name: 'book3'}
]
}
}
}
</script>
3.使用组件
请看第2步代码，注册好的组件可以在HTML中当做标签来使用。是不是感觉很方便，以后写header和footer再也不用复制粘贴了。
4.局部注册
刚才的注册是全局注册，其实还有一种注册方法--局部注册。
<script>
// import Vue from 'vue'
import todoItem from './components/todo-item'//引入组件不可少
// Vue.component('todo-item', todoItem)
export default {
name: 'app',
data () {
return {
message: 'hello',
existe: true,
seen: false,
books: [
{key: 0, name: 'book1'},
{key: 1, name: 'book2'},
{key: 2, name: 'book3'}
]
}
},
component: {todoItem},//这里我们在内部对组件进行了注册
}
</script>
网友评论