vue.js的实现
在介绍怎么实现的之前,我先给大家推荐俩个小东西
1.vscode:
他是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹
配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持
Win、Mac 以及 Linux。
他的中文文档: https://jeasonstudio.gitbooks.io/vscode-cn-doc/content/
如下图:
2.JSRUN在线编辑器:
他主要分成四部分,第一部分就是HTML页面,第二部分就是JAVASCRIPT,第三部分就是css,最后一部分就是返回的
一个结果,如下图:
这是一个动态图,都是用JS实现的,jQuery和vue.js都可以实现出来。回到正题,想了解vue就先看看他是怎么获取到数据的吧
var app = new Vue({
el:'用来操作标签的id' //他是绑定某个元素,注意:他只操作元素中的内容
data:{
变量1:'值1', //自定义的变量
变量1:'值1' //自定义的变量
//这里需要注意的是,变量和变量之间需要用','隔开,最后一个一个变量不用加!!!
},
methods:{
fnction(){//方法
//一些的操作
},
function(){//方法
//一些的操作
}
//方法和方法之间和变量一样,都是用','隔开,最后一个方法不加!!!
}
})
这里只是一个整体的框架,并没有详细的介绍,接下来就针对性的介绍一下:
1.el
绑定某个元素，只操作元素中的内容。
例:新建一个div标签，并用el进行绑定。HTML内容
<div id="app">
</div>
Vue内容
var vm = new Vue({
el:'#app',//绑定id='app'的标签,只操作这个标签中的内容
});
以上就是对html中id=app的标签进行绑定。2.data
我们在编程中定义的变量,都需要统一在data中定义,这样我们在获取数据时,就可以通过
this.xxx来获取,应为data是一个对象,name就需要用对象的定义形式。
例:data对象中定义数据，并在html中展示输出。vue对象:
var vm = new Vue({
el:'#app',//绑定id='app'的标签,只操作这个标签中的内容
data:{
text: 'Hello word'//键值对
},
});
html内容:
<div id="app">
<p>{{text}}</p>//{{}}就是vue通过data中定义的变量,来获取到变量的值的
</div>3.methods
methods里可以定义一些方法，方法可在vue实例中访问，或者在指令中调用。定义方法可以通过在元素上加
v-on:event="xxx"来触发，这里的"v-on"代表要对所在绑定事件，":"后面是事件名称，比如
"click/touchstart等等"，"="后面的就是我们定义的方法名。
例:创建一个方法，点击按钮时将“你好帅!”变为“你好美!”。
html内容:
<div id="app">
<p>{{text}}</p>
<buttom v-on:click="change">切换</button>
</div>
vue内容:
var vm = new Vue({
el:'#app',//绑定id='app'的标签,只操作这个标签中的内容
data:{
text: '你好帅!'//键值对
},
methods:{
change:function(){
//将data定义的'你好帅!'内容变为'你好美!'
this.text = '你好美!';//变量在操作前必须在data中定义!!!!!
}
//如果不定义数据对变量操作,就会在页面上报错
//一个method "text" is not defined 的错误
}
});