一、什么是vue
vue是一套用于构建用户页面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、与原生JS的区别
我们可以通过一个小案例来演示
案例：把输入框中的信息实时显示在span标签中
原生JS
<body>
<input id='txt' type="text">
<span id='con'></span>
</body>
<script>
document.querySelector('#txt').addEventListener('keyup', function () {
document.querySelector('#con').innerHTML = this.value
})
</script>
Vue
<body>
<div id="app">
<input id='txt' type="text" v-model="msg">
<span id='con'>{{msg}}</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
msg: ""
}
})
</script>
区别：其中明显的区别就是省去了对DOM元素的操作
总结：
创建DOM元素，使其成为Vue实例的挂载点，Vue实例中的所有数据这能在挂载点中使用
<div id=app>
</div>
通过new Vue来创建实例对象
el属性指定当前Vue实例的挂载点
data中是模型数据，这些数据依赖于当前Vue的实例，可以通过控制台输入app.msg来查看数据
可以通过插值表达式使用data中的数据
三、数据绑定
数据绑定就是将Vue实例中的data属性中的数据显示在挂载点中
1、内容绑定
将data中的数据显示成内容
<div id='app'>
<p>{{msg}}</p>
</div>
若想显示html标签只要是标签中用v-html即可
<div id='app'>
<p v-html>{{msg}}</p>
</div>
2、属性绑定
将data中的数据作为某个元素的属性值
使用v-bind即可，属性可以是内置的，也可以自定义的,简写方式:
<p v-bind:id="id" :class="class">{{msg}}</p>
3、表单标签的值
可以使用v-model指令在表单标签中使用双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
1、文本框和文本域
<input type:'text' v-model="msg"></input>
<textarea v-model:'msg'><textarea>
2、复选框
<div id='app'>
<lable for:'swim'><lable>
<input type='checkbox' id=swim v-model='isSwim'/>
<label for="read">阅读</label>
<input type="checkbox" id="read" v-model="isRead">
<label for="play">游戏</label>
<input type="checkbox" id="play" v-model="isPlay">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
isSwim:true,
isRead:true,
isPlay:false
}
})
</script>
单选框
<div id="app">
<label for="man">男</label>
<input type="radio" id="man" value="man" v-model="gender">
<label for="women">女</label>
<input type="radio" id="women" value="women" v-model="gender">
{{gender}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
gender:''
}
})
</script>
下拉框
<div id="app">
<select v-model="city">
<option disabled value="">请选择</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
{{city}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
city:""
}
})
</script>
传递参数
<div id='app'>
<button v-on:click="showInfo('hello')">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
title:"元旦"
},
methods:{
showInfo:function(message){
console.log(message)
}
}
})
</script>
四、事件处理
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<div id=app>
<button v-on:click='greet'></button>
</div>
var app = new Vue({
el:'#app',
data:{
name:'holle Vue'
},
//在 methods 中定义方法
methods:{
greet:function(event){
//this在方法中指向Vue实例
alert(this.name + '!')
if (event) {
alert(event.target.tagName)
}
}
})