前端三大框架：Angular.js、React.js、Vue.js，目前最热的是Vue，并且使用的热度还在递增中。
Vue已经将操作页面的方法封装好，我们只需要对数据进行修改就可以完成页面的显示。Vue核心思想：只要改变数据，页面就会发生改变Vue的Js源码库：https://v2.cn.vuejs.org/v2/guide/installation.html
一、导入VUE
<script src="https://unpkg.com/vue/dist/vue.js"></script>
二、标签关联Vue
1、div标签关联vue
<body>
<!-- VUE只能接管一个div-->
<div id="app">
<!--模板语言-->
{{msg}}
</div>
<!--导入-->
<script src="../js/vue.js"></script>
<!--编写VUE代码-->
<script>
//创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
msg:'test'
}
})
</script>
</body>
展示：
已把msg的值渲染到了页面中
2、input标签关联vue中methods
<body>
<!-- VUE只能接管一个div-->
<div id="app"><input type="button" @click="login" value="登录">
</div>
<!--导入-->
<script src="../js/vue.js"></script>
<!--编写VUE代码-->
<script>
//创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
msg:'test'
},
//存储所有的vue的方法
methods:{
login:function () {
//this代表Vue这个对象，下边是取到了data中的msg
alert(this.msg)
}
}
})
</script>
</body>
展示：
三、指令
带有v-的在vue中叫做指令，就是声明Vue中的指令，指令实际就是vue封装的一些Js操作方法，当数据值发生变更后，将其产生的影响，作用与DOM中，创建的指令v-bind、v-on、v-if、v-for
1、v-on（绑定事件）
- 全写模式：v-on
- 简写模式：@（推荐使用）
<body>
<!-- VUE只能接管一个div-->
<div id="app">
<!--模板语言-->
{{msg}}---{{count+1}}
<input type="button" @click="login" value="登录">
</div>
<!--导入-->
<script src="../js/vue.js"></script>
<!--编写VUE代码-->
<script>
//创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
msg:'test',
count:0
},
//存储所有的vue的方法
methods:{
login:function () {
//this代表Vue这个对象，下边是取到了data中的msg
this.msg='v-on方法'
}
}
})
</script>
</body>
点击【登录】前：
点击【登录】后：
2、v-bind（绑定属性）
在魔板语言中，我们可以通过 {{ data }} 的形式将data中的数据渲染到页面上，如果我们将data中的属性赋值给标签的属性时，就不能用 {{ data }} 格式来写了，而是需要用到属性来绑定：
<body>
<!-- VUE只能接管一个div-->
<div id="app">
<!-- 完整写法 -->
<a v-bind:href="url">百度</a>
<!-- 缩写-->
<a :href="url">跳转到百度地址</a>
</div>
<!--导入-->
<script src="../js/vue.js"></script>
<!--编写VUE代码-->
<script>
//创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
msg:'test',
count:0,
url:'http://www.baidu.com'
},
//存储所有的vue的方法
methods:{
login:function () {
//this代表Vue这个对象，下边是取到了data中的msg
this.msg='v-on方法'
}
}
})
</script>
</body>
（1）class中数组的绑定方式
<head>
<meta charset="UTF-8">
<title>学无止境</title>
<style>
.bg{
background-color: aqua;
width: 100px;
height: 100px;
}
.box{
border: 2px red solid;
}
</style>
</head>
<body>
<!-- VUE只能接管一个div-->
<div id="app">
<!--动态的css绑定-->
<!--方式1：直接绑定-->
<div :class="['bg','box']"></div>
<!--方式2：关联绑定-->
<div :class="classes"></div>
</div>
<!--导入-->
<script src="../js/vue.js"></script>
<!--编写VUE代码-->
<script>
//创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
classes:['bg','box']
},
//存储所有的vue的方法
methods:{
}
})
</script>
</body>
练习：
需求：通过点击【按钮】把上边图片的红色边框去掉
<head>
<meta charset="UTF-8">
<title>学无止境</title>
<style>
.bg{
background-color: aqua;
width: 100px;
height: 100px;
}
.box{
border: 2px red solid;
}
</style>
</head>
<body>
<!-- VUE只能接管一个div-->
<div id="app">
<!--关联绑定-->
<div :class="classes"></div>
<!--绑定方法，通过点击把【classes】替换成只有：bg属性-->
<input type="button" value="changeClass" @click="changeClass">
</div>
<!--导入-->
<script src="../js/vue.js"></script>
<!--编写VUE代码-->
<script>
//创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
classes:['bg','box']
},
//存储所有的vue的方法
methods:{
changeClass:function () {
this.classes = ['bg']
}
}
})
</script>
</body>
（2）绑定class，{}方式绑定（class属性字典的写法）
<head>
<meta charset="UTF-8">
<title>学无止境</title>
<style>
.bg{
background-color: aqua;
width: 100px;
height: 100px;
}
.box{
border: 2px red solid;
}
</style>
</head>
<body>
<!-- VUE只能接管一个div-->
<div id="app">
<!--关联绑定 bg、box为false时,也可引用变量is_bg、is_box，则不展示该属性 -->
<div :class="{bg:true,box:true}"></div>
</div>
<!--导入-->
<script src="../js/vue.js"></script>
<!--编写VUE代码-->
<script>
//创建对象
new Vue({
// 接管的标签
el:'#app',
// 数据源
data:{
classes:['bg','box'],
is_bg:true,
is_box:true
},
//存储所有的vue的方法
methods:{
changeClass:function () {
this.classes = ['bg']
}
}
})
</script>
</body>
（3）绑定class（class属性数组的写法）
<!--数组的写法中，每个值代表一个样式，所以要写成字符串--> <p v-bind:class="['blue','red']">蓝色字体红色背景色</p> <!--如果isBlue为真，则blue显示，否则为空，则不显示--> <p v-bind:class="[isBlue?'blue':'','red']">蓝色字体红色背景色</p
标签：VUE,vue,标签,基础,Vue,bg,msg,data From： https://www.cnblogs.com/brf-test/p/16972183.html