我们用下载vue.js文件并用script标签引入的方式来介绍基本语法,实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="common/vue.js"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:
var data = { a: 1 }
var vm = new Vue({
el: '#app',
data: data
})
console.log(vm.$data === data) // => true
console.log(vm.$el === document.getElementById('app')) // => true
一、模板语法
1、插值
1.1、文本插值(数据绑定):
最常见的形式就是使用 {{...}}(双大括号)
或者用 v-text 来显示数据,里面的值会替换标签中的文本。
通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。
<div id="app">
<p>{{ message }}</p>
<!-- 等同于下面: -->
<p v-text="message"></p>
<p v-once>这个将不会改变: {{ message }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
此时,在控制台输入vm.message='qing'即可修改第一个和第二个p元素的值,不会修改第三个p元素。
1.2、html插值:应该使用 v-html 指令:
要想输出html代码,就要用到v-html指令。
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>hello 我是h1标签</h1>'
}
})
</script>
1.3、属性绑定:应该使用 v-bind 指令 :
<div v-bind:id="divId"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>
1.4表达式:
<div id="app">
{{message}}<br>
{{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,
id: 0,
message: 'Hello Vue!'
}
})
</script>
界面显示如下:
2、指令
指令是带有 v-
前缀的特殊特性。
2.1、参数:在指令名称之后以冒号表示。举例:
<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>
上面href、click就是参数。
2.2、修饰符:是以半角句号 .
指明的特殊后缀。举例:
.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit">...</form>
3、缩写
【v-bind:】缩写成【:】;【v-on:】缩写成【@】
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
二、样式绑定 'v-bind:class
' 简写成
':class
'
1、class样式—普通方法:(与原始添加class属性相同)
<style>
.red{
color: red;
}
</style>
...
<div id="app">
<div class="red">
我是有样式的div
</div>
</div>
如果需要根据条件判断是否添加某个class,则需要用到下面的几种方法:
2、class样式—对象语法:适用于要绑定的样式个数和名字确定,但动态决定用不用
2.1、传一个样式对象,绑定的数据对象不必内联定义在模板里:【推荐】
<div v-bind:class="classObject"></div>
...
data: {
classObject: {
active: true,
'text-danger': false
}
}
2.2、给 v-bind:class
传一个对象:
对象中的键是样式名称,值是boolean值,决定样式是否存在的。
<style>
.class1 {
background: #444;
color: #eee;
}
</style>
...
<div id="app">
<div v-bind:class="{class1: isActive}">
我是有样式的div
</div>
</div>
...
data: {
isActive: true
}
2.3、可以传入多个class,且与普通class属性共存:
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
注:带有减号的样式名称(例如上面例子中的'text-danger')要用引号引起来,不然报错,active也可以用引号引起来。
如果此时isActive=true,hasError=false,结果渲染为:
<div class="static active"></div>
3、class样式—数组语法:适用于要绑定的样式个数不确定、名字也不确定
3.1、给 v-bind:class
传一个数组:(一般不推荐这么写,比较麻烦)
<div v-bind:class="[activeClass, errorClass]"></div>
...
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
上面也可写成:【推荐】
<div v-bind:class="classArr"></div>
...
data: {
classArr: ['active','text-danger'],
}
或者也可以写成:
<div v-bind:class="['active', 'text-danger']"></div>
渲染为:
<div class="active text-danger"></div>
3.2、使用三元表达式:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
4、内联样式(不常用)—对象语法:v-bind:style
4.1、CSS 属性名可以用驼峰式或短横线分隔 (记得用引号括起来) 来命名
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">hello</div>
<!-- 或者下面的写法 -->
<div v-bind:style="{ 'color': activeColor, 'font-size': fontSize + 'px' }">hello</div>
...
data: {
activeColor: 'red',
fontSize: 30
}
4.2、传一个样式对象【推荐】
<div v-bind:style="styleObject"></div>
...
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
5、内联样式—数组语法
使用数组将多个样式对象应用到一个元素上
<div v-bind:style="[baseStyles, overridingStyles]"></div>
...
data: {
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}