1. Hello Vue!
创建一个普通html文件,使用CND
方式引入vue.js
,接下来就开始第一个Vue应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
<!-- 1. 引入vue.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<!-- 2. 创建一个div标签并设置id属性值为app-->
<div id="app">
<!-- 7. 使用双花括号包裹Vue对象中定义的message变量 -->
{{message}}
</div>
<!--3. 编写javascript脚本 -->
<script>
//4. 使用new Vue()创建vue实例
var app =new Vue({
el:"#app", //5. 设置要使用vue渲染的Dom节点
data:{ //6. 使用data属性定义数据,如下面的message变量值为Hello Vue!
message:"Hello Vue!",
}
})
</script>
</body>
</html>
在浏览器中打开运行结果显示如下:
Hello Vue!
2. Vue属性动态绑定v-bind
使用Vue提供的v-bind
指令可以将HTML中attribute
属性进行数值动态绑定,如css、id、name、src、href等属性
举个例子:
编写两个css样式如下:
.fontRed{
color:red;
}
.fontBlue{
color: blue;
}
使用v-bind:class="fontColor"
对div的class
属性进行绑定
<div id="app" v-bind:class="fontColor">
{{message}}
</div>
在vue实例中添加fontColor
变量默认值为"fontRed"
<script>
var app =new Vue({
el:"#app",
data:{
message:"Hello Vue!",
fontColor:"fontRed"
}
})
</script>
在浏览器中打开运行结果显示如下:
我们可以使用开发者工具查看源代码,此时使用v-bind:class的div已绑定class=“fontRed”
借助开发者工具的控制台,我们可以动态改变v-bind绑定的值,通过修改app.fontColor="fontBlue"如下:
注意:
这里的app为vue实例,如var app = new Vue(),通过app.fontColor可以直接调用修改data中的变量
简便写法:
v-bind的简单写法,可以使用:(冒号)来代替v-bind(推荐
),如下代码运行结果最终一致:
<div id="app" :class="fontColor">
{{message}}
</div>
3. Vue条件判断v-if
v-if指令主要用来做条件判断,我们对上面示例做如下修改:
<div id="app" :class="fontColor" >
{{message}}
<p v-if="isShow">你现在可以看见这段话了!</p>
</div>
<script>
var app =new Vue({
el:"#app",
data:{
message:"Hello Vue!",
fontColor:"fontRed",
isShow:true
}
})
</script>
在Vue实例中定义变量isShow为true,同时在p标签中使用v-if=“isShow”,运行结果显示如下:
我们通过开发者工具修改isShow的值为false再来看看结果:
我们查看html源代码发现,p标签变成了一段注释:
疑问:
这里Vue是如何处理的?
4. Vue中循环遍历指令v-for
在vue实例中定义一个数组,如下:
var app =new Vue({
el:"#app",
data:{
options:[
"床前明月光,",
"疑是地上霜,",
"举头望明月,",
"低头思故乡。"
]
}
})
html页面如下:
<div id="app" :class="fontColor" >
<p v-for="item in options">{{item}}</p>
</div>
运行结果如下:
5. Vue中事件绑定指令v-on
在v-if的基础上做如下修改,添加一个button按钮,该按钮使用v-on:click="hiddenMsg"绑定了一个隐藏消息事件,如下:
<div id="app" >
<p v-if="isShow">你现在可以看见这段话了!</p>
<button v-on:click="hiddenMsg">隐藏</button>
</div>
<script>
var app =new Vue({
el:"#app",
data:{
isShow:true,
},
methods:{
hiddenMsg:function () {
this.isShow = false;
}
}
})
</script>
未触发按钮事件时运行结果如下:
我们点击隐藏按钮触发hiddenMsg事件,运行结果如下:
此时已通过事件将p标签隐藏
简便写法:
v-on指令同样支持简便写法,可使用@
代替,如@click="hiddenMsg"
效果是一样的
6. Vue表单双向绑定v-model
在input标签上使用v-model可以将变量进行双向绑定,如下:
<div id="app" >
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app =new Vue({
el:"#app",
data:{
message:""
}
})
</script>
运行结果如下:
此时我们通过input输入框可以动态修改message值,即input输入框值改变,message值也发生改变
7. Vue自定义组件
<div id="app" >
<!-- 使用自定义组件custom -->
<custom></custom>
</div>
<script>
//自定义组件名为custom的组件
Vue.component("custom",{
template:"<div>这是自定义component</div>"
})
</script>
这是最简单的组件定义,如果我们希望可以通过父组件传值到子组件,那么该如何做?
在定义组件时,设置一个props,props中的值类似于html中的attribute属性,在父组件向子组件传值时,需要通过v-bind来绑定props中设置的属性,从而实现父组件向子组件传递值,如下:
<div id="app" >
<!--使用v-for进行遍历,将遍历后的结果通过v-bind:item进行绑定,这个item为子组件的属性 -->
<custom v-for="fruit in fruits" :item="fruit" :key="fruit"></custom>
</div>
<script>
Vue.component("custom",{
props:["item"], //设置一个fruit属性
template:"<div>{{item}}</div>"
})
var app =new Vue({
el:"#app",
data:{
fruits:["apple","banana","orange"]
}
})
</script>
运行结果如下: