初入vue.js(1)

2022-10-15,

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

哈哈。

 

《初入vue.js(1).doc》

下载本文的Word格式文档,以方便收藏与打印。