VueJs学习笔记:基本概念及简单demo
Vue官方介绍:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
简单小巧指的是vue.js压缩后仅有17KB,量轻。渐进式指的是我们学习和使用vue的过程中是一步一步循序渐进的,不必一开始就学会并使用所有的东西。
1.vue.js在设计上采用的是MVVM模式:当view(视图)层发生变化时,会自动更新到ViewModel(视图模型)层,反之亦然。View和Model通过双向绑定建立联系。大家都使用过JQuery,当页面的数据发生变化的时候,我们经常用JQuery去操作DOM元素来将最新的数据呈现给用户。这样带来的后果是我们的视图代码和业务代码紧紧耦合在一起,随着功能的增加和业务的复杂程度的增加,我们的代码会越来越难维护。
2.而Vue.Js通过MVVM模式将数据和视图双向绑定,我们只需要关注数据即可,剩下操作浏览器DOM的事情Vue帮我们自动完成,这样我们就可以专注于业务代码。
3.我们有两种方式将VueJs引进到自己的项目中,一种是我们直接通过script加载CDN文件:<script src="https://unpkg.com/vue/dist/vue.min.js"></script>,这种方式是自动引入最新版本的VueJs。第二种方式是我们将Vue代码包下载到自己的项目本地,然后在页面中通过script标签引用即可,我觉得如果是自己学习阶段的话可以直接引用CDN文件,这样简单方便。如果是实际项目的话还是将包下载到本地再引用。
4.下面用一段代码演示一下入门用法():
<body> <div id="app"> <input type="text" v-model="name"/>
<h1>Hello:{{name}}</h1> </div> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> <script>
//此处表示创建一个vue示例,并且将此示例挂在到id为app的html元素上 var app=new Vue({ el:"#app", //el是必须的,后边可以是html标签,也可以是css选择器 data:{ name:'' },
created:function(){
console.log(this.name);//此处输出name的值
},
mounted:function(){
console.log(this.$el);//此处输出<div id="app"></div>
}
}); </script> </body>
运行结果:
5.动手试一下发现,我在输入框中输入内容之后,输入的内容会自动显示在下边,这就是vue双向绑定数据。
6.vue挂载实例的时候一些事件
created:实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不可用。一般我们需要初始化一些数据的时候会用到这个事件。
mounted:el挂载到实例后调用,一般我们的第一个业务逻辑会从这里开始
beforeDestory:实例销毁之前调用,主要用于解绑使用addEventListener监听事件等。
7.这些事件与data类似,也是作为选项写在vue内,并且事件内的this指的是调用它的实例。
8.过滤器:
我们可以在{{}}插值的尾部添加一个符号:| 对数据进行过滤,经常用于格式化文本数据,比如数字小数位的显示,时间的格式化等。
<body> <div id="app"> {{num|formatNumber}}
<p v-if="show">show为true,显示这段文本</p> </div> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ num: '',
show:true
}, created: function () { console.log(this.num);//此处输出name的值 }, mounted: function () { console.log(this.$el); //此时输出<div id="app"></div> }, filters: { formatNumber: function (value) { return Math.round(value); //返回四舍五入之后的数字 } } }); </script> </body>
9.过滤器也可以同时使用多个:{{ num | filter1 | filter2 }},也可以接收参数:{{ num | filter('arg1','arg2') }},这里的字符串arg1和arg2将分别传递给过滤器的第二个和第三个参数,因为第一个是数据本身。
10.指令(directive)是vue最常用的一项功能,它带有前缀v-,例如上述代码中的v-if,还有v-bind,v-on
<body> <div id="app"> <a v-bind:href="url"></a> </div> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ show: true, url: 'www.fs.com' } }); </script> </body>
a标签渲染后的结果为:<a href='www.fs.com'></a>
使用语法糖可以简写为:<a :herf="url"></a>
参考资料:《Vue.Js实战》-梁灏
作者:ADi
转载请注明出处:https://www.cnblogs.com/Infancy/p/10741245.html