一、认识vue
1、什么是vue
以数据驱动的web渐进式框架
2、优点
以数据驱动，不直接操作DOM，效率高
单页面应用，减少请求次数
数据的双向绑定，更新快
虚拟DOM
组件式开发
二、vue基础
1、实例
<body> <div id="app"> </div> </body> <script src="js/vue-2.5.17.js"></script> <script> new Vue({
//挂载点为id为app的标签 el:'#app', } }) </script>
2、数据data
<body> <div id="app"> </div> </body> <script src="js/vue-2.5.17.js"></script> <script> const app = new Vue({ el:'#app', //数据存放再Vue实例，data中，通过K:V的方式存 data:{ msg:'你好呀' } }) </script> //调用实例中的数据两种方式 app.$data.msg app.msg
3、方法methods
<body> <div id="app"> //这里我们定义了一个点击事件，方法名就是我们再methods中定义的方法 <div @click = 'dicClick'>{{msg}}</div> </div> </body> <script src="js/vue-2.5.17.js"></script> <script> new Vue({ el:'#app', data:{ msg:'你好呀' }, methods:{ //这里我们为挂载点中div标签定义了一个方法 divClick() { console.log('我点击了div') } } }) </script>
4、计算 computed
<body> <div id="app"> 姓为：<input type="text" v-model = 'first_num'><br> 名为：<input type="text" v-model = 'secend_num'><br> 姓名为：{{ num }} </div> </body> <script src="js/vue-2.5.17.js"></script> <script> new Vue({ el:'#app', data:{ first_num : '', secend_num : '', }, //适用于多个数据对一个数据有影响的情况 computed:{ num:function () { return this.first_num + this.secend_num } } }) </script>
5、监听 watch
<div id="app"> <input type="text" v-model="ab"> <div> {{ a }} {{ b }} </div> </div> <script> // 多个变量依赖于一个变量 new Vue({ el: "#app", data: { ab: "", a: "", b: "", }, watch: { ab: function() { // 逻辑根据需求而定 this.a = this.ab[0]; this.b = this.ab[1]; } } }) </script>