首页 > Web开发 > 详细

初入vue.js(1)

时间:2019-09-24 19:14:31      阅读:102      评论:0      收藏:0      [点我收藏+]

  本文章属于个人在学习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)

原文:https://www.cnblogs.com/Curtain-fantasy/p/11580014.html

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!