一. Vue安装：
vue可以写在HTML中，可以在中使用：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
来导入vue.js
或者到官网下载并导入vue.js包
二.Vue基本使用
创建一个vue实例：
<div id="app">
{{ message }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</``script>
自己的理解：vue实例使用el绑定了id为‘app’的div，使用data来存放变量。使得data内的message变量可以直接使用{{message}}的方式来在网页上显示。
{{ }}可以将data中的数据取出并显示到网页上
使用if-else
使用v-if ，v-else-if，v-else来实现判断选择
<div id="app">
<h1 v-if="type==='A' ">A</h1>
<h1 v-else-if="type==='B' ">B</h1>
<h1 v-else-if="type==='D' ">D</h1>
<h1 v-else>Z</h1>
</div>
<script>
var vm =new Vue({
el:"#app",
data:{
type: 'A'
}
});
</script>
数组
var vm =new Vue({
el:"#app",
data:{
items: ["java","linux","前端"] //items可以实现数组，没有规定类型
}
});
实现循环
vue可以实现数组items，使用v-for来将items中的值取出并放入到item中，并用{{item.message}}取出每个message的值。
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script>
var vm =new Vue({
el:"#app",
data:{
items:[
{message:"我爱vue"},
{message:"我更爱React（狗头）"}
]
}
});
</script>
实现函数
绑定函数前要使用v-on，click来绑定一个处理点击事件的函数。类似于js中的onclick
<button v-on:click="Hi">click me</button>
<script>
var vm =new Vue({
el:"#app",
data:{
message: "hello"
},
methods:{//方法必须要定义在Vue的method中,v-on绑定事件
Hi:function(){
alert(this.message);
}
}
});
</script>
|