首页 > temp > JavaScript教程 >
-
初入vue.js(1)
本文章属于个人在学习vue的随笔,留作与大家分享,技术交流之用,如果有错误,请大家多多指正。谢谢
首先说一下vue的使用方式:
vue的使用方式一共有两种,第一种是直接在官网上下载vue.js的文件,之后在HTML页面里面直接使用script标签进行引用即可。另一种方式是使用vue-cil,使用node.js进行vue的手脚架的搭建。相比两种方式,第一种更适合初学者。第二种方式更适合vue的专业开发人员使用。这里由于我也是初学者。哈哈,就使用第一种方式来搭建vue环境。
官方的vue提供了两个版本,一个是开发版本,另一个是生产版本,顾名思义,开发版本内增加了大量的错误打印,供给开发者调试程序使用。生产版本则去掉了这一部分打印,并且进一步压缩了vue.js的文件体积。使得这个框架变得更轻量,加载速度更快一些。
-----------------------------------------------------------
接下来说vue的第一个新特性,双向绑定特性。Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。在页面里面创建任一元素,然后创建vue的应用,在data属性内声明一个变量,然后使用模板语法{{}}插入对应的js变量,将应的js变量的名称写入双大括号内,里面的值就会被渲染成对应的js的值。那么如何创建一个vue的应用呢?接下来说的就是创建vue应用的方法。
当页面中引入vuejs的时候,会声明一个vue的全局变量,然后我们需要通过new Vue();的方式来创建一个vue的应用,它会返回一个对象,这个对象称之为应用对象,在new Vue()的时候我们需要传递一个对象作为参数,对象中有两个非常重要的属性,一个是el(element),一般它的值是一个选择器,表示选择哪个元素。另一个属性是data。用于保存数据。我们在{{}}中声明了哪些变量,就需要在data中注册这些变量并且为变量进行初始化赋值。
接下来是创建vue应用的代码:
var vm= new Vue({
el: '#app',
data: {
message : 1
}
});
接下来是html引用的代码
<div id="app"> {{ message }} </div>
这样就算是写了一段最简单的vue的vue代码了。
哈哈。