本文章属于个人在学习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)的更多相关文章

  1. 初入 vue

    基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发. 搭建 vue 项目 按官方指引,使用 vue-cli 搭建 vue 的项目. # 安装依赖库,建议指定 vue 和 element ...

  2. 初入Three.js 第一章

    一.什么是WebGL? 1.WebGL是在浏览器中实现三维效果的一套规范. 二.什么是threejs? 1.你将它理解成three + js就可以了.three表示3D的意思,js表示javascri ...

  3. vue.js 解决空格报错!!!

    当我们初入vue.js的时候.使用cli脚手架快速创建项目的时候: 如果语法格式错误(这里主要指的是:空格多少引起的问题)!! 找到  webpack.base.config.js文件注释掉下面的东西 ...

  4. Vue.js:轻量高效的前端组件化方案(转载)

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  5. 【转】Vue.js:轻量高效的前端组件化方案

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  6. Vue.js:轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  7. Vue.js之初印象

    一.背景 MVVM模式,很多人在说在用,好吧,我落后了,我目前的项目木有用到MVVM模式的框架,vuejs,reactjs,angularjs,nonono,自己去捣鼓过ng,项目木有用到.实在不敢称 ...

  8. 包学会之浅入浅出Vue.js:结业篇(转)

    蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. 在第一篇<包学会之浅入浅出Vu ...

  9. 包学会之浅入浅出 Vue.js:开学篇

    2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React.Angular.Vue.没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点.面试的时 ...

随机推荐

  1. Git整理[1] git cherry-pick的使用

    简单地说 git cherry-pick为”挑拣”提交 ,挑取某次提交合并到其他分支上,而不用合并整个分支. 参数: git cherry-pick [<options>] <com ...

  2. SonarQube规则之坏味道类型

    1.Abbreviation As Word In Name (默认 关闭)坏味道 主要检查验证标识符名称中的缩写(连续大写字母)长度,还允许执行骆驼案例命名allowedAbbreviationLe ...

  3. 软件安装——internal error2503/2502

    安装新的软件后先报internal error 2503,随后报internal error 2502.就是不让我装新的软件,提示说发生严重错误,然后安装失败. Solution for intern ...

  4. plt.imshow()为什么不能显示同时显两张照片

    在编程的过程中发现plt.imshow()不能同时显示两张照片,如果有两条plt.imshow()语句处于一前一后的位置,那么程序运行后只会显示后面的图片.如果想让每一张图片都显示出来,需要在每一个p ...

  5. ASP.NET MVC 下拉的使用(ViewData传递)

    C#部分 public void GetViewData() { List<string> data = new List<string>(); data.Add(" ...

  6. MK66FN2M0VLQ18

    NXP Kinetis K66: 180MHz Cortex-M4F MCU, 2MB Flash, 256KB SRAM, Dual USBs (FS + HS), Ethernet, 144-LQ ...

  7. find查找特殊权限用法

    find查找特殊权限的用法 find選項與參數: 3. 與檔案權限及名稱有關的參數: -name filename:搜尋檔案名稱為 filename 的檔案: -size [+-]SIZE:搜尋比 S ...

  8. HTML-空格字符实体

      不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格.在HTML中,如果你用空格键产生此空格,空格是不会累加的(只 ...

  9. 前后端分离项目中后台集成shiro需要注意的二三事

    1. 修改 Shiro 认证失败后默认重定向处理问题 a. 继承需要使用的 ShiroFilter,重载 onAccessDenied() 方法: @Override protected boolea ...

  10. Week6 - 676.Implement Magic Dictionary

    Week6 - 676.Implement Magic Dictionary Implement a magic directory with buildDict, and search method ...