第一节课，科普Vue
[TOC]
说在前面
以下描述为了便于理解，都采用java、c/c++的描述方式，便于理解（虽然可能不会到位）
vue介绍
套话不多说，粗浅的可以认为它是一个用来开发web的框架
接入方式-CDN接入
-
开发版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产版本
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
初始化VUE
var app= new Vue({
el: '#app',
data: {
msg: "Hello Suning",
}
})
1、el：可以理解为vue的作用域，可以看到例子绑定了一个id为app的节点
2、data：vue自带的一个属性，里面放置数据集，可以是map、array、string、bool等
3、调用Vue()的构造函数实例化，并赋值给app
下面是id为app的一个dom节点
<div id="app">
</div>
hello，word
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
</body>
<script>
var app= new Vue({
el: '#app',
data: {
msg: "Hello Suning",
}
})
</script>
</html>
1、{{message}}，直接就可以显示出message的值，类似字符串模板，并且都是响应式的
2、在浏览器控制台改变message的值，html渲染的页面也会随之改动
v-bind指令
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title=msg>
{{msg}}
</div>
</body>
<script>
var app= new Vue({
el: '#app',
data: {
msg: "Hello Suning",
}
})
</script>
</html>
1、vue所有的指令都是"v-"开头
2、<div id="app" v-bind:title=msg>的意思是将特性title和数据msg进行绑定，让他们保持一致
3、在浏览器尝试下，改变msg的值，html里面的title同样会发生变化
条件if
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title=msg v-if=isShow>
{{msg}}
</div>
</body>
<script>
var app= new Vue({
el: '#app',
data: {
msg: "Hello Suning",
isShow:false
}
})
</script>
</html>
1、同样v-if也是vue的指令
2、v-id后面跟的是数据
3、打开浏览器看下id为app的这个div标签，如果v-if条件为真是怎么样，v-if条件为假又会是怎么样
4、如果把v-if换成指令v-show又会是怎么样
循环for
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title=msg v-if=isShow v-for="person in arrayData">
{{person}}
</div>
</body>
<script>
var app= new Vue({
el: '#app',
data: {
msg: "Hello Suning",
isShow:true,
arrayData:[{name:"小明"},{name:"小鹏"},{name:"小飞"},{name:"小涛"}]
}
})
</script>
</html>
1、指令v-for
2、跟高级语言中的forin一样
3、可以理解为
for(id obj in arrayData)
{
printf(obj.name);
}
按钮事件v-on
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title=msg v-if=isShow>
<button v-for="person in arrayData" v-on:click="clickButton($event)" v-bind:id=person.name>
{{person.name}}
</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
msg: "Hello Suning",
isShow: true,
arrayData: [{ name: "小明" }, { name: "小鹏" }, { name: "小飞" }, { name: "小涛" }]
},
methods:{
clickButton:function(event){
alert(event.target.id);
}
}
})
</script>
</html>
1、v-on:click="clickButton($event)"
2、v-on是用于绑定事件的指令
3、触发事件是click
4、执行的方法是clickButton
5、参数是$event，参数是啥可以自己控制台打印
6、在Vue初始化的时候这里多了一个methods，里面是用来放方法的
vue-model
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title=msg v-if=isShow>
<button v-for="person in arrayData" v-on:click="clickButton($event)" v-bind:id=person.name>
{{person.name}}
</button>
<input v-model=msg>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
msg: "Hello Suning",
isShow: true,
arrayData: [{ name: "小明" }, { name: "小鹏" }, { name: "小飞" }, { name: "小涛" }]
},
methods:{
clickButton:function(event){
alert(event.target.id);
}
}
})
</script>
</html>
1、v-model是用来双向绑定，绑定了input的value和数据msg
2、何为双向绑定，控制台试试app.msg=1改变，html页面也随之改变，这个跟上面的例子一样
3、改变html上的input里面的值，控制台打印app.msg也会发生改变
4、数据层和视图层双向绑定
模板component
自己预习