本想着利用这个寒假来复习一下java,顺便写点小程序来作为下个学期的课程设计,但是因为一些原因(毕竟在学校里我做过一些切图的简单工作)我希望能熟悉一些js框架,然后被学长推荐来看看Vue。虽然官方文档已经讲的十分详细了,但是在运用这个框架的时候还是遇到了一些问题,在此记录一些,作为一个备忘。
首先是Vue的加载,官方下载开发版文件并外部链接调用js,和其他框架一样,我们的一些js代码需要在文档加载完后再执行才能产生对应效果。
window.onload=function(){
//vue代码
};
$(document).ready(function(e) {
//vue代码
});
然后是Vue代码了,因为没有十分深入的了解这个框架的,我只能浅显的谈一谈我学到的一些功能的应用。
一.声明式渲染
Vue.js的核心,这是一个将js中的属性数据同步到html中的一种方法,基础语法是
<元素标签 v-if="属性"></元素标签>
var 变量名=new Vue({ el:'元素类id标签', data:{ 属性名:值 } });
二.指令
一种以“v-”开头的html节点标签属性,指令的目的是利用js中的属性和方法对对应Vue实例下的元素节点进行更改,Vue实例(js中)绑定节点的id或者类,指令(html中)绑定Vue节点中的属性值,判定和渲染交给Vue来做。
是否显示此html元素。
扫描二维码关注公众号,回复:
1069905 查看本文章
<元素标签 v-if="属性名">文本</元素标签>
var 变量名= new Vue({ el: '元素类id标签', data: { 属性名:值 } });v-on:click
点击元素时调用对应的函数。
<元素标签 v-on:click="函数名">文本</元素标签>
var 变量名= new Vue({
el: '元素类id标签',
data: {
属性名:值
},
methods:{
函数名:fuction(){
//属性值的改变等等
}
}
});
三.组件
将已经写好的Vue实例和对应的html代码封装成一个对应的html标签,从而形成一个组件。要使用的时候就直接在html文件中写入对应标签,加强了html代码的可读性。
Vue.component('标签名', { props: ['标签对应属性'], template: 'html代码' })