欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

初入vue.js(1)

程序员文章站 2024-01-26 21:16:16
本文章属于个人在学习vue的随笔,留作与大家分享,技术交流之用,如果有错误,请大家多多指正。谢谢 首先说一下vue的使用方式: vue的使用方式一共有两种,第一种是直接在官网上下载vue.js的文件,之后在HTML页面里面直接使用script标签进行引用即可。另一种方式是使用vue-cil,使用no ......

  本文章属于个人在学习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代码了。

哈哈。