一. Vue基础语法
1. 插值操作
v-once
: 该指令表示元素和组件只渲染一次,不会随着数据的改变而改变。并且该指令后面不需要跟任何表达式。
<h2 v-once>{
{message}}</h2>
v-html
: 按照HTML格式解析,指令后面往往会跟上一个string类型。
<h2 v-html="link"></h2>
v-text
: 该作用和Mustache比较相似,都是将数据显示在界面中。不过v-text不会因为网络慢的原因,界面上出现未编译的Mustache标签。
v-text通常接受一个string类型。
<h2 v-text="message"></h2>
<h2>{
{message}}</h2>
v-pre
: 用于显示原本的Mustach语法,有点类似于转义符。
<h2 v-pre>{ {message}}</h2>
该语句会照原样显示,不会替换message中的值。
2. 绑定属性
v-bind
: 用于绑定一个或多个属性值,或向另一个组件传递props值。可以将data中的值进行动态绑定。语法糖:直接写:代替v-bind:
<div id="app">
<img v-bind:src="imageURL" alt="">
<!-- 语法糖的写法 -->
<img :src="imageURL" alt="">
</div>
<script src="../../js/vue-2.4.0.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
imageURL: 'https://cn.vuejs.org/images/logo.png',
}
})
</script>
v-bind
绑定class,一般使用对象语法。例子中:isActice, isLine一般是在data中定义为true或false。
<h2 :class="{
'active': isActive, 'line': isLine}">Hello World</h2>
v-bind
绑定class,一般使用对象语法。
<!--<h2 :style="{key(属性名):value(属性值)}">{
{message}}</h2>-->
<!--对象value可以是具体赋的值,也可以是data中的属性 -->
<!-- '50px'必须加上单引号,否则是当做一个变量去解析-->
<h2 :style="{
fontSize:'50px'}">{
{message}}</h2>
3. 计算属性
- 计算属性:一般用于对data中的一些数据进行转化后再显示。
<div id="app">
<h2>{
{fullName}}</h2>
</div>
<script src="../../js/vue-2.4.0.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Lebron',
lastName: 'James'
},
//computed:计算属性()
computed:{
fullName() {
return this.firstName+' '+this.lastName;
}
}
})
</script>
- 每个计算属性包含一个getter和一个setter,某些情况下可以提供setter方法(不常用)。当不写getter和setter方法时,默认是getter()方法,并且在调用的时候可以不写小括号,如上面这个例子。
- computed与methods比较:computed会进行缓存,如果多次使用时,只会调用一次。而methods则是使用几次,调用几次。
4. 事件监听
v-on
绑定事件监听器,语法糖:@代替v-on:
<button @click="increment">+</button>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
increment(){
this.counter++;
}
}
})
</script>
-
v-on参数
- 如果该方法不需要参数,那么方法中的()可以不添加。
- 如果该方法需要一个参数,调用方法时不加()则会将原生事件event参数传递进去。
- 如果需要传递event,可以通过$event传入。
-
v-on修饰符:
- .stop - 调用event.$stopProgation()
- .prevent - 调用event.$preventDefault()
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
- .native - 监听组件根元素的原生事件
- .once - 只触发一次回调
5. 条件和循环
v-if
,v-else-if
,v-else
与条件语句if、else、else if类似
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
-
v-show
的用法和v-if
非常相似,用法也一样。不同的是:v-if
当条件为false时,压根不会有对应的元素在DOM中。v-show
当条件为false时,仅仅是将元素的display属性设置为none而已。- 当只有一次切换时,使用
v-if
,频繁切换时使用v-show
。
-
v-for
类似于for循环,格式如item in items
形式。- 遍历数组:
<ul> <li v-for="(item,index) in names"> { {index+1}}.{ {item}} </li> </ul>
- 遍历对象:
<ul> <li v-for="(value,key,index) in info">{ {value}}-{ {key}}-{ {index}}</li> </ul>
-
**组件的key属性:**官方推荐我们在使用v-for时,给对应的元素或组件添加一个:key属性,作用主要是为了高效的更新虚拟DOM。
<ul>
<li v-for="(item,index) in letters" :key="index">{
{item}}</li>
</ul>
- 数组中的这些方法是响应式的:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
6. 表单绑定
- Vue中使用
v-model
指令来实现表单元素和数据的双向绑定。意思是:当input中v-model
绑定了message,会实时将输入的内容传递给message,message发生变化。
<!--v-model双向绑定-->
<input type="text" v-model="message">
<h2>{
{message}}</h2>
<script src="../../js/vue-2.4.0.js"></script